html特效代码

萧寂173

已于 2022-11-12 17:59:26 修改

阅读量506

点赞数 1

分类专栏： js 文章标签： html css css3

于 2022-10-26 09:32:14 首次发布

本文链接：https://blog.csdn.net/weixin_68658847/article/details/127526334

版权

js 专栏收录该内容

56 篇文章 4 订阅

订阅专栏

满屏爱心

<html>

<head>
    <meta charset="utf-8" name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: black;
        }
        span {
            display: block;
            position: absolute;
            font-size: 100px;
            animation: xin 1s alternate infinite;
        }
        @keyframes xin {
            0% {
                transform: scale(1)
            }
            100% {
                transform: scale(1.2)
            }
        }
        h1 {
            color: white;
            text-align: center;
            margin-top: 50%;
            text-shadow: 2px 2px 20px rgba(0, 255, 255);
        }
    </style>
</head>

<body>
    <h1>这里写字</h1>
</body>

<script>
    //创建50个心
    for (let i = 0; i < 50; i++) {
        let xin = document.createElement("span")
        xin.innerHTML = "❤️"
        xin.style.left = Math.round(Math.random() * 110) + "%"
        xin.style.fontSize = Math.round(Math.random() * 50) + "px"
        document.body.insertAdjacentElement("afterbegin", xin)
        //定时
        let top = Math.round(Math.random() * 100) - 100
        let i = top
        setInterval(function () {
            i += 0.5
            xin.style.top = i + "%"
            if (i >= 100) {
                i = top
            }
        }, 20)
    }
</script>
</html>

文字接连拼接出，后拼爱心(建议做个好看的链接，点击链接进入此页面)


<!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>
        div {
            width: 540px;
            height: 960px;
            position: relative;
            overflow: hidden;
        }

        p {
            width: 270px;
            height: 580px;
            background-image: url(这里插入背景图的图片路径);
            background-size: 270px 580px;
            background-repeat: no-repeat;
            margin: 0 auto;
        }
        nav {
            width: 100%;
            margin-top: 50px;
            font-size: 30px;
            height: 300px;
            overflow: hidden;
        }

        nav::after {
            content: "❤";
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
        <nav></nav>
    </div>

    <script>
        let nav = document.querySelector("nav")
        let str = '小傻瓜，我可以错过黄昏的末班车，可以错过四月的樱花季，可以错过凛冽的太阳雨，可以错过很多很多，但唯独不能错过你。'
        // p.innerText = str[0]
        let i = 0
        setInterval(function () {
            if (i >= str.length) {
                return
            }
            nav.innerText += str[i]
            i += 1
        }, 200)
    </script>
</body>
</html>

3D代码相册

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>3D代码相册</title>
    <embed src="这里放上MP3格式的背景音乐路径" hidden="true" autostart="true" loop="true">
    <link rel="stylesheet" href="css/spin.css" />
    <style>
        html {
            background: transparent;
            /*背景颜色*/
            height: 100%;
        }
        /*外层容器样式*/
        .wrap {
            position: relative;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 200px;
            height: 200px;
            margin: auto;
        }
        /*包裹所有容器样式*/
        .cube {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-80deg);
            animation: rotate 20s infinite;
            /*匀速*/
            animation-timing-function: linear;
        }
        @keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            transition: all .4s;
        }
        /*定义所有图片样式*/
        .pic {
            width: 200px;
            height: 200px;
        }
        .cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }
        .cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }
        .cube .out_left {
            transform: rotateY(90deg) translateZ(100px);
        }
        .cube .out_right {
            transform: rotateY(-90deg) translateZ(100px);
        }
        .cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }
        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
        /*内层小正方体样式*/
        .cube span {
            display: bloack;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
        .cube .in_pic {
            width: 100px;
            height: 100px;
        }
        .cube .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }
        .cube .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }
        .cube .in_left {
            transform: rotateY(90deg) translateZ(50px);
        }
        .cube .in_right {
            transform: rotateY(-90deg) translateZ(50px);
        }
        .cube .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }
        .cube .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }
        /*鼠标移入后样式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }
        .cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);
        }
        .cube:hover .out_left {
            transform: rotateY(90deg) translateZ(200px);
        }
        .cube:hover .out_right {
            transform: rotateY(-90deg) translateZ(200px);
        }
        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }
        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>
</head>

<body>
    <!--/*外层容器*/-->
    <div class="wrap">
        <!--/*包裹所有元素的容器*/-->
        <div class="cube">
            <!--前图 -->
            <div class="out_front">
                <img src="这里插入图片" class="pic" />
            </div>
            <!--后图 -->
            <div class="out_back">
                <img src="这里插入图片" class="pic" />
            </div>
            <!--左图 -->
            <div class="out_left">
                <img src="这里插入图片" class="pic" />
            </div>
            <div class="out_right">
                <img src="这里插入图片" class="pic" />
            </div>
            <div class="out_top">
                <img src="这里插入图片" class="pic" />
            </div>
            <div class="out_bottom">
                <img src="这里插入图片" class="pic" />
            </div>
            <!--小正方体 -->
            <span class="in_front">
                <img src="这里插入图片" class="in_pic" />
            </span>
            <span class="in_back">
                <img src="这里插入图片" class="in_pic" />
            </span>
            <span class="in_left">
                <img src="这里插入图片" class="in_pic" />
            </span>
            <span class="in_right">
                <img src="这里插入图片" class="in_pic" />
            </span>
            <span class="in_top">
                <img src="这里插入图片" class="in_pic" />
            </span>
            <span class="in_bottom">
                <img src="这里插入图片" class="in_pic" />
            </span>
        </div>
    </div>
</body>

</html>

跳动的爱心

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>💗</title>
 
    <style>
      html,
      body {
        height: 100%;
        padding: 0;
        margin: 0;
        background: #000;
      }
      canvas {
        position: absolute;
        width: 100%;
        height: 100%;
        animation: anim 1.5s ease-in-out infinite;
        -webkit-animation: anim 1.5s ease-in-out infinite;
        -o-animation: anim 1.5s ease-in-out infinite;
        -moz-animation: anim 1.5s ease-in-out infinite;
      }
      #name {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-top: -20px;
        font-size: 46px;
        color: #ea80b0;
      }
      @keyframes anim {
        0% {
          transform: scale(0.8);
        }
        25% {
          transform: scale(0.7);
        }
        50% {
          transform: scale(1);
        }
        75% {
          transform: scale(0.7);
        }
        100% {
          transform: scale(0.8);
        }
      }
      @-webkit-keyframes anim {
        0% {
          -webkit-transform: scale(0.8);
        }
        25% {
          -webkit-transform: scale(0.7);
        }
        50% {
          -webkit-transform: scale(1);
        }
        75% {
          -webkit-transform: scale(0.7);
        }
        100% {
          -webkit-transform: scale(0.8);
        }
      }
      @-o-keyframes anim {
        0% {
          -o-transform: scale(0.8);
        }
        25% {
          -o-transform: scale(0.7);
        }
        50% {
          -o-transform: scale(1);
        }
        75% {
          -o-transform: scale(0.7);
        }
        100% {
          -o-transform: scale(0.8);
        }
      }
      @-moz-keyframes anim {
        0% {
          -moz-transform: scale(0.8);
        }
        25% {
          -moz-transform: scale(0.7);
        }
        50% {
          -moz-transform: scale(1);
        }
        75% {
          -moz-transform: scale(0.7);
        }
        100% {
          -moz-transform: scale(0.8);
        }
      }
    </style>
  </head>
  <body>
    <canvas id="pinkboard"></canvas>
    <!-- 在下面加名字 -->
     <div id="name" style="color: blue;">CSDN</div> 
 
    <script>
      var settings = {
        particles: {
          length: 500, 
          duration: 2, 
          velocity: 100, 
          effect: -0.75,
          size: 30, 
        },
      };
      (function () {
        var b = 0;
        var c = ["ms", "moz", "webkit", "o"];
        for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {
          window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];
          window.cancelAnimationFrame =
            window[c[a] + "CancelAnimationFrame"] ||
            window[c[a] + "CancelRequestAnimationFrame"];
        }
        if (!window.requestAnimationFrame) {
          window.requestAnimationFrame = function (h, e) {
            var d = new Date().getTime();
            var f = Math.max(0, 16 - (d - b));
            var g = window.setTimeout(function () {
              h(d + f);
            }, f);
            b = d + f;
            return g;
          };
        }
        if (!window.cancelAnimationFrame) {
          window.cancelAnimationFrame = function (d) {
            clearTimeout(d);
          };
        }
      })();
      var Point = (function () {
        function Point(x, y) {
          this.x = typeof x !== "undefined" ? x : 0;
          this.y = typeof y !== "undefined" ? y : 0;
        }
        Point.prototype.clone = function () {
          return new Point(this.x, this.y);
        };
        Point.prototype.length = function (length) {
          if (typeof length == "undefined")
            return Math.sqrt(this.x * this.x + this.y * this.y);
          this.normalize();
          this.x *= length;
          this.y *= length;
          return this;
        };
        Point.prototype.normalize = function () {
          var length = this.length();
          this.x /= length;
          this.y /= length;
          return this;
        };
        return Point;
      })();
      var Particle = (function () {
        function Particle() {
          this.position = new Point();
          this.velocity = new Point();
          this.acceleration = new Point();
          this.age = 0;
        }
        Particle.prototype.initialize = function (x, y, dx, dy) {
          this.position.x = x;
          this.position.y = y;
          this.velocity.x = dx;
          this.velocity.y = dy;
          this.acceleration.x = dx * settings.particles.effect;
          this.acceleration.y = dy * settings.particles.effect;
          this.age = 0;
        };
        Particle.prototype.update = function (deltaTime) {
          this.position.x += this.velocity.x * deltaTime;
          this.position.y += this.velocity.y * deltaTime;
          this.velocity.x += this.acceleration.x * deltaTime;
          this.velocity.y += this.acceleration.y * deltaTime;
          this.age += deltaTime;
        };
        Particle.prototype.draw = function (context, image) {
          function ease(t) {
            return --t * t * t + 1;
          }
          var size = image.width * ease(this.age / settings.particles.duration);
          context.globalAlpha = 1 - this.age / settings.particles.duration;
          context.drawImage(
            image,
            this.position.x - size / 2,
            this.position.y - size / 2,
            size,
            size
          );
        };
        return Particle;
      })();
      var ParticlePool = (function () {
        var particles,
          firstActive = 0,
          firstFree = 0,
          duration = settings.particles.duration;
 
        function ParticlePool(length) {
          particles = new Array(length);
          for (var i = 0; i < particles.length; i++)
            particles[i] = new Particle();
        }
        ParticlePool.prototype.add = function (x, y, dx, dy) {
          particles[firstFree].initialize(x, y, dx, dy);
          firstFree++;
          if (firstFree == particles.length) firstFree = 0;
          if (firstActive == firstFree) firstActive++;
          if (firstActive == particles.length) firstActive = 0;
        };
        ParticlePool.prototype.update = function (deltaTime) {
          var i;
          if (firstActive < firstFree) {
            for (i = firstActive; i < firstFree; i++)
              particles[i].update(deltaTime);
          }
          if (firstFree < firstActive) {
            for (i = firstActive; i < particles.length; i++)
              particles[i].update(deltaTime);
            for (i = 0; i < firstFree; i++) particles[i].update(deltaTime);
          }
          while (
            particles[firstActive].age >= duration &&
            firstActive != firstFree
          ) {
            firstActive++;
            if (firstActive == particles.length) firstActive = 0;
          }
        };
        ParticlePool.prototype.draw = function (context, image) {
          if (firstActive < firstFree) {
            for (i = firstActive; i < firstFree; i++)
              particles[i].draw(context, image);
          }
          if (firstFree < firstActive) {
            for (i = firstActive; i < particles.length; i++)
              particles[i].draw(context, image);
            for (i = 0; i < firstFree; i++) particles[i].draw(context, image);
          }
        };
        return ParticlePool;
      })();
      (function (canvas) {
        var context = canvas.getContext("2d"),
          particles = new ParticlePool(settings.particles.length),
          particleRate =
            settings.particles.length / settings.particles.duration, 
          time;
        function pointOnHeart(t) {
          return new Point(
            160 * Math.pow(Math.sin(t), 3),
            130 * Math.cos(t) -
              50 * Math.cos(2 * t) -
              20 * Math.cos(3 * t) -
              10 * Math.cos(4 * t) +
              25
          );
        }
        var image = (function () {
          var canvas = document.createElement("canvas"),
            context = canvas.getContext("2d");
          canvas.width = settings.particles.size;
          canvas.height = settings.particles.size;
          function to(t) {
            var point = pointOnHeart(t);
            point.x =
              settings.particles.size / 2 +
              (point.x * settings.particles.size) / 350;
            point.y =
              settings.particles.size / 2 -
              (point.y * settings.particles.size) / 350;
            return point;
          }
          context.beginPath();
          var t = -Math.PI;
          var point = to(t);
          context.moveTo(point.x, point.y);
          while (t < Math.PI) {
            t += 0.01;
            point = to(t);
            context.lineTo(point.x, point.y);
          }
          context.closePath();
          context.fillStyle = "#ea80b0";
          context.fill();
          var image = new Image();
          image.src = canvas.toDataURL();
          return image;
        })();
        function render() {
          requestAnimationFrame(render);
          var newTime = new Date().getTime() / 1000,
            deltaTime = newTime - (time || newTime);
          time = newTime;
          context.clearRect(0, 0, canvas.width, canvas.height);
          var amount = particleRate * deltaTime;
          for (var i = 0; i < amount; i++) {
            var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
            var dir = pos.clone().length(settings.particles.velocity);
            particles.add(
              canvas.width / 2 + pos.x,
              canvas.height / 2 - pos.y,
              dir.x,
              -dir.y
            );
          }
          particles.update(deltaTime);
          particles.draw(context, image);
        }
        function onResize() {
          canvas.width = canvas.clientWidth;
          canvas.height = canvas.clientHeight;
        }
        window.onresize = onResize;
        setTimeout(function () {
          onResize();
          render();
        }, 10);
      })(document.getElementById("pinkboard"));
 
    </script>
  </body>
</html>

指针时钟

<!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>
</head>
<body>
    <style id="style">
        ul{
            list-style: none;
        }
        #circle{
            width: 200px;
            height: 200px;
            border-radius: 100px;
            border: 1px solid black;
        }
        #kedu li{
            width: 1px;
            height: 6px;
            border-radius: 10px;
            background-color: black;
            transform-origin: center 101px;/*设置li标签的旋转中心和旋转半径。*/
            position: absolute;
            left: 109px;
            top: 9px;
        }
        #kedu li:nth-of-type(5n+1){
            height: 12px;
            width: 2px;
        }

        /* 秒针的绘制，用transform把div绘制成线条，后面的指针都是在这样。 */
        #second{
            width: 2px;
            height: 80px;
            background-color: red;
            transform: scaleY(1);
            position: absolute;
            left: 108px;
            top: 30px;
            transform-origin: bottom; /*设置它们的旋转中心，transform-origin: bottom；意思是以它们的底部为中心旋转。*/
        }
        #min{
            width: 2px;
            height: 65px;
            background-color: gray;
            transform: scaleY(1);
            position: absolute;
            left: 108px;
            top: 45px;
            transform-origin: bottom;
        }
        #hour{
            width: 2px;
            height: 50px;
            background-color: black;
            transform: scaleY(1);
            position: absolute;
            left: 108px;
            top: 60px;
            transform-origin: bottom;
        }
        #p12{
            position: absolute;
            left: 100px;
            top: 0px;
        }
        #p3{
            position: absolute;
            left: 190px;
            top: 84px;
        }
        #p6{
            position: absolute;
            left: 105px;
            top: 165px;
        }
        #p9{
            position: absolute;
            left: 20px;
            top: 82px;
        }
    </style>
    <div id="circle">
        <ul id="kedu"></ul>
    </div>
    <div id="second"></div><!--绘制秒针-->
    <div id="min"></div><!--绘制分针-->
    <div id="hour"></div><!--绘制时针-->
    <p id="p12">12</p>
    <p id="p3">3</p>
    <p id="p6">6</p>
    <p id="p9">9</p>
    <script>
        function time(){
            let s=document.getElementById("second");//获取到时分秒的三个指针，后面用来动态让它们旋转起来。
            let m=document.getElementById("min");
            let h=document.getElementById("hour");

            //获取时间。
            let date=new Date();
            let snum=date.getSeconds();//获取现在是多少秒。
            let mnum=date.getMinutes()+snum/60;//获取现在是多少分，不能忘记加上 秒数/60。
            let hnum=date.getHours()+mnum/60; //获取现在是多少时，不能忘记加上 分钟数/60。
            
            s.style.transform=`rotate(${snum*6}deg)`;//设置的trasnform就可以让它们旋转起来，秒针时一秒旋转6度。
            m.style.transform=`rotate(${mnum*6}deg)`//分针也是一分钟旋转6度。
            h.style.transform=`rotate(${hnum*30}deg)`//这里时小时，一小时旋转30度，所以*30.
        }
        setInterval(time,100)//用计时器每100ms运行这个time函数。
    </script>
</body>
</html>

小球碰撞

<!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>case01</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 800px;
            height: 300px;
            position: relative;
            margin: 0 auto;
            border: 1px solid black;
        }

        .ball {
            width: 40px;
            height: 40px;
            background-color: pink;
            border-radius: 50%;
            position: absolute;
            top: 130px;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="ball"></div>
    </div>
</body>
<script>

    function rand(min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }


    var dBall = document.querySelector(".ball");
    var timer = null;
    var vx = 0;
    var vy = 0;
    (function () {
        vx = rand(3, 10);
        vy = rand(3, 10);

        dBall.style.left = rand(0, 760) + 'px';
        dBall.style.top = rand(0, 260) + 'px';
    })()
    timer = setInterval(function () {

        var l = dBall.offsetLeft + vx;
        var t = dBall.offsetTop + vy;

        if (t > 260) {
            t = 260;
            vy = -vy;
        }
        else if (t < 0) {
            t = 0;
            vy = -vy;
        }
        if (l > 760) {
            l = 760
            vx = -vx;
        }
        else if (l < 0) {
            l = 0;
            vx = -vx;
        }
        dBall.style.left = l + 'px';
        dBall.style.top = t + 'px';
    }, 30)


</script>

</html>