CSS特效集锦(9款 , 总有一款是你喜欢的)

主要是: 穿越时空特效, 图片放大镜, 3D相册, 立方体相册, 昼夜更替特效, 飘雪, 七彩雨, 签名生成器, 水波纹动画等

代码部分

 <section>

      <div class="content">

        <h2>Live</h2>

        <h2>Live</h2>

      </div>

 </section>

 <style>

      @import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

      * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

        font-family: "Poppins", sans-serif;

      }

      body {

        display: flex;

        background: #000;

        min-height: 100vh;

        align-items: center;

        justify-content: center;

      }

      .content {

        position: relative;

      }

      .content h2 {

        color: #fff;

        font-size: 8em;

        position: absolute;

        transform: translate(-50%, -50%);

      }

      .content h2:nth-child(1) {

        color: transparent;

        -webkit-text-stroke: 2px #03a9f4;

      }

      .content h2:nth-child(2) {

        color: #03a9f4;

        animation: animate 4s ease-in-out infinite;

      }

      @keyframes animate {

        0%,

        100% {

          clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);

        }

 

        50% {

          clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);

        }

      }

      .page-footer {

        position: fixed;

        right: 35px;

        bottom: 20px;

        display: flex;

        align-items: center;

        padding: 5px;

        color: black;

        background: rgba(255, 255, 255, 0.65);

      }

      .page-footer a {

        display: flex;

        margin-left: 4px;

      }

      .touxiang {

        bottom: 0px;

        width: 30px;

        height: 30px;

      }

 

 </style>