hexagons.php
Quell Code
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>hexagons</title>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
h1{
color:white;
text-align:center;
width:50%;
padding:10px;
margin-left:calc(50% - 25% - 20px);
}
body{
background:green;
}
.hexagon {
position: absolute;
width: 100px;
height: 57.74px;
background-color: #64C7CC;
margin: 28.87px 0;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 28.87px solid #64C7CC;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 28.87px solid #64C7CC;
}
#all{
height:300px;
width:320px;
position:absolute;
left:500px;
top:220px;
}
#a{
position:absolute;
top:0;
left:55px;
background:black;
}
#a:before {
bottom: 100%;
border-bottom: 28.87px solid black;
}
#a:after {
top: 100%;
width: 0;
border-top: 28.87px solid black;
}
#b{
position:absolute;
top:0;
left:165px;
background:blue;
}
#b:before {
bottom: 100%;
border-bottom: 28.87px solid blue;
}
#b:after {
top: 100%;
width: 0;
border-top: 28.87px solid blue;
}
#c{
position:absolute;
top:90px;
left:110px;
background:red;
}
#c:before {
bottom: 100%;
border-bottom: 28.87px solid red;
}
#c:after {
top: 100%;
width: 0;
border-top: 28.87px solid red;
}
#d{
position:absolute;
top:90px;
left:0px;
background:orange;
}
#d:before {
bottom: 100%;
border-bottom: 28.87px solid orange;
}
#d:after {
top: 100%;
width: 0;
border-top: 28.87px solid orange;
}
#e{
position:absolute;
top:90px;
left:217px;
background:yellow;
}
#e:before {
bottom: 100%;
border-bottom: 28.87px solid yellow;
}
#e:after {
top: 100%;
width: 0;
border-top: 28.87px solid yellow;
}
#f{
position:absolute;
top:180px;
left:55px;
background:#123456;
}
#f:before {
bottom: 100%;
border-bottom: 28.87px solid #123456;
}
#f:after {
top: 100%;
width: 0;
border-top: 28.87px solid #123456;
}
#g{
position:absolute;
top:180px;
left:165px;
background:grey;
}
#g:before {
bottom: 100%;
border-bottom: 28.87px solid grey;
}
#g:after {
top: 100%;
width: 0;
border-top: 28.87px solid grey;
}
.beweg{
position:absolute;
left:105px;
top:105px;
animation:beweg forwards linear 1s 1 0.1s;
}
@keyframes beweg{
0%{
transform:scale(1);
z-index:0;
}
100%{
transform:scale(2);
z-index:1;
left:100px;
top:100px;
}
}
.opa{
animation:opacity forwards linear 1s 1 0.1s;
}
@keyframes opacity{
0%{
opacity:1;
}
100%{
opacity:0;
}
}
</style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="all"><div id="a"class="hexagon"></div>
<div id="b" class="hexagon"></div>
<div id="c" class="hexagon"></div>
<div id="d" class="hexagon"></div>
<div id="e" class="hexagon"></div>
<div id="f" class="hexagon"></div>
<div id="g" class="hexagon"></div>
</div>
<?php echo $seitenzahler ?>
<script>
$('.hexagon').hover(function(){
hat=$(this).hasClass('beweg');
n=this.id;
if(n=='a'){
$('#b,#c,#d,#e,#f,#g').addClass('opa');
}else if(n=='b'){
$('#a,#c,#d,#e,#f,#g').addClass('opa');
}else if(n=='c'){
$('#b,#a,#d,#e,#f,#g').addClass('opa');
}else if(n=='d'){
$('#b,#c,#a,#e,#f,#g').addClass('opa');
}else if(n=='e'){
$('#b,#c,#d,#a,#f,#g').addClass('opa');
}else if(n=='f'){
$('#b,#c,#d,#e,#a,#g').addClass('opa');
}else if(n=='g'){
$('#b,#c,#d,#e,#f,#a').addClass('opa');
}else {}
if(hat==true){
$(this).removeClass('beweg');
$('div').removeClass('opa');
}else{
$(this).addClass('beweg');
}
})
</script>
</body>
</html>