zoukankan      html  css  js  c++  java
  • 报警(闪烁点)动画

    html

    <div class="circle">
    <div class="wave"></div>
    </div>

    css

    <style>
    .circle {
    position: relative;
    }

    .wave {
    5px;
    height: 5px;
    border-radius: 50%;
    background: #ff0000 repeat;
    position: absolute;
    left: 50px;
    top: 50px;
    z-index: 99;
    animation: warn 2s infinite;
    -webkit-animation: warn 2s infinite;
    /* Safari 与 Chrome */
    }

    @-webkit-keyframes warn {
    0% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
    }
    50% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, .3);
    }
    100% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
    }
    }

    @keyframes warn {
    0% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
    }
    50% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, .3);
    }
    100% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
    }
    }
    </style>

    封装起来

    <script>
    function setStyle(divName,color,animateName){
    animateName = animateName + " 2s ease infinite";
    $(divName).css({
    "background":color,
    "animate":animateName,
    "-webkit-animation": animateName,
    })
    }
    setStyle('.wave','#ff0000','warn');
    </script>

    html

    <div class="circle">
    <div class="wave"></div>
    </div>

    css

    <style>
    .circle {
    position: relative;
    }
    .wave {
    5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    left: 50px;
    top: 50px;
    z-index: 99;
    /* Safari 与 Chrome */
    }

    @-webkit-keyframes warn {
    0% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
    }
    50% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, .3);
    }
    100% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
    }
    }

    @keyframes warn {
    0% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
    }
    50% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, .3);
    }
    100% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
    }
    }
    </style>

  • 相关阅读:
    csuoj 1355: 地雷清除计划
    Task 6.4 冲刺Two之站立会议3
    Task 10 统计从1到某个整数之间出现的1的次数
    Task 6.3 冲刺Two之站立会议2
    Task 9 从用户界面和体验分析“360极速浏览器”
    Task 6.3 冲刺Two之站立会议1
    《程序员开发心理学》阅读笔记一
    Task 6.2冲刺会议十 /2015-5-23
    Task 6.2冲刺会议九 /2015-5-22
    Task 6.2冲刺会议八 /2015-5-21
  • 原文地址:https://www.cnblogs.com/zhouyx/p/9353447.html
Copyright © 2011-2022 走看看