css实现液态液体融合文字倒计时动画效果代码-html代码-BFW代码库

css实现液态液体融合文字倒计时动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现液态液体融合文字倒计时动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          background: linear-gradient(90deg, #53a0fd, #01c2f3);
        }
        
        #wrap {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 360px;
          height: 360px;
          filter: url("#filter");
        }
        
        .c,
        .o,
        .u,
        .n,
        .t {
          width: 50px;
          height: 50px;
          position: absolute;
          top: calc(50% - 25px);
          left: calc(50% - 25px);
          background: #fff;
          border-radius: 20px;
          content: "";
          transform: rotate(360deg);
          transition: all 0.5s cubic-bezier(0.95, 0.01, 0, 1);
          box-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
        }
        
        .c {
          transition-delay: 0.05s;
        }
        
        .o {
          transition-delay: 0.1s;
        }
        
        .u {
          transition-delay: 0.15s;
        }
        
        .n {
          transition-delay: 0.2s;
        }
        
        .t {
          transition-delay: 0.25s;
        }
        
        /*--------------------
        Nine
        --------------------*/
        .wrap-9 .c {
          width: 180px;
          height: 60px;
          left: 90px;
          top: 30px;
        }
        .wrap-9 .o {
          width: 60px;
          height: 240px;
          left: 240px;
          top: 60px;
          transform: rotate(180deg);
        }
        .wrap-9 .u {
          width: 150px;
          height: 60px;
          left: 120px;
          top: 270px;
          transform: rotate(180deg);
        }
        .wrap-9 .n {
          width: 180px;
          height: 60px;
          left: 90px;
          top: 150px;
        }
        .wrap-9 .t {
          width: 60px;
          height: 120px;
          left: 60px;
          top: 60px;
          transform: rotate(180deg);
        }
        
        /*--------------------
        Eight
        --------------------*/
        .wrap-8 .c {
          width: 180px;
          height: 60px;
          left: 90px;
          top: 150px;
          transform: rotate(180deg);
        }
        .wrap-8 .o {
          width: 60px;
          height: 240px;
          left: 60px;
          top: 60px;
        }
        .wrap-8 .u {
          width: 180px;
          height: 60px;
          left: 90px;
          top: 270px;
          transform: rotate(180deg);
        }
        .wrap-8 .n {
          width: 180px;
          height: 60px;
          left: 90px;
          top: 30px;
        }
        .wrap-8 .t {
          width: 60px;
          height: 240px;
          left: 240px;
          top: 60px;
          transform: rotate(180deg);
        }
        
        /*--------------------
        Seven
        --------------------*/
        .wrap-7 .c {
          width: 140px;
          height: 60px;
          left: 190px;
          top: 70px;
          transform: rotate(-65deg);
        }
        .wrap-7 .o {
          width: 190px;
          height: 60px;
          left: 100px;
          top: 210px;
          transform: rotate(-65deg);
        }
        .wrap-7 .u {
          width: 0;
          height: 0;
          left: 90px;
          top: 270px;
        }
        .wrap-7 .n {
          width: 0;
          height: 0;
          left: 150px;
          top: 150px;
        }
        .wrap-7 .t {
          width: 180px;
          height: 60px;
          left: 90px;
          top: 30px;
        }
        
        /*--------------------
        Six
        --------------------*/
        .wrap-6 .c {
          width: 180px;
          height: 60px;
          left: 90px;
          top: 150px;
          transform: rotate(180deg);
        }
        .wrap-6 .o {
          width: 180px;
          height: 60px;
          left: 90px;
          top: 270px;
          transform: rotate(180deg);
        }
        .wrap-6 .u {
          width: 60px;
          height: 240px;
          left: 60px;
          top: 60px;
        }
        .wrap-6 .n {
          width: 60px;
          height: 120px;
          left: 240px;
          top: 180px;
          transform: rotate(180deg);
        }
        .wrap-6 .t {
          width: 180px;
          height: 60px;
          left: 90px;
          top: 30px;
        }
        
        /*--------------------
        Five
        --------------------*/
        .wrap-5 .c {
          width: 210px;
          height: 60px;
          left: 60px;
          top: 30px;
          transform: rotate(180deg);
        }
        .wrap-5 .o {
          width: 210px;
          height: 60px;
          left: 60px;
          top: 270px;
          transform: rotate(180deg);
        }
        .wrap-5 .u {
          width: 60px;
          height: 120px;
          left: 240px;
          top: 180px;
          transform: rotate(180deg);
        }
        .wrap-5 .n {
          width: 60px;
          height: 140px;
          left: 60px;
          top: 60px;
        }
        .wrap-5 .t {
          width: 180px;
          height: 60px;
          left: 90px;
          top: 150px;
        }
        
        /*--------------------
        Four
        --------------------*/
        .wrap-4 .c {
          width: 60px;
          height: 303px;
          left: 210px;
          top: 30px;
          transform: rotate(1.........完整代码请登录后点击上方下载按钮下载查看