html--蝴蝶

2024-03-19 14:36
文章标签 html frontend 蝴蝶

本文主要是介绍html--蝴蝶，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！ 


<!DOCTYPE html>
<html lang="en" >
<head> 
<meta charset="UTF-8"> 
<title>蝴蝶飞舞</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">     
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" class="svg-defs"><defs><pattern id='image' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none"><image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/pattern_141.gif" width="100" height="100" preserveAspectRatio="none">
</image></pattern><g id="shape-butterfly-1"><path class="path" fill="" clip-rule="evenodd" d="M8.65,2.85c0.934-0.2,2.15-0.333,3.65-0.4c1.534-0.1,2.667-0.083,3.4,0.05c1.533,0.267,3.45,0.767,5.75,1.5c2.466,0.8,4.35,1.617,5.65,2.45c2.066,1.2,3.883,2.383,5.45,3.55c2.567,2.1,4.35,3.8,5.35,5.1l2.1,2.5c0.933,1.167,1.517,1.983,1.75,2.45c0.333,0.767,1.083,2.117,2.25,4.05c0.233,0.467,0.717,1.683,1.45,3.65c0.733,2.067,1.2,3.45,1.4,4.15c0.467,1.733,0.917,3.767,1.35,6.1l0.4,3.85l-0.25-3.4c-0.6-5.967-1.267-10.25-2-12.85c-0.733-2.434-2.167-5.467-4.3-9.1c-0.966-1.667-1.566-3-1.8-4c-0.233-0.933-0.1-1.267,0.4-1c1.3,0.733,2.917,3.867,4.85,9.4c1.667,4.7,2.85,11.2,3.55,19.5c0.567,6.934,0.667,11.917,0.3,14.95l0.2,0.05c0.231,0,0.348-0.05,0.35-0.15v0.05l0.1,0.05v27.4c-0.032-0.018-0.065-0.035-0.1-0.05v-0.05c-0.7,0.267-0.983,0.117-0.85-0.45c0.067-0.333,0.017-0.817-0.15-1.45c-0.2-0.6-0.316-0.983-0.35-1.15l-0.5-1.65c-0.533-2.967-0.833-5.034-0.9-6.2c-0.1-1.533-0.133-2.4-0.1-2.6c0-0.933,0.167-1.667,0.5-2.2c0.567-0.9,0.684-1.75,0.35-2.55c-0.167-0.367-0.367-0.6-0.6-0.7c-0.333-0.133-0.517,0.283-0.55,1.25c-0.033,1.533-0.167,2.9-0.4,4.1c-0.1,2.3-0.267,3.684-0.5,4.15c-0.333,0.667-1.25,2.95-2.75,6.85c-1.167,2.8-2.233,4.817-3.2,6.05c-0.9,1.2-1.583,2.1-2.05,2.7c-0.8,1-1.434,1.667-1.9,2c-2.067,1.333-3.633,2.067-4.7,2.2c-3.033,0.267-4.95,0.317-5.75,0.15c-0.8-0.167-1.383-0.217-1.75-0.15c-0.533,0.1-1.033,0.45-1.5,1.05c-0.5,0.667-1.217,1.284-2.15,1.85c-0.934,0.567-1.85,0.934-2.75,1.1c-2.467,0.433-4.45,0.25-5.95-0.55c-0.7-0.4-1.467-1.15-2.3-2.25c-0.6-0.867-1.033-1.567-1.3-2.1c-0.267-0.667-0.483-1.483-0.65-2.45c-0.3-1.467-0.383-2.717-0.25-3.75c0.267-1.9,0.45-3.05,0.55-3.45c0.233-1.233,0.566-2.333,1-3.3C9.25,77.45,9.767,76.4,10,76c0.667-1.233,1.55-2.583,2.65-4.05c1.1-1.434,2.184-2.583,3.25-3.45c0.367-0.3,1.15-0.867,2.35-1.7c0.767-0.566,1.917-1.25,3.45-2.05c1.733-0.933,3.267-1.633,4.6-2.1c2.133-0.733,4.534-1.467,7.2-2.2c0.467-0.1,1.517-0.3,3.15-0.6c0.967-0.233,0.4-0.4-1.7-0.5c-2.434-0.1-4.534-0.3-6.3-0.6c-1.566-0.267-3.383-0.7-5.45-1.3c-2.8-0.8-4.467-1.317-5-1.55c-1.567-0.667-3.2-1.75-4.9-3.25c-1.733-1.533-3-3.1-3.8-4.7c-0.533-1.067-0.967-2.434-1.3-4.1c-0.233-1.067-0.3-2.133-0.2-3.2c0.133-0.833,0.183-1.3,0.15-1.4v-0.6c-2.467-3.233-3.983-5.433-4.55-6.6c-0.533-1.033-0.883-1.833-1.05-2.4c-0.3-0.867-0.466-1.85-0.5-2.95c-0.033-2.367,0.034-4.117,0.2-5.25c0.3-1.034,0.483-1.8,0.55-2.3c0.167-0.867,0.034-1.533-0.4-2c-0.6-0.7-1.133-1.517-1.6-2.45c-0.566-1.133-0.833-2.117-0.8-2.95c0.033-1.333,0.167-2.367,0.4-3.1c0.367-1.267,1.05-2.267,2.05-3C4.417,4.25,6.483,3.317,8.65,2.85z"/><g></defs>
</svg><section class="background"></section><section class="scene3d"><div class="cube skybox"><var class="scale"><figure class="face front"></figure><figure class="face back"></figure><figure class="face right"></figure><figure class="face left"></figure><figure class="face top"></figure><figure class="face bottom"></figure></var></div><div class="butterfly_container"><var class="rotate3d"><var class="scale"><var class="translate3d"><var class="translate3d-1"><figure class="butterfly"><svg class="wing left" viewBox="0 0 50 100" class="icon shape-codepen"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> <svg class="wing right" viewBox="0 0 50 100" class="icon shape-codepen"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> </figure></var></var></var></var></div><div class="butterfly_container" style="margin-top: -150px; margin-left: 140px;-webkit-animation-duration: 5s;-moz-animation-duration: 5s;-ms-animation-duration: 5s;-o-animation-duration: 5s;animation-duration: 5s;"><var class="rotate3d"><var class="scale"><var class="translate3d"><var class="translate3d-1"><figure class="butterfly"><svg class="wing left" viewBox="0 0 50 100"style="-webkit-animation-duration: .75s;-moz-animation-duration: .75s;-ms-animation-duration: .75s;-o-animation-duration: .75s;animation-duration: .75s;"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> <svg class="wing right" viewBox="0 0 50 100"style="-webkit-animation-duration: .75s;-moz-animation-duration: .75s;-ms-animation-duration: .75s;-o-animation-duration: .75s;animation-duration: .75s;"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> </figure></var></var></var></var></div><div class="butterfly_container scale_half" style="margin-top: -10px; margin-left: 50px;-webkit-animation-duration: 5s;-moz-animation-duration: 5s;-ms-animation-duration: 5s;-o-animation-duration: 5s;animation-duration: 5s;"><var class="rotate3d"><var class="scale"><var class="translate3d"><var class="translate3d-1"><figure class="butterfly"><svg class="wing left" viewBox="0 0 50 100"style="-webkit-animation-duration: .75s;-moz-animation-duration: .75s;-ms-animation-duration: .75s;-o-animation-duration: .75s;animation-duration: .75s;"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> <svg class="wing right" viewBox="0 0 50 100"style="-webkit-animation-duration: .75s;-moz-animation-duration: .75s;-ms-animation-duration: .75s;-o-animation-duration: .75s;animation-duration: .75s;"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> </figure></var></var></var></var></div><div class="butterfly_container scale_half" style="margin-top: 20px;-webkit-animation-duration: 20s;-moz-animation-duration: 20s;-ms-animation-duration: 20s;-o-animation-duration: 20s;animation-duration: 20s;"><var class="rotate3d"><var class="scale"><var class="translate3d"><var class="translate3d-1"><figure class="butterfly"><svg class="wing left" viewBox="0 0 50 100"style="-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> <svg class="wing right" viewBox="0 0 50 100"style="-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> </figure></var></var></var></var></div><div class="butterfly_container scale_half" style="margin-top: 100px; margin-left: 50px;-webkit-animation-duration: 20s;-moz-animation-duration: 20s;-ms-animation-duration: 20s;-o-animation-duration: 20s;animation-duration: 20s;"><var class="rotate3d"><var class="scale"><var class="translate3d"><var class="translate3d-1"><figure class="butterfly"><svg class="wing left" viewBox="0 0 50 100"style="-webkit-animation-duration: 1.2s;-moz-animation-duration: 1.2s;-ms-animation-duration: 1.2s;-o-animation-duration: 1.2s;animation-duration: 1.2s;"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> <svg class="wing right" viewBox="0 0 50 100"style="-webkit-animation-duration: 1.2s;-moz-animation-duration: 1.2s;-ms-animation-duration: 1.2s;-o-animation-duration: 1.2s;animation-duration: 1.2s;"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> </figure></var></var></var></var></div><div class="butterfly_container scale_third" style="margin-top: 150px;-webkit-animation-duration: 20s;-moz-animation-duration: 20s;-ms-animation-duration: 20s;-o-animation-duration: 20s;animation-duration: 20s;"><var class="rotate3d"><var class="scale"><var class="translate3d"><var class="translate3d-1"><figure class="butterfly"><svg class="wing left" viewBox="0 0 50 100"style="-webkit-animation-duration: .35s;-moz-animation-duration: .35s;-ms-animation-duration: .35s;-o-animation-duration: .35s;animation-duration: .35s;"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> <svg class="wing right" viewBox="0 0 50 100"style="-webkit-animation-duration: .35s;-moz-animation-duration: .35s;-ms-animation-duration: .53s;-o-animation-duration: .35s;animation-duration: .35s;"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> </figure></var></var></var></var></div><div class="butterfly_container scale_third" style="margin-top: -250px; margin-left: 300px; -webkit-animation-duration: 4s;-moz-animation-duration: 4s;-ms-animation-duration: 4s;-o-animation-duration: 4s;animation-duration: 4s;"><var class="rotate3d"><var class="scale"><var class="translate3d"><var class="translate3d-1"><figure class="butterfly"><svg class="wing left" viewBox="0 0 50 100"style="-webkit-animation-duration: .45s;-moz-animation-duration: .45s;-ms-animation-duration: .45s;-o-animation-duration: .45s;animation-duration: .45s;"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> <svg class="wing right" viewBox="0 0 50 100"style="-webkit-animation-duration: .45s;-moz-animation-duration: .45s;-ms-animation-duration: .45s;-o-animation-duration: .45s;animation-duration: .45s;"><use class="left" xlink:href="#shape-butterfly-1"></use></svg> </figure></var></var></var></var></div></section></body></html>

css

/**
* MIXINS
*/
/* SYMBOLS */
/*** KEYFRAMES*/
@-webkit-keyframes rotating {0% {-webkit-transform: rotate3d(0, 0, 0, 0deg);-moz-transform: rotate3d(0, 0, 0, 0deg);-ms-transform: rotate3d(0, 0, 0, 0deg);-o-transform: rotate3d(0, 0, 0, 0deg);transform: rotate3d(0, 0, 0, 0deg);}100% {-webkit-transform: rotate3d(0, 1, 0, 720deg);-moz-transform: rotate3d(0, 1, 0, 720deg);-ms-transform: rotate3d(0, 1, 0, 720deg);-o-transform: rotate3d(0, 1, 0, 720deg);transform: rotate3d(0, 1, 0, 720deg);}
}
@-moz-keyframes rotating {0% {-webkit-transform: rotate3d(0, 0, 0, 0deg);-moz-transform: rotate3d(0, 0, 0, 0deg);-ms-transform: rotate3d(0, 0, 0, 0deg);-o-transform: rotate3d(0, 0, 0, 0deg);transform: rotate3d(0, 0, 0, 0deg);}100% {-webkit-transform: rotate3d(0, 1, 0, 720deg);-moz-transform: rotate3d(0, 1, 0, 720deg);-ms-transform: rotate3d(0, 1, 0, 720deg);-o-transform: rotate3d(0, 1, 0, 720deg);transform: rotate3d(0, 1, 0, 720deg);}
}
@-ms-keyframes rotating {0% {-webkit-transform: rotate3d(0, 0, 0, 0deg);-moz-transform: rotate3d(0, 0, 0, 0deg);-ms-transform: rotate3d(0, 0, 0, 0deg);-o-transform: rotate3d(0, 0, 0, 0deg);transform: rotate3d(0, 0, 0, 0deg);}100% {-webkit-transform: rotate3d(0, 1, 0, 720deg);-moz-transform: rotate3d(0, 1, 0, 720deg);-ms-transform: rotate3d(0, 1, 0, 720deg);-o-transform: rotate3d(0, 1, 0, 720deg);transform: rotate3d(0, 1, 0, 720deg);}
}
@-o-keyframes rotating {0% {-webkit-transform: rotate3d(0, 0, 0, 0deg);-moz-transform: rotate3d(0, 0, 0, 0deg);-ms-transform: rotate3d(0, 0, 0, 0deg);-o-transform: rotate3d(0, 0, 0, 0deg);transform: rotate3d(0, 0, 0, 0deg);}100% {-webkit-transform: rotate3d(0, 1, 0, 720deg);-moz-transform: rotate3d(0, 1, 0, 720deg);-ms-transform: rotate3d(0, 1, 0, 720deg);-o-transform: rotate3d(0, 1, 0, 720deg);transform: rotate3d(0, 1, 0, 720deg);}
}
@keyframes rotating {0% {-webkit-transform: rotate3d(0, 0, 0, 0deg);-moz-transform: rotate3d(0, 0, 0, 0deg);-ms-transform: rotate3d(0, 0, 0, 0deg);-o-transform: rotate3d(0, 0, 0, 0deg);transform: rotate3d(0, 0, 0, 0deg);}100% {-webkit-transform: rotate3d(0, 1, 0, 720deg);-moz-transform: rotate3d(0, 1, 0, 720deg);-ms-transform: rotate3d(0, 1, 0, 720deg);-o-transform: rotate3d(0, 1, 0, 720deg);transform: rotate3d(0, 1, 0, 720deg);}
}
@-webkit-keyframes rotatingY {100% {-webkit-transform: rotateY(-360deg);-moz-transform: rotateY(-360deg);-ms-transform: rotateY(-360deg);-o-transform: rotateY(-360deg);transform: rotateY(-360deg);}
}
@-moz-keyframes rotatingY {100% {-webkit-transform: rotateY(-360deg);-moz-transform: rotateY(-360deg);-ms-transform: rotateY(-360deg);-o-transform: rotateY(-360deg);transform: rotateY(-360deg);}
}
@-ms-keyframes rotatingY {100% {-webkit-transform: rotateY(-360deg);-moz-transform: rotateY(-360deg);-ms-transform: rotateY(-360deg);-o-transform: rotateY(-360deg);transform: rotateY(-360deg);}
}
@-o-keyframes rotatingY {100% {-webkit-transform: rotateY(-360deg);-moz-transform: rotateY(-360deg);-ms-transform: rotateY(-360deg);-o-transform: rotateY(-360deg);transform: rotateY(-360deg);}
}
@keyframes rotatingY {100% {-webkit-transform: rotateY(-360deg);-moz-transform: rotateY(-360deg);-ms-transform: rotateY(-360deg);-o-transform: rotateY(-360deg);transform: rotateY(-360deg);}
}
/**/
@-webkit-keyframes fluttering {0%, 25%, 50%, 75%, 100% {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}10%, 60% {-webkit-transform: translate3d(0, 150px, 0);-moz-transform: translate3d(0, 150px, 0);-ms-transform: translate3d(0, 150px, 0);-o-transform: translate3d(0, 150px, 0);transform: translate3d(0, 150px, 0);}30%, 80% {-webkit-transform: translate3d(0, 50px, 0);-moz-transform: translate3d(0, 50px, 0);-ms-transform: translate3d(0, 50px, 0);-o-transform: translate3d(0, 50px, 0);transform: translate3d(0, 50px, 0);}
}
@-moz-keyframes fluttering {0%, 25%, 50%, 75%, 100% {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}10%, 60% {-webkit-transform: translate3d(0, 150px, 0);-moz-transform: translate3d(0, 150px, 0);-ms-transform: translate3d(0, 150px, 0);-o-transform: translate3d(0, 150px, 0);transform: translate3d(0, 150px, 0);}30%, 80% {-webkit-transform: translate3d(0, 50px, 0);-moz-transform: translate3d(0, 50px, 0);-ms-transform: translate3d(0, 50px, 0);-o-transform: translate3d(0, 50px, 0);transform: translate3d(0, 50px, 0);}
}
@-ms-keyframes fluttering {0%, 25%, 50%, 75%, 100% {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}10%, 60% {-webkit-transform: translate3d(0, 150px, 0);-moz-transform: translate3d(0, 150px, 0);-ms-transform: translate3d(0, 150px, 0);-o-transform: translate3d(0, 150px, 0);transform: translate3d(0, 150px, 0);}30%, 80% {-webkit-transform: translate3d(0, 50px, 0);-moz-transform: translate3d(0, 50px, 0);-ms-transform: translate3d(0, 50px, 0);-o-transform: translate3d(0, 50px, 0);transform: translate3d(0, 50px, 0);}
}
@-o-keyframes fluttering {0%, 25%, 50%, 75%, 100% {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}10%, 60% {-webkit-transform: translate3d(0, 150px, 0);-moz-transform: translate3d(0, 150px, 0);-ms-transform: translate3d(0, 150px, 0);-o-transform: translate3d(0, 150px, 0);transform: translate3d(0, 150px, 0);}30%, 80% {-webkit-transform: translate3d(0, 50px, 0);-moz-transform: translate3d(0, 50px, 0);-ms-transform: translate3d(0, 50px, 0);-o-transform: translate3d(0, 50px, 0);transform: translate3d(0, 50px, 0);}
}
@keyframes fluttering {0%, 25%, 50%, 75%, 100% {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}10%, 60% {-webkit-transform: translate3d(0, 150px, 0);-moz-transform: translate3d(0, 150px, 0);-ms-transform: translate3d(0, 150px, 0);-o-transform: translate3d(0, 150px, 0);transform: translate3d(0, 150px, 0);}30%, 80% {-webkit-transform: translate3d(0, 50px, 0);-moz-transform: translate3d(0, 50px, 0);-ms-transform: translate3d(0, 50px, 0);-o-transform: translate3d(0, 50px, 0);transform: translate3d(0, 50px, 0);}
}
/**/
@-webkit-keyframes left-wing-flap {0% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);}50% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);}100% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);}
}
@-moz-keyframes left-wing-flap {0% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);}50% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);}100% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);}
}
@-ms-keyframes left-wing-flap {0% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);}50% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);}100% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);}
}
@-o-keyframes left-wing-flap {0% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);}50% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);}100% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);}
}
@keyframes left-wing-flap {0% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);}50% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);}100% {-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);}
}
@-webkit-keyframes right-wing-flap {0% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);}50% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);}100% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);}
}
@-moz-keyframes right-wing-flap {0% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);}50% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);}100% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);}
}
@-ms-keyframes right-wing-flap {0% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);}50% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);}100% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);}
}
@-o-keyframes right-wing-flap {0% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);}50% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);}100% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);}
}
@keyframes right-wing-flap {0% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);}50% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);}100% {-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);}
}
/****/
/*** SOURCE*/
body {width: 100%;height: 100%;overflow: hidden;
}.background {position: absolute;width: 100%;height: 100%;
}.scene3d {-webkit-perspective: 1000px;-moz-perspective: 1000px;-ms-perspective: 1000px;-o-perspective: 1000px;perspective: 1000px;-webkit-perspective-origin: 50% 50%;-moz-perspective-origin: 50% 50%;-ms-perspective-origin: 50% 50%;-o-perspective-origin: 50% 50%;perspective-origin: 50% 50%;position: absolute;width: 100%;height: 100%;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;
}.skybox.cube {position: absolute;left: 50%;top: 50%;width: 512px;height: 512px;margin-left: -256px;margin-top: -256px;-webkit-perspective-origin: 50% 50%;-moz-perspective-origin: 50% 50%;-ms-perspective-origin: 50% 50%;-o-perspective-origin: 50% 50%;perspective-origin: 50% 50%;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-animation: rotatingY 40s linear infinite;-moz-animation: rotatingY 40s linear infinite;-ms-animation: rotatingY 40s linear infinite;-o-animation: rotatingY 40s linear infinite;animation: rotatingY 40s linear infinite;
}
.skybox.cube var.scale {position: absolute;left: 50%;top: 50%;width: 512px;height: 512px;margin-left: -256px;margin-top: -256px;-webkit-perspective-origin: 50% 50%;-moz-perspective-origin: 50% 50%;-ms-perspective-origin: 50% 50%;-o-perspective-origin: 50% 50%;perspective-origin: 50% 50%;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);-moz-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);-ms-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);-o-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);
}
.skybox.cube .face {position: absolute;left: 50%;top: 50%;width: 512px;height: 512px;margin-left: -256px;margin-top: -256px;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;-o-backface-visibility: hidden;backface-visibility: hidden;
}
.skybox.cube .face.front {-webkit-transform: rotateY(0deg) translateZ(-256px);-moz-transform: rotateY(0deg) translateZ(-256px);-ms-transform: rotateY(0deg) translateZ(-256px);-o-transform: rotateY(0deg) translateZ(-256px);transform: rotateY(0deg) translateZ(-256px);background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_front.jpg");
}
.skybox.cube .face.back {-webkit-transform: rotateY(180deg) translateZ(-256px);-moz-transform: rotateY(180deg) translateZ(-256px);-ms-transform: rotateY(180deg) translateZ(-256px);-o-transform: rotateY(180deg) translateZ(-256px);transform: rotateY(180deg) translateZ(-256px);background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_back.jpg");
}
.skybox.cube .face.right {-webkit-transform: rotateY(-90deg) translateZ(-256px);-moz-transform: rotateY(-90deg) translateZ(-256px);-ms-transform: rotateY(-90deg) translateZ(-256px);-o-transform: rotateY(-90deg) translateZ(-256px);transform: rotateY(-90deg) translateZ(-256px);background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_right.jpg");
}
.skybox.cube .face.left {-webkit-transform: rotateY(90deg) translateZ(-256px);-moz-transform: rotateY(90deg) translateZ(-256px);-ms-transform: rotateY(90deg) translateZ(-256px);-o-transform: rotateY(90deg) translateZ(-256px);transform: rotateY(90deg) translateZ(-256px);background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_left.jpg");
}
.skybox.cube .face.top {-webkit-transform: rotateX(-90deg) translateZ(-256px);-moz-transform: rotateX(-90deg) translateZ(-256px);-ms-transform: rotateX(-90deg) translateZ(-256px);-o-transform: rotateX(-90deg) translateZ(-256px);transform: rotateX(-90deg) translateZ(-256px);background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_top.jpg");
}
.skybox.cube .face.bottom {-webkit-transform: rotateX(90deg) translateZ(-256px);-moz-transform: rotateX(90deg) translateZ(-256px);-ms-transform: rotateX(90deg) translateZ(-256px);-o-transform: rotateX(90deg) translateZ(-256px);transform: rotateX(90deg) translateZ(-256px);background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/hazy_lake_top.jpg");background: none;
}.butterfly_container {position: absolute;left: 50%;top: 50%;width: 100px;height: 100px;margin-left: -50px;margin-top: -50px;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-animation: rotatingY 10s linear infinite;-moz-animation: rotatingY 10s linear infinite;-ms-animation: rotatingY 10s linear infinite;-o-animation: rotatingY 10s linear infinite;animation: rotatingY 10s linear infinite;
}
.butterfly_container var {position: absolute;left: 50%;top: 50%;width: 100px;height: 100px;margin-left: -50px;margin-top: -50px;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;
}
.butterfly_container var.rotate3d {-webkit-transform: rotate3d(1, 0.5, 0, 70deg);-moz-transform: rotate3d(1, 0.5, 0, 70deg);-ms-transform: rotate3d(1, 0.5, 0, 70deg);-o-transform: rotate3d(1, 0.5, 0, 70deg);transform: rotate3d(1, 0.5, 0, 70deg);
}
.butterfly_container var.translate3d {-webkit-transform: translate3d(-300px, 0px, 0px);-moz-transform: translate3d(-300px, 0px, 0px);-ms-transform: translate3d(-300px, 0px, 0px);-o-transform: translate3d(-300px, 0px, 0px);transform: translate3d(-300px, 0px, 0px);
}
.butterfly_container var.translate3d-1 {-webkit-animation: fluttering 10s ease-in-out infinite;-moz-animation: fluttering 10s ease-in-out infinite;-ms-animation: fluttering 10s ease-in-out infinite;-o-animation: fluttering 10s ease-in-out infinite;animation: fluttering 10s ease-in-out infinite;
}
.butterfly_container.scale_half var.scale {-webkit-transform: scale3d(0.5, 0.5, 0.5);-moz-transform: scale3d(0.5, 0.5, 0.5);-ms-transform: scale3d(0.5, 0.5, 0.5);-o-transform: scale3d(0.5, 0.5, 0.5);transform: scale3d(0.5, 0.5, 0.5);
}
.butterfly_container.scale_third var.scale {-webkit-transform: scale3d(0.333, 0.333, 0.333);-moz-transform: scale3d(0.333, 0.333, 0.333);-ms-transform: scale3d(0.333, 0.333, 0.333);-o-transform: scale3d(0.333, 0.333, 0.333);transform: scale3d(0.333, 0.333, 0.333);
}
.butterfly_container.scale_quarter var.scale {-webkit-transform: scale3d(0.25, 0.25, 0.25);-moz-transform: scale3d(0.25, 0.25, 0.25);-ms-transform: scale3d(0.25, 0.25, 0.25);-o-transform: scale3d(0.25, 0.25, 0.25);transform: scale3d(0.25, 0.25, 0.25);
}
.butterfly_container figure.butterfly {position: absolute;left: 50%;top: 50%;width: 100px;height: 100px;margin-left: -50px;margin-top: -50px;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;
}
.butterfly_container figure.butterfly .wing {position: absolute;width: 50px;height: 100px;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);-moz-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);-ms-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);-o-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
}
.butterfly_container figure.butterfly .wing.right {-webkit-transform-origin: 50px 50px;-moz-transform-origin: 50px 50px;-ms-transform-origin: 50px 50px;-o-transform-origin: 50px 50px;transform-origin: 50px 50px;-webkit-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);-moz-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);-ms-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);-o-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);-webkit-animation: right-wing-flap 0.5s ease-in-out infinite;-moz-animation: right-wing-flap 0.5s ease-in-out infinite;-ms-animation: right-wing-flap 0.5s ease-in-out infinite;-o-animation: right-wing-flap 0.5s ease-in-out infinite;animation: right-wing-flap 0.5s ease-in-out infinite;filter: FlipH;-ms-filter: "FlipH";
}
.butterfly_container figure.butterfly .wing.left {-webkit-transform-origin: 50px 50px;-moz-transform-origin: 50px 50px;-ms-transform-origin: 50px 50px;-o-transform-origin: 50px 50px;transform-origin: 50px 50px;-webkit-animation: left-wing-flap 0.5s ease-in-out infinite;-moz-animation: left-wing-flap 0.5s ease-in-out infinite;-ms-animation: left-wing-flap 0.5s ease-in-out infinite;-o-animation: left-wing-flap 0.5s ease-in-out infinite;animation: left-wing-flap 0.5s ease-in-out infinite;
}
.butterfly_container figure.butterfly .wing use {display: block;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;fill: url(#image);stroke: white;
}.svg-defs {position: absolute;height: 0;width: 0;
}

在这里插入图片描述

在这里插入图片描述

这篇关于html--蝴蝶的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

原文地址:
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/826311。

相关文章

CSS3 布局样式及其应用举例

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能，无论是Flexbox的一维布局还是Grid的二维布局，它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局，本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2
阅读更多...
使用animation.css库快速实现CSS3旋转动画效果

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展，动画效果已经成为了网页设计中不可或缺的一部分，本文将深入探讨animation.css的工作原理，如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs
阅读更多...
CSS引入方式和选择符的讲解和运用小结

CSS引入方式和选择符的讲解和运用小结

《CSS引入方式和选择符的讲解和运用小结》CSS即层叠样式表，是一种用于描述网页文档（如HTML或XML）外观和格式的样式表语言,它主要用于将网页内容的呈现（外观）和结构（内容）分离，从而实现... 目录一、前言二、css 是什么三、CSS 引入方式1、行内样式2、内部样式表3、链入外部样式表四、CSS 选
阅读更多...
使用雪花算法产生id导致前端精度缺失问题解决方案

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面：本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.
阅读更多...
Nginx部署React项目时重定向循环问题的解决方案

Nginx部署React项目时重定向循环问题的解决方案

《Nginx部署React项目时重定向循环问题的解决方案》Nginx在处理React项目请求时出现重定向循环,通常是由于`try_files`配置错误或`root`路径配置不当导致的,本文给大家详细介... 目录问题原因1. try_files 配置错误2. root 路径错误解决方法1. 检查 try_f
阅读更多...
在React聊天应用中实现图片上传功能

在React聊天应用中实现图片上传功能

《在React聊天应用中实现图片上传功能》在现代聊天应用中,除了文字和表情,图片分享也是一个重要的功能,本文将详细介绍如何在基于React的聊天应用中实现图片上传和预览功能,感兴趣的小伙伴跟着小编一起... 目录技术栈实现步骤1. 消息组件改造2. 图片预览组件3. 聊天输入组件改造功能特点使用说明注意事项
阅读更多...
一文详解如何在Vue3中封装API请求

一文详解如何在Vue3中封装API请求

《一文详解如何在Vue3中封装API请求》在现代前端开发中,API请求是不可避免的一部分,尤其是与后端交互时,下面我们来看看如何在Vue3项目中封装API请求,让你在实现功能时更加高效吧... 目录为什么要封装API请求1. vue 3项目结构2. 安装axIOS3. 创建API封装模块4. 封装API请求
阅读更多...
全解析CSS Grid 的 auto-fill 和 auto-fit 内容自适应

全解析CSS Grid 的 auto-fill 和 auto-fit 内容自适应

《全解析CSSGrid的auto-fill和auto-fit内容自适应》：本文主要介绍了全解析CSSGrid的auto-fill和auto-fit内容自适应的相关资料，详细内容请阅读本文，希望能对你有所帮助... css  Grid 的 auto-fill 和 auto-fit/* 父元素 */.gri
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2