网页特效应用二期（电脑新建一个文本文档复制粘贴改后缀名为.html就能用）

最新推荐文章于 2024-04-28 10:55:39 发布
最新推荐文章于 2024-04-28 10:55:39 发布
阅读量556 收藏 1
点赞数 1
文章标签： javascript 前端 css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53497173/article/details/128325041
版权

在这里插入图片描述

特效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.05
		c1.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.1
		l2.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.65
		c0.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.85
		c-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.4
		c1.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.4
		c-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.45
		c-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.6
		c0-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.25
		c-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.05
		c-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.15
		c-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.85
		c-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.1
		c-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.45
		c0.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.45
		c0.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.1
		c2.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.6
		c-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.7
		c-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.6
		c-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.95
		c-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.45
		c-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-3
		C4.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>

在这里插入图片描述

觉得有意思的话，点个赞呗♥

隔壁老陈56
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
新建文本文档(批量改后缀名 查看可以改回.txt).bat
06-27
文件
HTML黑客帝国代码雨
m0_72846951的博客
08-25 6830
HTML黑客帝国代码雨
黑客帝国
weixin_46648077的博客
11-24 6394
① 首先新建一个空白TXT文本文档，双击打开 ②输入代码: @echo off color 0a :start echo 1 2 3 4 5 g 5 6 7 g t 2 1 3 4 5 6 7 4 3 2 3 5 5 6 7 8 1 2 3 4 5 6 7 8 9 g 3 5 7 ping localhost -n 1 > null echo 1 4 5 6 7 8 9 4 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 2 3 4 5 6 7 8 9 1 1 3 4 5 6 7
黑客帝国代码雨
Welcome to loveuui's blog
05-24 2705
黑客帝国代码雨 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>NumberRain</title> <style type="text/css"> canvas{ display: block; } </style> </head> <body> <canva
伪装黑客代码
热门推荐
ProgramFirst的博客
06-27 10万+
新建文本文档，将以下代码复制在文档中，保存并将扩展名改为(.bat) cd ../ cd ../ color a sfc/scannow dir/s tree C: tree D: dir C: dir D: ping 192.168.31.1 ping baidu.com ping 360.cn chkdsk C:/f @echo 修复完成，即将重启 pause shutdown -r -t 10 ...
C++牛逼程序分享，装X必用
yaosichengalpha的博客
04-13 4152
C++牛逼程序分享，装X必用
新建文本文档.bat
05-09
批量改文件名后缀，.wps转.doc
修改文件后缀名工具.zip
06-24
选择文件所在目录,填写文件后缀名,如png,jpg等,不用加".",点击执行,会把文件夹下所有文件修改为自己定义的后缀名文件,会自动生成一个新的文件夹,文件存放里面,保留原来的文件
批量修改后缀名.bat
07-10
ren *.pdf *.mp4
批量修改文件后缀名.xlsm
10-09
双击打开Excel后，程序自动运行，在 “文件选择框” 中选择需要修改的文件所在的 “文件夹”
复制粘贴源代码
09-15
java开发（一）文本的复制粘贴 import java.awt.Toolkit; import java.awt.datatransfer.Clipboard; import java.awt.datatransfer.DataFlavor; import java.awt.datatransfer.StringSelection; import java.awt.datatransfer.UnsupportedFlavorException; import java.io.IOException; public class CopyAndPaste { public static void main(String[] args) { //copy(); //可以 在键盘上 ctrl + v paste(); } public static void copy(){ Clipboard clipboard = Toolkit.getDefaultToolkit().getSystemClipboard(); //得到系统剪贴板 String text = "这是要拷贝的内容"; StringSelection selection = new StringSelection(text); clipboard.setContents(selection, null); } public static void paste(){ Clipboard clipboard = Toolkit.getDefaultToolkit().getSystemClipboard(); DataFlavor flavor = DataFlavor.stringFlavor; if(clipboard.isDataFlavorAvailable(flavor)){//是否符合剪贴板的数据类型 try { System.out.println("此时剪贴版的数据是：" + clipboard.getData(flavor)); } catch (UnsupportedFlavorException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } } }
97年的世界黑客编程大赛第一名的作品-Mekka 【代码+使用】
Coder的博客
03-12 5452
环境 win7系统 使用 1、把这段代码复制下来存为文本文档,命名为1.txt 2、再“运行”——CMD,在窗口中粘贴 debug<1.txt 3、回车 e100 33 f6 bf 0 20 b5 10 f3 a5 8c c8 5 0 2 50 68 13 1 cb e 1f be a1 1 bf 0 1 e11b 6 57 b8 11 1 bb 21 13 89 7 4b 4b 48 79 f9 ad 86 e0 8b c8 bd ff ff e8 20 e134 0 3d 0 1 74 1a 7f
html实现点击复制内容功能
Z__learning的博客
10-14 5833
html实现点击复制内容
bat的黑客代码
elsfkyxj的博客
12-20 1万+
今天给大家分享一个装逼代码
用python实现代码雨（电影黑客帝国里的效果，代码可直接运行）
数据知道的博客
10-15 3万+
用python实现代码雨： # -*- coding:utf-8 -*- import random import pygame from pygame.locals import * from sys import exit PANEL_width = 1920 PANEL_highly = 1080 FONT_PX = 40 pygame.init() # 创建一个可视窗口, 如果不想全屏运行，可以把 FULLSCREEN 参数去掉 winSur = pygame.display.set_mode
黑客命令小集
Gjqhs的博客
12-05 2240
net use $">\\ip\ipc$ " " /user:" " 建立IPC 空链接 net use $">\\ip\ipc$ "密码" /user:"用户名" 建立IPC 非空链接 net use h: $">\\ip\c$ "密码" /user:"用户名" 直接登陆后映射对方C：到本地为H: net use h: $">\\ip\c$ 登陆后映射对方C：到本地为H: net use $">\\ip\ipc$ /del 删除IPC 链接 net use h: /del 删
css3实现黑客数字雨(复制粘贴可直接运行)
Dyz_397的博客
06-07 449
【代码】css3实现黑客数字雨(复制粘贴可直接运行)
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 636
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
最新发布
励志做最业余的专业博主，控件产品可以私我~
04-28 734
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
创建一个文本文档为啥不显示后缀名
03-29
创建文本文档时，如果没有指定文件类型或后缀名，则操作系统可能会默认隐藏文件的后缀名，这可能会使文件类型和打开方式变得不清晰和混乱。为了避免这种情况，建议在创建文本文档时始终指定文件类型和后缀名，并在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

隔壁老陈56

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值