HTML爱心跳动和超炫Canvas星空闪烁实现

最新推荐文章于 2024-08-02 09:36:41 发布

┍ ⃢。

最新推荐文章于 2024-08-02 09:36:41 发布

阅读量3k

点赞数 4

分类专栏： HTML 进阶

本文链接：https://blog.csdn.net/qq_43712660/article/details/95608195

版权

HTML 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

进阶

1 篇文章 0 订阅

订阅专栏

超炫的动画就要开始了哦！！

往下看

星空闪烁：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body {
              width: 100%;
              margin: 0;
              overflow: hidden;
            }
            canvas{
              display:block;
            }
        </style>
    </head>
    <body>
        <canvas id='canv'></canvas>
        <script>
            var c = document.getElementById('canv');//获取canvas的Id
            var $ = c.getContext('2d');/*设置绘制方式*/
            var u = 0;

            var go = function() {
              var sc, g, g1, i, j, p, x, y, z, w, a, cur,
                d = new Date() / 1000,
                rnd = shift(),
                rnd1 = d,
                rnd2 = 2.4,
                rnd3 = d * 0.2,
                rnd1c = Math.cos(rnd1),
                rnd1s = Math.sin(rnd1),
                rnd2c = Math.cos(rnd2),
                rnd2s = Math.sin(rnd2);
              c.width = window.innerWidth;
              c.height = window.innerHeight;
              sc = Math.max(c.width, c.height);
              $.translate(c.width * 0.5, c.height * 0.5);//从中心开始绘制
              $.scale(sc, sc);//放大最大数值
              /*线性渐变*/
              g = $.createLinearGradient(-1, -2, 1, 2);
              g.addColorStop(0.0, 'hsla(338, 95%, 25%, 1)');
              g.addColorStop(0.5, 'hsla(260, 95%, 5%, 1)');
              g.addColorStop(1.0, 'hsla(338, 95%, 30%, 1)');
              $.fillStyle = g;//颜色
              $.fillRect(-0.5, -0.5, 1, 1);
              $.globalCompositeOperation = 'lighter';
              $.rotate(rnd3 % Math.PI * 2);/*旋转*/
              for (i = 0; i < 300; i += 1) {
                p = rnd();
                x = (p & 0xff) / 128 - 1;
                y = (p >>> 8 & 0xff) / 128 - 1;
                z = (p >>> 16 & 0xff) / 128 - 1;
                w = (p >>> 24 & 0xff) / 256;
                z += d * 0.5;
                z = (z + 1) % 2 - 1;
                a = (z + 1) * 0.5;
                if (a < 0.9) {
                  $.globalAlpha = a / 0.7;
                }else {
                  a -= 0.9;
                  $.globalAlpha = 1 - a / 0.1;
                }
                cur = x * rnd1c + y * rnd1s;
                y = x * rnd1s - y * rnd1c;
                x = cur;
                cur = y * rnd2c + z * rnd2s;
                z = y * rnd2s - z * rnd2c;
                y = cur;
                z -= 0.65;
                if (z >= 0) {
                  continue;
                }
                sc = 0.1 / z;
                x *= sc;
                y *= sc;
                $.save();
                g1 = $.createRadialGradient(1, 1, 2, 1, 1, 1);
                g1.addColorStop(0.0, 'hsla('+i+', 70%, 40%,.8)');
                g1.addColorStop(0.5, 'hsla('+i+', 75%, 50%, 1)');
                g1.addColorStop(1.0, 'hsla('+i+', 80%, 60%, .8)');
                $.fillStyle = g1;
                $.translate(x, y);
                $.scale(sc * 0.017, sc * 0.017);
                $.beginPath();
                $.moveTo(2, 0);
                for (j = 0; j < 10; j += 1) {
                  $.rotate(Math.PI*2 * 0.1);
                  $.lineTo(j % 2 + 1, 0);
                }
                $.arc(10, 10, 1, 0, Math.PI * 2);    
                $.rotate(Math.PI * 2 * 0.1);
                $.closePath();
                $.fill();
                $.restore();
              }
            };
            /*
            Marsaglia's Xorshift128 PRG: http://en.wikipedia.org/wiki/Xorshift
            */
            var shift = function(x, y, z, w) {
              x = x || 1234567;
              y = y || 362436069;
              z = z || 521288629;
              w = w || 88675123;

              return function() {
                var s = x ^ (x << 11);
                x = y;
                y = z;
                z = w;
                w = (w ^ (w >>> 19)) ^ (s ^ (s >>> 8));
                return w;
              };
            }
            window.addEventListener('resize', function() {
              c.width = window.innerWidth;
              c.height = window.innerHeight;
            }, false);
            window.requestAnimationFrame = window.requestAnimationFrame||
            window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame;
            var run = function() {
              window.requestAnimationFrame(run);
              go();
            }
            run();
        </script>
    </body>
</html>

爱心跳动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>情人节心跳动动画</title>
    <style type="text/css">
       html, body{
          width: 100%;
          height: 100%;
          min-width: 500px;
          min-height: 500px;
          overflow: hidden;
        }
        .heart {
          position: absolute;
          width: 100px;
          height: 90px;
          top: 50%;
          left: 50%;
          margin-top: -45px;
          margin-left: -50px;
        }
        .heart:before,
        .heart:after {
          position: absolute;
          content: "";
          left: 50px;
          top: 0;
          width: 50px;
          height: 80px;
          background: #fc2e5a;
          border-radius: 50px 50px 0 0;
          transform: rotate(-45deg);
          transform-origin: 0 100%;
        }
        .heart:after {
          left: 0;
          transform: rotate(45deg);
          transform-origin :100% 100%;
        }
        .heart1{
           animation: heart-anim 1s linear .4s infinite;
        }
        .heart2{
           animation: pounding .5s linear infinite alternate;
        }
        .heart1:after, .heart1:before{
          background-color: #ff7693;
        }

        @keyframes pounding{
          0%{ transform: scale(1.5); }
          100%{ transform: scale(1); }
        }
        @keyframes heart-anim {
          46% {

            transform: scale(1);
          }
          50% {
            transform: scale(1.3);
          }
          52% {
            transform: scale(1.5);
          }
          55% {
            transform: scale(3);
          }
          100% {
            opacity: 0;
            transform: scale(50);
          }
        }
	
    </style>
</head>
<body>
    <!--外圈大心-->
   <div class="heart heart1"></div>
  <!--里面小心-->
   <div class="heart heart2"></div>
   
</body>
<script type="text/javascript">

</script>
</html>