blog
/
css文字折叠特效.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }

         h1{
             text-transform: uppercase;
             letter-spacing: 3px;
             font-size: 15vw;
             transform: rotate(-10deg) skew(30deg);
             position: relative;
             color: rgba(0, 101, 253, 0.6);
             -webkit-text-stroke: 2px  rgba(0, 101, 253, 0.6);
             transition: all 1s;
         }
         h1:hover{
           /*   先叠层白的，再叠层黑的，先叠的白会覆盖到黑，白的地方亮，黑的地方暗 */
            text-shadow:3px 3px 6px #fff,
            3px 3px 6px #fff,
            0 0 0px #000;
         }
         h1::before{
             content: 'aurora';
             color: rgb(255, 255, 255);
             position: absolute;
             top: 0;
             left: 0;
             clip-path: inset(0 0 50% 0);
             transition: all 1s;
             transform: rotateX(0deg) skew(0deg);

         }
         h1:hover::before{
            transform: rotateX(-30deg) skew(-30deg);
           color: rgb(243, 243, 243);
           text-shadow: 0 0 1px black;

         }
         h1::after{
             content: 'aurora';
             color: rgb(255, 255, 255);
             position: absolute;
             top: 0;
             left: 0;
             clip-path: inset(50% 0 0 0);
             transition: all 1s;
             transform: rotateX(0deg) skew(0deg);

         }
         h1:hover::after{
            transform: rotateX(40deg) skewX(20deg) ;
            color: rgb(212, 212, 212);
            text-shadow: 0 0 1px black;
         }
    </style>
</head>
<body>

    <h1>aurora</h1>
    <canvas  id="draw" style="position: fixed; top: 0;left: 0; display: block; z-index: -1;">
			当前浏览器不支持Canvas，请更换浏览器后再试
    </canvas>


<!--       <div style="width:500px; height:300px; background-color: rgb(184, 174, 174);" ></div>
      <div style="width:500px; height:300px; background-color: rgb(184, 174, 174);" ></div>
      <div style="width:500px; height:300px; background-color: rgb(184, 174, 174);" ></div>
      <div style="width:500px; height:300px; background-color: rgb(184, 174, 174);" ></div>
 -->

    <script>
        var canvas = document.querySelector("#draw");
        var yuan = canvas.getContext("2d");

        /* 绑定窗口事件，canvas铺满可视区 */
            window.onresize=resizeCanvas;
        function resizeCanvas(){
            canvas.width=window.innerWidth;
            canvas.height=window.innerHeight;
        }
        resizeCanvas();

        /* 数组，存小圆 */
        var arr = [];

        /* 小圆形 */
        function circle (x,y,r){
           this.x=x;
           this.y=y;
           this.r=r;
           this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`
           this.xZou = parseInt(Math.random()*10);
           this.yZou = parseInt(Math.random()*10);
           arr.push(this);
        }

        /* 更新圆形 */
         circle.prototype.updated = function() {

            this.x = this.x + this.xZou ;
            this.y = this.y + this.yZou ;
            this.r = this.r - 0.1 ;
            if(this.r<0){
                this.remove();
            }
         }
         /* 删除小园 */

         circle.prototype.remove = function (){

            for(let i=0;i<arr.length;i++){
                  if(this==arr[i])
                  {
                      arr.splice(i,1);
                  }
            }

         }

         /* 渲染小圆 */

         circle.prototype.render = function(){
            yuan.beginPath();
            yuan.arc(this.x,this.y,this.r,0,2*3.14,false);
            yuan.fillStyle = this.color;
            yuan.fill();
         }

         /* 鼠标经过事件 */

         canvas.addEventListener('mousemove',function(e){
            new  circle(e.offsetX+25,e.offsetY+25,Math.random()*15);
         })

         /* 定时器渲染 */

         setInterval(function(){

               yuan.clearRect(0,0,canvas.width,canvas.height);

               for(let i=0;i<arr.length;i++){

                    arr[i].updated();
                    if(arr[i].render()){
                        arr[i].render();
                    }

               }

         },30)

    </script>

</body>
</html>