伪元素实现CSS动画效果

用户9095251179428954916
1,666 阅读17分钟

#多云天气图案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- cloudy 阴影实现多云天气图案 -->
<section id="cloudy" class="code-wrap cf">
    <div class="css-live-wrap">
      <!-- <summary>多云（cloudy）（单标签实现）</summary> -->
      <!-- <summary>利用线性渐变、阴影、缩放实现</summary> -->
      <hgroup class="cloudy">
        <!-- <h1>.cloudy</h1> -->
      </hgroup>
    </div>
    <style class="code" contenteditable=true>
      .cloudy{
        position: absolute;
        top: 50%;left: 50%;
        width:200px;height:260px;
        transform: translate(-50%, -50%);
        text-align:center;
        font-size:200%;
        color:#fff;
        background:#2EB5E5;
        border-radius:5px;
      }
      .cloudy:before {
        content: "";
        text-indent:23px;
        font-size:22px;
        line-height:40px;
        color:#333;
        position: absolute;
        height: 50px;width: 50px;
        background: #FFFFFF;
        left:30%;
        top:45%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        box-shadow:
          #FFFFFF 65px -15px 0 -5px,
          #FFFFFF 25px -25px,
          #FFFFFF 30px 10px,
          #FFFFFF 60px 15px 0 -10px,
          #FFFFFF 85px 5px 0 -5px,
          #C8C8C8 35px -35px,
          #C8C8C8 66px -27px 0 -5px,
          #C8C8C8 91px -10px 0 -8px;
        animation: cloudy 5s ease-in-out infinite;
      }
      .cloudy:after{
        content:"";
        position: absolute;
        top: 80%;left: 50%;
        height: 15px;
        width: 120px;
        background:rgba(0,0,0,.5);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: cloudy_shadow 5s ease-in-out infinite;
      }
      @keyframes cloudy {
      50%{
        transform: translate(-50%, -70%);
      }
      100%{
        transform: translate(-50%, -50%);
      }
    }
    @keyframes cloudy_shadow {
      50%{
        transform: translate(-50%, -50%) scale(0.8);
        background:rgba(0,0,0,.2);
      }
      100%{
        transform: translate(-50%, -50%) scale(1);
          background:rgba(0,0,0,.5);
      }
    }
    </style>
  </section>
<body>
    
</body>
</html>

#混合效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- filter-mix 利用滤镜实现混合效果 -->
<section id="filter-mix" class="code-wrap cf">
    <div class="css-live-wrap">
      <!-- <summary>利用滤镜实现混合效果（单标签实现）</summary> -->
      <!-- <summary>利用 fliter:blur() 、filter:contrast() 实现</summary> -->
      <!-- <summary>看不到效果请用 chrome，请用 chrome！</summary> -->
      <hgroup class="filter-mix">
      </hgroup>
    </div>
    <style class="code" contenteditable=true>
      .filter-mix{
        position: absolute;
        top: 50%;left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;height: 200px;
        -webkit-filter:contrast(20);
        background:#fff;
      }
      .filter-mix::before{
        content:"";
        position: absolute;
        width:120px;
        height:120px;
        border-radius: 50%;
        background:#333;
        top:40px;
        left:0px;
        z-index:2;
        -webkit-filter:blur(6px);
        box-sizing:border-box;
        animation:filterBallMove 10s ease-out infinite;
        -webkit-animation:filterBallMove 10s ease-out infinite;
      }
      .filter-mix::after{
        content:"";
        position: absolute;
        width:80px;
        height:80px;
        border-radius: 50%;
        background:#3F51B5;
        top:60px;
        right:0px;
        z-index:2;
        -webkit-filter:blur(6px);
        animation:filterBallMove2 10s ease-out infinite;
        -webkit-animation:filterBallMove2 10s ease-out infinite;
      }
       @keyframes filterBallMove{
        50%{
          left:200px;
        }
      }
      @-webkit-keyframes filterBallMove{
        50%{
          left:200px;
        }
      }
      @keyframes filterBallMove2{
        50%{
          right:200px;
        }
      }
      @-webkit-keyframes filterBallMove2{
        50%{
          right:200px;
        }
      }
    </style>
  </section>
<body>
    
</body>
</html>

#雷电天气图案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- thunder 阴影、border实现雷电天气图案 -->
<section id="thunder" class="code-wrap cf">
    <div class="css-live-wrap">
      <!-- <summary>雷电（thunder）</summary> -->
      <!-- <summary>利用阴影、border实现</summary> -->
      <hgroup class="thunder-container">
        <!-- <h1>.thunder</h1> -->
        <div class="thunder"></div>
      </hgroup>
    </div>
    <style class="code" contenteditable=true>
      .thunder-container {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 260px;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 200%;
        color: #fff;
        background: #444;
        border-radius: 5px;
      }
      .thunder {
        color: #333;
        position: absolute;
        height: 50px;
        width: 50px;
        top: 40%;
        left: 30%;
        background: #222;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        box-shadow:
          #222 65px -15px 0 -5px,
          #222 25px -25px,
          #222 30px 10px,
          #222 60px 15px 0 -10px,
          #222 85px 5px 0 -5px;
        animation: cloudy 5s ease-in-out infinite;
      }
      .thunder:before {
        content: "";
        position: absolute;
        top: 60px;
        left: 60px;
        border-left: 0px solid transparent;
        border-right: 8px solid transparent;
        border-top: 38px solid yellow;
        box-shadow: yellow -7px -32px;
        transform:rotate(30deg);
        transform-origin:center -50px;
        animation:stormy_thunder 2s steps(1, end) infinite;;
      }
      .thunder:after {
        content: "";
        position: absolute;
        top: 120px;
        left: 64px;
        height: 15px;
        width: 120px;
        background: rgba(0, 0, 0, .5);
        border-radius: 50%;
        z-index:-1;
        transform: translate(-50%, -50%);
        animation: cloudy_shadow 5s ease-in-out infinite;
      }
      @keyframes cloudy {
        50% {
          transform: translate(-50%, -30px);
        }
      }
      @keyframes cloudy_shadow {
        50% {
          transform: translate(-50%, 0) scale(0.8);
          background: rgba(0, 0, 0, .2);
        }
      }
      @keyframes stormy_thunder{
        0%  {  transform: rotate(30deg); opacity:1; }
        5%  {  transform: rotate(-34deg); opacity:1; }
        10% {  transform: rotate(0deg); opacity:1; }
        15% {  transform: rotate(-34deg); opacity:0; }
      }
    </style>
  </section>
<body>
    
</body>
</html>

#霓虹氖灯文字效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- 实现霓虹氖灯文字效果 -->
<section id="pink" class="code-wrap cf">
  <div class="css-live-wrap blackbg">
      <!-- <summary class="mix-diff">实现霓虹氖灯文字效果</summary> -->
      <!-- <summary class="mix-diff">借助了box-shadow</summary> -->
      <p class="pink">Box-Shadow</p>
  </div>
  <style class="code" contenteditable=true>
  @import url("https://fonts.googleapis.com/css?family=Lobster");
  .pink {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: "Lobster";
          text-align: center;
          font-size: 10vmin;
          line-height: 20vmin;
          color: #fff;
          cursor: pointer;
          -webkit-filter: brightness(110%);
          filter: brightness(110%);
          text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #e91e63, 0 0 35px #e91e63, 0 0 40px #e91e63, 0 0 50px #e91e63, 0 0 75px #e91e63;
          -webkit-animation: pink 1.5s ease-in-out infinite alternate;
          animation: pink 1.5s ease-in-out infinite alternate;
      }
      @-webkit-keyframes pink {
          to {
              text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #e91e63, 0 0 70px #e91e63, 0 0 80px #e91e63, 0 0 100px #e91e63, 0 0 150px #e91e63;
          }
      }

      @keyframes pink {
          to {
              text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #e91e63, 0 0 70px #e91e63, 0 0 80px #e91e63, 0 0 100px #e91e63, 0 0 150px #e91e63;
          }
      }
  </style>
</section>
<body>
</body>

</html>

#水波效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- 单标签实现水波效果 -->
<section id="css-water" class="code-wrap cf">
    <!-- <summary class="mix-diff">单标签实现水波效果</summary> -->
    <!-- <summary class="mix-diff">借助了滤镜 blur, contrast</summary> -->
    <!-- <summary class="mix-diff">借助了混合模式background-blend-mode: difference</summary> -->
    <div class="css-live-wrap blackfilter">
        <div class="css-water"></div>
    </div>
    <style class="code" contenteditable=true>
    .css-water {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(51vw, #ddd 0%, #666 10%, #fff, #000, #999) 27vw 95vh, radial-gradient(45vw, #ddd 0%, #666 10%, #fff, #000, #999) 59vw 78vh, radial-gradient(57vw, #ddd 0%, #666 10%, #fff, #000, #999) 85vw 62vh, radial-gradient(83vw, #ddd 0%, #666 10%, #fff, #000, #999) 91vw 64vh, radial-gradient(54vw, #ddd 0%, #666 10%, #fff, #000, #999) 52vw 13vh, radial-gradient(62vw, #ddd 0%, #666 10%, #fff, #000, #999) 4vw 34vh, radial-gradient(71vw, #ddd 0%, #666 10%, #fff, #000, #999) 8vw 81vh, radial-gradient(81vw, #ddd 0%, #666 10%, #fff, #000, #999) 28vw 80vh, radial-gradient(79vw, #ddd 0%, #666 10%, #fff, #000, #999) 82vw 93vh;
            -webkit-animation: waveMove 10s infinite alternate;
            animation: waveMove 10s infinite alternate;
            background-blend-mode: difference;
            -webkit-filter: blur(1px) contrast(5);
            }
            .css-water::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: #03a9f4;
            mix-blend-mode: color-burn;
        }
        @-webkit-keyframes waveMove {
            100% {
                background-position: -11vw -41vh, 33vw 77vh, 5vw -10vh, -4vw 2vh, 3vw -30vh, -33vw -31vh, -33vw -46vh, 34vw -39vh, 78vw 43vh;
            }
        }

        @keyframes waveMove {
            100% {
                background-position: -11vw -41vh, 33vw 77vh, 5vw -10vh, -4vw 2vh, 3vw -30vh, -33vw -31vh, -33vw -46vh, 34vw -39vh, 78vw 43vh;
            }
        }
    </style>
</section>

<body>

</body>

</html>

#雪天天气图案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- snowy 阴影实现雪天天气图案 -->
<section id="snowy" class="code-wrap cf">
    <div class="css-live-wrap">
      <!-- <summary>雪（snowy）</summary> -->
      <!-- <summary>利用阴影实现</summary> -->
      <hgroup class="snowy-container">
        <!-- <h1>.snowy</h1> -->
        <div class="snowy"></div>
      </hgroup>
    </div>
    <style class="code" contenteditable=true>
    .snowy-container {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 260px;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 200%;
        color: #fff;
        background: #607D8B;
        border-radius: 5px;
      }
      .snowy {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius:50%;
        top: 30%;
        left: 50%;
        background: #fff;
        border-radius: 50%;
        animation: snowy_rain 2s infinite linear;
      }
      .snowy:before {
        content: "";
        color: #333;
        position: absolute;
        height: 50px;
        width: 50px;
        top: 30px;
        left: -40px;
        background: #eee;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        box-shadow:
          #eee 65px -15px 0 -5px,
          #eee 25px -25px,
          #eee 30px 10px,
          #eee 60px 15px 0 -10px,
          #eee 85px 5px 0 -5px;
        animation: cloudy 5s ease-in-out infinite;
      }
      .snowy:after {
        content: "";
        position: absolute;
        top: 120px;
        left: 50%;
        height: 15px;
        width: 120px;
        background: rgba(0, 0, 0, .5);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: cloudy_shadow 5s ease-in-out infinite;
      }
       @keyframes cloudy {
        50% {
          transform: translate(-50%, -70%);
        }
        100% {
          transform: translate(-50%, -50%);
        }
      }
      @keyframes cloudy_shadow {
        50% {
          transform: translate(-50%, -50%) scale(0.8);
          background: rgba(0, 0, 0, .2);
        }
        100% {
          transform: translate(-50%, -50%) scale(1);
          background: rgba(0, 0, 0, .5);
        }
      }
      @keyframes snowy_rain {
        0% {
          box-shadow:
            rgba(255, 255, 255, 0) -10px 30px,
            rgba(255, 255, 255, 0) 40px 40px,
            rgba(255, 255, 255, .6) -50px 75px,
            rgba(255, 255, 255, .6) 55px 50px,
            rgba(255, 255, 255, .6) -18px 100px,
            rgba(255, 255, 255, .6) 12px 95px,
            rgba(255, 255, 255, .6) -31px 45px,
            rgba(255, 255, 255, .6) 30px 35px;
        }
        25% {
          box-shadow:
            rgba(255, 255, 255, .6) -10px 45px,
            rgba(255, 255, 255, .6) 40px 60px,
            rgba(255, 255, 255, .6) -50px 90px,
            rgba(255, 255, 255, .6) 55px 65px,
            rgba(255, 255, 255, 0) -18px 120px,
            rgba(255, 255, 255, 0) 12px 120px,
            rgba(255, 255, 255, .6) -31px 70px,
            rgba(255, 255, 255, .6) 30px 60px;
        }
        26% {
          box-shadow:
            rgba(255, 255, 255, .6) -10px 45px,
            rgba(255, 255, 255, .6) 40px 60px,
            rgba(255, 255, 255, .6) -50px 90px,
            rgba(255, 255, 255, .6) 55px 65px,
            rgba(255, 255, 255, 0) -18px 40px,
            rgba(255, 255, 255, 0) 12px 20px,
            rgba(255, 255, 255, .6) -31px 70px,
            rgba(255, 255, 255, .6) 30px 60px;
        }
        50% {
          box-shadow:
            rgba(255, 255, 255, .6) -10px 70px,
            rgba(255, 255, 255, .6) 40px 80px,
            rgba(255, 255, 255, 0) -50px 100px,
            rgba(255, 255, 255, .6) 55px 80px,
            rgba(255, 255, 255, .6) -18px 60px,
            rgba(255, 255, 255, .6) 12px 45px,
            rgba(255, 255, 255, .6) -31px 95px,
            rgba(255, 255, 255, .6) 30px 85px;
        }
        76% {
          box-shadow:
            rgba(255, 255, 255, .6) -10px 95px,
            rgba(255, 255, 255, .6) 40px 100px,
            rgba(255, 255, 255, .6) -50px 60px,
            rgba(255, 255, 255, 0) 55px 35px,
            rgba(255, 255, 255, .6) -18px 80px,
            rgba(255, 255, 255, .6) 12px 70px,
            rgba(255, 255, 255, 0) -31px 25px,
            rgba(255, 255, 255, 0) 30px 15px;
        }
        100% {
          box-shadow:
            rgba(255, 255, 255, 0) -10px 120px,
            rgba(255, 255, 255, 0) 40px 120px,
            rgba(255, 255, 255, .6) -50px 75px,
            rgba(255, 255, 255, .6) 55px 50px,
            rgba(255, 255, 255, .6) -18px 100px,
            rgba(255, 255, 255, .6) 12px 95px,
            rgba(255, 255, 255, .6) -31px 45px,
            rgba(255, 255, 255, .6) 30px 35px;
        }
      }
       </style>
  </section>
<body>
    
</body>
</html>

#多云天气图案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 <!-- cloudy 阴影实现多云天气图案 -->
 <section id="cloudy2" class="code-wrap cf">
    <div class="css-live-wrap">
      <!-- <summary>多云（cloudy2）（单标签实现）</summary> -->
      <!-- <summary>利用线性渐变、阴影、缩放实现</summary> -->
      <hgroup class="cloudy2">
        <!-- <h1>.cloudy2</h1> -->
      </hgroup>
    </div>
    <style class="code" contenteditable=true>
     .cloudy2{
        position: absolute;
        top: 50%;left: 50%;
        width:200px;height:260px;
        transform: translate(-50%, -50%);
        text-align:center;
        font-size:200%;
        color:#fff;
        background:#2EB5E5;
        border-radius:5px;
      }
       .cloudy2:before {
        content: "";
        text-indent:23px;
        font-size:22px;
        line-height:40px;
        color:#333;
        position: absolute;
        height: 50px;width: 50px;
        background: #FFFFFF;
        left:30%;
        top:55%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        z-index:100;
        box-shadow:
          #FFFFFF 65px -15px 0 -5px,
          #FFFFFF 25px -25px,
          #FFFFFF 30px 10px,
          #FFFFFF 60px 15px 0 -10px,
          #FFFFFF 85px 5px 0 -5px;
        animation: cloudy2 5s ease-in-out infinite;
      }
      .cloudy2:after{
        content:"";
        position: absolute;
        top: 45%;left: 63%;
        height: 60px;
        width: 60px;
        z-index:10;
        background:linear-gradient(180deg,#FE9F38 0%, #F46635 100%);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 10px 4px #FFA563;
        animation: cloudy2 10s ease-in-out infinite;
      }
       @keyframes cloudy2 {
      50%{
        transform: translate(-50%, -70%);
      }
      100%{
        transform: translate(-50%, -50%);
      }
    }
    </style>
  </section>
<body>
    
</body>
</html>

#雨天天气图案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- rainy 阴影实现雨天天气图案 -->
<section id="rainy" class="code-wrap cf">
    <div class="css-live-wrap">
      <!-- <summary>雨（rainy）</summary> -->
      <!-- <summary>利用线性渐变、阴影、缩放实现</summary> -->
      <hgroup class="rainy-container">
        <!-- <h1>.rainy</h1> -->
        <div class="rainy"></div>
      </hgroup>
    </div>
    <style class="code" contenteditable=true>
    .rainy-container {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 260px;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 200%;
        color: #fff;
        background: #E6E6E6;
        border-radius: 5px;
      }
      .rainy {
        position: absolute;
        width: 3px;
        height: 6px;
        top: 30%;
        left: 50%;
        background: #CCCCCC;
        border-radius: 50%;
        animation: rainy_rain .7s infinite linear;
      }
      .rainy:before {
        content: "";
        color: #333;
        position: absolute;
        height: 50px;
        width: 50px;
        top: 30px;
        left: -40px;
        background: #CCC;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        box-shadow: #CCC 65px -15px 0 -5px, #CCC 25px -25px, #CCC 30px 10px, #CCC 60px 15px 0 -10px, #CCC 85px 5px 0 -5px;
        animation: cloudy 5s ease-in-out infinite;
      }
      .rainy:after {
        content: "";
        position: absolute;
        top: 120px;
        left: 50%;
        height: 15px;
        width: 120px;
        background: rgba(0, 0, 0, .5);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: cloudy_shadow 5s ease-in-out infinite;
      }
      @keyframes cloudy {
        50% {
          transform: translate(-50%, -70%);
        }
        100% {
          transform: translate(-50%, -50%);
        }
      }
      @keyframes cloudy_shadow {
        50% {
          transform: translate(-50%, -50%) scale(0.8);
          background: rgba(0, 0, 0, .2);
        }
        100% {
          transform: translate(-50%, -50%) scale(1);
          background: rgba(0, 0, 0, .5);
        }
      }
       @keyframes rainy_rain {
        0% {
          box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;
        }
        25% {
          box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 120px, rgba(0, 0, 0, 0) 12px 120px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;
        }
        26% {
          box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 40px, rgba(0, 0, 0, 0) 12px 20px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;
        }
        50% {
          box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 100px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;
        }
        51% {
          box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 45px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;
        }
        75% {
          box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 95px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 120px, rgba(0, 0, 0, 0) 30px 110px;
        }
        76% {
          box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 35px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 25px, rgba(0, 0, 0, 0) 30px 15px;
        }
         100% {
          box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;
        }
    }
    </style>
  </section>
<body>
    
</body>
</html>

#文字故障效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
   <!-- 文字故障效果 -->
   <section id="text-magic" class="code-wrap cf">
    <div class="css-live-wrap">
      <!-- <summary>文字故障效果</summary> -->
      <!-- <summary>一种CSS效果，仿电脑屏幕出故障了的样子</summary> -->
      <hgroup class="text-magic" data-word="CSSTextMagic">
        CSSTextMagic
        <div class='white'></div>
      </hgroup>
    </div>
    <style class="code" contenteditable=true>
    .text-magic{
        position: absolute;
        top: 50%;left: 50%;
        transform: translate(-50%, -50%);
        width:300px;
        font-size:36px;
        font-family:Raleway, Verdana , Arial;
      }
      .white{
        position:absolute;
        left:0;
        top:15px;
        width:100%;
        height:3px;
        background:#fff;
        z-index:4;
        animation:whiteMove 3s ease-out infinite;
      }
      .text-magic:before{
        content:attr(data-word);
        position:absolute;
        top:0;
        left:0.5px;
        height:0px;
        color:rgba(0,0,0,.9);
        overflow:hidden;
        z-index:2;
        animation:redShadow 1s ease-in infinite;
        -webkit-filter:contrast(200%);
        text-shadow:0.1px 0 0 red;
      }
      .text-magic:after{
        content:attr(data-word);
        position:absolute;
        top:0;
        left:-3px;
        height:36px;
        color:rgba(0,0,0,.8);
        overflow:hidden;
        z-index:3;
        background:rgba(255,255,255,.9);
        animation:redHeight 1.5s ease-out infinite;
        -webkit-filter:contrast(200%);
      }
       @keyframes redShadow{
        20%{
          height:32px;
        }
        60%{
          height:6px;
        }
        100%{
          height:42px;
        }
      }
       @keyframes redHeight{
        20%{
          height:42px;
        }
        35%{
          height:12px;
        }
        50%{
          height:40px;
        }
        60%{
          height:20px;
        }
        70%{
          height:34px;
        }
        80%{
          height:22px;
        }
        100%{
          height:0px;
        }
      }
      @keyframes whiteMove{
        8%{
          top:38px;
        }
        10%{
          top:8px;
        }
        12%{
          top:42px;
        }
        99%{
          top:36px;
        }
      }
    </style>
  </section>
<body>
    
</body>
</html>
avatar
文章
阅读
粉丝