zoukankan      html  css  js  c++  java
  • 星星闪烁动画

    有时候会有多个星星一起闪烁的:我是调用相同的动画样式加延迟,不让它们同闪

    html

    <div class="star1 ani-star1"></div>
    <div class="star2 ani-star1 ani-delay1"></div>
    

    css

    @keyframes star1{
        0%, 100%, 50% {
            opacity: 1;
        }
        25%, 75% {
            opacity: .1;
        }
    }
    @-webkit-keyframes star1{
        0%, 100%, 50% {
            opacity: 1;
        }
        25%, 75% {
            opacity: .1;
        }  
    }
    
    .ani-star1{
        animation:star1 2.5s both infinite linear;
        -webkit-animation:star1 2.5s both infinite linear;
        -moz-animation:star1 2.5s both infinite linear;
        -ms-animation:star1 2.5s both infinite linear;
    }
    .ani-delay1{
        animation-delay:0.3s;
        -webkit-animation-delay:0.3s;
        -moz-animation-delay:0.3s;
        -ms-animation-delay:0.3s;
    }
    

      

      

  • 相关阅读:
    10.18
    10.16~10.17笔记
    JS
    10.8~10.11
    9.28~9.29
    9.27 代码笔记
    代码复习(9.26)
    9.19 链家
    9.18笔记
    9.17 定位
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/6830433.html
Copyright © 2011-2022 走看看