网页特效应用二期（电脑新建一个文本文档复制粘贴改后缀名为.html就能用）
2024-05-11 07:19:57
特效JS应用来源于网络搜集及个人编改，如有侵权，请联系删除。
更多请访问：老陈笔记
本期特效应用有：1、黑客帝国代码雨，2、蝴蝶特效，3、旋转烟花，4
立体文字，5、小太阳与云
1、黑客帝国代码雨
<!doctype html>
<html><head><meta charset="UTF-8"><title>黑客帝国代码雨</title><style>*{padding:0;margin:0}html{overflow:hidden}</style></head><body><canvas id="canvas" style="background:#111"></canvas><script type="text/javascript">window.onload = function(){//获取画布对象var canvas = document.getElementById("canvas");//获取画布的上下文var context =canvas.getContext("2d");//获取浏览器屏幕的宽度和高度var W = window.innerWidth;var H = window.innerHeight;//设置canvas的宽度和高度canvas.width = W;canvas.height = H;//每个文字的字体大小var fontSize = 16;//计算列var colunms = Math.floor(W /fontSize);//记录每列文字的y轴坐标var drops = [];//给每一个文字初始化一个起始点的位置for(var i=0;i<colunms;i++){drops.push(0);}//运动的文字var str ="javascript html5 canvas";//4:fillText(str,x,y);原理就是去更改y的坐标位置//绘画的函数function draw(){context.fillStyle = "rgba(0,0,0,0.05)";context.fillRect(0,0,W,H);//给字体设置样式context.font = "700 "+fontSize+"px 微软雅黑";//给字体添加颜色context.fillStyle ="#00cc33";//可以rgb,hsl, 标准色，十六进制颜色//写入画布中for(var i=0;i<colunms;i++){var index = Math.floor(Math.random() * str.length);var x = i*fontSize;var y = drops[i] *fontSize;context.fillText(str[index],x,y);//如果要改变时间，肯定就是改变每次他的起点if(y >= canvas.height && Math.random() > 0.99){drops[i] = 0;}drops[i]++;}}function randColor(){var r = Math.floor(Math.random() * 256);var g = Math.floor(Math.random() * 256);var b = Math.floor(Math.random() * 256);return "rgb("+r+","+g+","+b+")";}draw();setInterval(draw,30);};</script></body>
</html>2、蝴蝶特效
<!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"></head><style>
/**
* 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;
}</style><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>3、旋转烟花
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>旋转烟花</title><style>
html,body{margin:0px;width:100%;height:100%;overflow:hidden;background:#000;
}#canvas{width:100%;height:100%;
}</style></head>
<canvas id="canvas"></canvas><script>function initVars(){pi=Math.PI;ctx=canvas.getContext("2d");canvas.width=canvas.clientWidth;canvas.height=canvas.clientHeight;cx=canvas.width/2;cy=canvas.height/2;playerZ=-25;playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;scale=600;seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;seeds=new Array();sparkPics=new Array();s="https://cantelope.org/NYE/";for(i=1;i<=10;++i){sparkPic=new Image();sparkPic.src=s+"spark"+i+".png";sparkPics.push(sparkPic);}sparks=new Array();pow1=new Audio(s+"pow1.ogg");pow2=new Audio(s+"pow2.ogg");pow3=new Audio(s+"pow3.ogg");pow4=new Audio(s+"pow4.ogg");frames = 0;
}function rasterizePoint(x,y,z){var p,d;x-=playerX;y-=playerY;z-=playerZ;p=Math.atan2(x,z);d=Math.sqrt(x*x+z*z);x=Math.sin(p-yaw)*d;z=Math.cos(p-yaw)*d;p=Math.atan2(y,z);d=Math.sqrt(y*y+z*z);y=Math.sin(p-pitch)*d;z=Math.cos(p-pitch)*d;var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);if(!uc) return {x:0,y:0,d:-1};var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;if(!z)z=.000000001;if(ua>0&&ua<1&&ub>0&&ub<1){return {x:cx+(rx1+ua*(rx2-rx1))*scale,y:cy+y/z*scale,d:Math.sqrt(x*x+y*y+z*z)};}else{return {x:cx+(rx1+ua*(rx2-rx1))*scale,y:cy+y/z*scale,d:-1};}
}function spawnSeed(){seed=new Object();seed.x=-50+Math.random()*100;seed.y=25;seed.z=-50+Math.random()*100;seed.vx=.1-Math.random()*.2;seed.vy=-1.5;//*(1+Math.random()/2);seed.vz=.1-Math.random()*.2;seed.born=frames;seeds.push(seed);
}function splode(x,y,z){t=5+parseInt(Math.random()*150);sparkV=1+Math.random()*2.5;type=parseInt(Math.random()*3);switch(type){case 0:pic1=parseInt(Math.random()*10);break;case 1:pic1=parseInt(Math.random()*10);do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);break;case 2:pic1=parseInt(Math.random()*10);do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);do{ pic3=parseInt(Math.random()*10); }while(pic3==pic1 || pic3==pic2);break;}for(m=1;m<t;++m){spark=new Object();spark.x=x; spark.y=y; spark.z=z;p1=pi*2*Math.random();p2=pi*Math.random();v=sparkV*(1+Math.random()/6)spark.vx=Math.sin(p1)*Math.sin(p2)*v;spark.vz=Math.cos(p1)*Math.sin(p2)*v;spark.vy=Math.cos(p2)*v;switch(type){case 0: spark.img=sparkPics[pic1]; break;case 1:spark.img=sparkPics[parseInt(Math.random()*2)?pic1:pic2];break;case 2:switch(parseInt(Math.random()*3)){case 0: spark.img=sparkPics[pic1]; break;case 1: spark.img=sparkPics[pic2]; break;case 2: spark.img=sparkPics[pic3]; break;}break;}spark.radius=25+Math.random()*50;spark.alpha=1;spark.trail=new Array();sparks.push(spark);}pow = new Audio(`${s}pow${~~(Math.random()*4)}.ogg`); // switch(parseInt(Math.random()*4)){// case 0: pow=new Audio(s+"pow1.ogg"); break;// case 1: pow=new Audio(s+"pow2.ogg"); break;// case 2: pow=new Audio(s+"pow3.ogg"); break;// case 3: pow=new Audio(s+"pow4.ogg"); break;// }d=Math.sqrt((x-playerX)*(x-playerX)+(y-playerY)*(y-playerY)+(z-playerZ)*(z-playerZ));pow.volume=1.5/(1+d/10);pow.play();
}function doLogic(){if(seedTimer<frames){seedTimer=frames+seedInterval*Math.random()*10;spawnSeed();}for(i=0;i<seeds.length;++i){seeds[i].vy+=gravity;seeds[i].x+=seeds[i].vx;seeds[i].y+=seeds[i].vy;seeds[i].z+=seeds[i].vz;if(frames-seeds[i].born>seedLife){splode(seeds[i].x,seeds[i].y,seeds[i].z);seeds.splice(i,1);}}for(i=0;i<sparks.length;++i){if(sparks[i].alpha>0 && sparks[i].radius>5){sparks[i].alpha-=.01;sparks[i].radius/=1.02;sparks[i].vy+=gravity;point=new Object();point.x=sparks[i].x;point.y=sparks[i].y;point.z=sparks[i].z;if(sparks[i].trail.length){x=sparks[i].trail[sparks[i].trail.length-1].x;y=sparks[i].trail[sparks[i].trail.length-1].y;z=sparks[i].trail[sparks[i].trail.length-1].z;d=((point.x-x)*(point.x-x)+(point.y-y)*(point.y-y)+(point.z-z)*(point.z-z));if(d>9){sparks[i].trail.push(point);}}else{sparks[i].trail.push(point);}if(sparks[i].trail.length>5)sparks[i].trail.splice(0,1); sparks[i].x+=sparks[i].vx;sparks[i].y+=sparks[i].vy;sparks[i].z+=sparks[i].vz;sparks[i].vx/=1.075;sparks[i].vy/=1.075;sparks[i].vz/=1.075;}else{sparks.splice(i,1);}}p=Math.atan2(playerX,playerZ);d=Math.sqrt(playerX*playerX+playerZ*playerZ);d+=Math.sin(frames/80)/1.25;t=Math.sin(frames/200)/40;playerX=Math.sin(p+t)*d;playerZ=Math.cos(p+t)*d;yaw=pi+p+t;
}function rgb(col){var r = parseInt((.5+Math.sin(col)*.5)*16);var g = parseInt((.5+Math.cos(col)*.5)*16);var b = parseInt((.5-Math.sin(col)*.5)*16);return "#"+r.toString(16)+g.toString(16)+b.toString(16);
}function draw(){ctx.clearRect(0,0,cx*2,cy*2);ctx.fillStyle="#ff8";for(i=-100;i<100;i+=3){for(j=-100;j<100;j+=4){x=i;z=j;y=25;point=rasterizePoint(x,y,z);if(point.d!=-1){size=250/(1+point.d);d = Math.sqrt(x * x + z * z);a = 0.75 - Math.pow(d / 100, 6) * 0.75;if(a>0){ctx.globalAlpha = a;ctx.fillRect(point.x-size/2,point.y-size/2,size,size); }}}}ctx.globalAlpha=1;for(i=0;i<seeds.length;++i){point=rasterizePoint(seeds[i].x,seeds[i].y,seeds[i].z);if(point.d!=-1){size=200/(1+point.d);ctx.fillRect(point.x-size/2,point.y-size/2,size,size);}}point1=new Object();for(i=0;i<sparks.length;++i){point=rasterizePoint(sparks[i].x,sparks[i].y,sparks[i].z);if(point.d!=-1){size=sparks[i].radius*200/(1+point.d);if(sparks[i].alpha<0)sparks[i].alpha=0;if(sparks[i].trail.length){point1.x=point.x;point1.y=point.y;switch(sparks[i].img){case sparkPics[0]:ctx.strokeStyle="#f84";break;case sparkPics[1]:ctx.strokeStyle="#84f";break;case sparkPics[2]:ctx.strokeStyle="#8ff";break;case sparkPics[3]:ctx.strokeStyle="#fff";break;case sparkPics[4]:ctx.strokeStyle="#4f8";break;case sparkPics[5]:ctx.strokeStyle="#f44";break;case sparkPics[6]:ctx.strokeStyle="#f84";break;case sparkPics[7]:ctx.strokeStyle="#84f";break;case sparkPics[8]:ctx.strokeStyle="#fff";break;case sparkPics[9]:ctx.strokeStyle="#44f";break;}for(j=sparks[i].trail.length-1;j>=0;--j){point2=rasterizePoint(sparks[i].trail[j].x,sparks[i].trail[j].y,sparks[i].trail[j].z);if(point2.d!=-1){ctx.globalAlpha=j/sparks[i].trail.length*sparks[i].alpha/2;ctx.beginPath();ctx.moveTo(point1.x,point1.y);ctx.lineWidth=1+sparks[i].radius*10/(sparks[i].trail.length-j)/(1+point2.d);ctx.lineTo(point2.x,point2.y);ctx.stroke();point1.x=point2.x;point1.y=point2.y;}}}ctx.globalAlpha=sparks[i].alpha;ctx.drawImage(sparks[i].img,point.x-size/2,point.y-size/2,size,size);}}
}function frame(){if(frames>100000){seedTimer=0;frames=0;}frames++;draw();doLogic();requestAnimationFrame(frame);
}window.addEventListener("resize",()=>{canvas.width=canvas.clientWidth;canvas.height=canvas.clientHeight;cx=canvas.width/2;cy=canvas.height/2;
});initVars();
frame();</script>
4、立体文字
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>@font-face {font-family: "Meta";src: url("https://www.axis-praxis.org/fonts/webfonts/MetaVariableDemo-Set.woff2")format("woff2");
}* {margin: 0px;padding: 0px;
}
body {width: 100vw;height: 100vh;background-color: #8357eb;display: flex;justify-content: space-evenly;align-items: center;
}/*仅文字
.wrapper {text-align: center;height: 100vh;line-height: 100vh;
}
*/.wrapper {/* background-color: skyblue; */font-size: 15rem;font-family: "Meta";/* 文字内部颜色透明 */color: transparent;-webkit-text-stroke: 4px white;/* text-shadow: 0px 4px 0px white; */font-variation-settings: "wght" 900, "ital" 1;text-shadow: 10px 10px 0px #07bccc, 15px 15px 0px #e601c0,20px 20px 0px #e9019a, 25px 25px 0px #f40468, 45px 45px 0px #482896;cursor: pointer;transition: all 0.5s;
}.wrapper:hover {font-variation-settings: "wght" 100, "ital" 0;text-shadow: none;
}</style></head><body><div class="wrapper">NICE</div></body>
</html>5、小太阳与云
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>小太阳与云</title>
</head>
<style>* {margin: 0;padding: 0;
}body {position: relative;width: 100vw;height: 100vh;background: #ade5f5;display: flex;justify-content: center;align-items: center;overflow: hidden;
}.sun {position: relative;
}.sun_face {position: absolute;left: calc(50% - 85px);top: calc(50% - 85px);width: 170px;height: 170px;border-radius: 50%;background: linear-gradient(145deg, #fcc952, #fcc952 60%, #eca731 100%);box-shadow: 6px 6px 18px rgba(209, 129, 31, 0.4),-6px -6px 18px rgba(209, 157, 35, 0.4);
}.eyes {position: absolute;left: calc(50% - 40px);top: calc(50% - 10px);width: 80px;height: 20px;
}.eye {position: absolute;width: 20px;height: 20px;border-radius: 50%;background: #000;
}
.eye:nth-child(2) {right: 0;
}
.eye::before {content: "";position: absolute;right: 3px;top: 3px;width: 6px;height: 6px;border-radius: 50%;background-color: #fff;/* 运动 */animation: eyeMove 4s ease-in-out alternate infinite;
}
@keyframes eyeMove {0%,35% {right: 3px;}65%,100% {right: 11px;}
}
.mouth {position: absolute;left: calc(50% - 9px);top: calc(50% + 10px);width: 18px;height: 18px;border-radius: 0 0 9px 9px;background-color: #000;overflow: hidden;animation: mouthMove 2s linear infinite;
}
.tongue {position: absolute;top: 40%;width: 18px;height: 16px;border-radius: 50%;background: #f54b2e;
}
@keyframes mouthMove {0% {height: 18px;}100% {height: 24px;}
}.sun_light {position: absolute;left: calc(50% - 85px);top: calc(50% - 85px);width: 170px;height: 170px;z-index: -1;/* 整体旋转 */animation: lightRotate 20s linear infinite;
}
.light {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #f7a036;
}
.light:nth-child(2) {transform: rotate(60deg);
}
.light:nth-child(3) {transform: rotate(120deg);
}
@keyframes lightRotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}.cloud_wrap {position: absolute;left: 0;top: 0;width: 100%;height: 100%;
}
.cloud {position: absolute;width: 350px;height: 120px;border-radius: 60px;background-color: #fff;box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);opacity: 0.8;
}
.cloud::before,
.cloud::after {content: "";position: absolute;border-radius: 50%;background-color: #fff;
}
.cloud::before {width: 180px;height: 180px;top: -90px;right: 50px;
}
.cloud::after {width: 100px;height: 100px;top: -50px;left: 50px;
}.cloud-1 {top: 10vh;transform: scale(0.65);animation: cloudMove1 32s linear infinite;
}
.cloud-2 {top: 25vh;transform: scale(0.45);animation: cloudMove2 45s linear infinite;
}
.cloud-3 {top: 35vh;transform: scale(0.55);animation: cloudMove3 35s linear infinite;
}
.cloud-4 {top: 40vh;transform: scale(0.5);animation: cloudMove4 55s linear infinite;
}
.cloud-5 {bottom: 45vh;transform: scale(0.4);animation: cloudMove5 50s linear infinite;
}
.cloud-6 {bottom: 25vh;transform: scale(0.45);animation: cloudMove6 60s linear infinite;
}
.cloud-7 {bottom: 10vh;transform: scale(0.55);animation: cloudMove7 54s linear infinite;
}/* 让云元素进行运动，设置动画规则 */
@keyframes cloudMove1 {0% {left: -15%;}100% {left: 100%;}
}
@keyframes cloudMove2 {0% {left: 45%;}55% {left: 100%;}55.01% {left: -10%;}100% {left: 45%;}
}
@keyframes cloudMove3 {0% {left: 25%;}75% {left: 100%;}75.01% {left: -10%;}100% {left: 25%;}
}
@keyframes cloudMove4 {0% {left: 65%;}35% {left: 100%;}35.01% {left: -10%;}100% {left: 65%;}
}
@keyframes cloudMove5 {0% {left: 15%;}85% {left: 100%;}85.01% {left: -10%;}100% {left: 15%;}
}
@keyframes cloudMove6 {0% {left: 30%;}70% {left: 100%;}70.01% {left: -10%;}100% {left: 30%;}
}
@keyframes cloudMove7 {0% {left: 5%;}95% {left: 100%;}95.01% {left: -10%;}100% {left: 5%;}
}</style>
<body><div class="sun"><!-- 太阳的脸蛋 --><div class="sun_face"><div class="eyes"><div class="eye"></div><div class="eye"></div></div><div class="mouth"><div class="tongue"></div></div></div><!-- 太阳的光线 --><div class="sun_light"><div class="light"></div><div class="light"></div><div class="light"></div></div></div><!-- 白云 --><div class="cloud_wrap"><div class="cloud cloud-1"></div><div class="cloud cloud-2"></div><div class="cloud cloud-3"></div><div class="cloud cloud-4"></div><div class="cloud cloud-5"></div><div class="cloud cloud-6"></div><div class="cloud cloud-7"></div></div>
</body></html>
觉得有意思的话，点个赞呗♥
网页特效应用二期（电脑新建一个文本文档复制粘贴改后缀名为.html就能用）相关推荐
- 个人收藏的网页特效应用（电脑新建一个文本文档复制粘贴改后缀名为.html就能用）
1.樱花 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 新建一个文本文档，将后缀改为html，却还是文本文档格式，且后缀有txt
问题描述: 如图,在文本文档中写好网页代码,然后加后缀html,结果还是txt文档. 解决方法: 1.在文件夹点开或者直接在左下角搜索此电脑 2.点开此电脑,在顶部找到"查看".点 ...
- 修改注册表快速新建txt文本文档
平台: Windows 经常会遇到比如新建文件夹, 以及新建文本文档之类的需要. 新建文件夹默认提供快捷键 Ctrl + Shift + N, 但新建一个文本文档还需要右键, 加鼠标操作, 显得不那么 ...
- 怎么设置电脑开机后自动打开一个文本文档
电脑启动时自动打开一个文本文档有很多方法实现 1 最简单的在注册表的开机运行项目(hkey_local_machine\software\microsoft\windows\currentversio ...
- 我的电脑中无法新建txt文本文档
我的电脑中无法新建txt文本文档 电脑中病毒或者是系统错误所致,可以通过如下方式进行解决: 1.按Win+R打开运行,输入regedit,回车打开注册表编辑器; 2.按Ctrl+F键,输入:.txt, ...
- 解决windows上鼠标右键新建没有文本文档的选项
解决windows上鼠标右键新建没有文本文档的选项 最近在删除文件垃圾的时候,不知道把什么东西删除了,发现鼠标右键想要新建时没有了文本文档这个选项,解决的方法也有很多种,记录下我解决的这种方法. 首先 ...
- 打开一个文本文档，统计单词出现的次数的二种方法
运行后的结果: 打开一个文本文档,统计单词出现的次数 运行后的结果: 方式一,对标点符号进行了判断,更准确 方式二,文章经过处理,单词之间以空格分开 结果如下 方式一,对标点符号进行了判断,更准确 p ...
- win10右键新建没有文本文档
点击开始找到电脑附件,如图所示: 二.将下面代码放到文本保存为txtfile.reg 文件,保存到桌面,双击提示是否,点击就是变可以,然后你右击后你会发现你文本文档回来了 Windows Regist ...
- ubuntu20.04 下新建txt/文本文档（笔记）
1.主目录下找到模板文件夹,右击打开模板,在模板文件夹内右击打开终端 2.在打开的终端内输入 sudo gedit 文本文件 3.保存打开的空白文件 完成! 现在右击就有新建文本文档了!
最新文章
- java微信附件下载_WxJava微信开发工具包
- 【转】第一类Stirling数和第二类Stirling
- 计算机科学与技术专业术语
- 基于SSM实现医院疫情管理系统
- mybatis的注解开发之三种动态sql
- 表格 大小_单元格大小乱七八糟？给我3秒，还你一个完美表格！
- 计算机技术中采用二进制,在计算机技术中采用二进制.docx
- word文档怎样删除最后一页空白页
- iOS开发常用网址（最全）
- read/write 阻塞/非阻塞
- 初试 Kubernetes 暴漏服务类型之 Nginx Ingress
- 利用requests库下载视频
- 怎么用计算机编写文件,怎样在电脑上写作文做文件
- IT人生之猎人和猎狗
- 重启计算机计算机命令,指令行中,重启计算机的指令是什么
- 机电一体化计算机接口一般分为,[工学]4机电一体化计算机接口设计上.ppt
- 计算机2级excel题库百度云,计算机二级练习试题excel
- 凡事过往，皆为序章2021-01-11
- 锻炼专注能力表格使用记录
- 个人工作总结和计划怎么写