zoukankan      html  css  js  c++  java
  • 【css3动画】圆波扩散效果

    实例一:由实心圆点向四周扩散(有阴影)

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>css3动画圆波扩散效果</title>
    <style>
    @keyframes warn {
    0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.0;
    }
    
    25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
    }
    
    50% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.3;
    }
    
    75% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0.5;
    }
    
    100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0.0;
    }
    }
    
    @keyframes warn1 {
    0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.0;
    }
    
    25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
    }
    
    50% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.3;
    }
    
    75% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.5;
    }
    
    100% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0.0;
    }
    }
    
    .container {
    position: relative;
    width: 120px;
    height: 120px;
    left: 10px;
    top: 10px;
    }
    /* 保持大小不变的小圆点 */
    .dot {
    position: absolute;
    width: 7px;
    height: 7px;
    left: 134px;
    top: 134px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 1px solid #33ccff;
    border-radius: 50%; 
    background-color:#33ccff; /* 实心圆 ,如果没有这个就是一个小圆圈 */
    z-index: 2;
    }
    /* 产生动画(向外扩散变大)的圆圈 第一个圆 */
    .pulse {
    position: absolute;
    width: 35px;
    height: 35px;
    left: 120px;
    top: 120px;
    border: 1px solid #3399ff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn 2s ease-out;
    -moz-animation: warn 2s ease-out;
    animation: warn 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */
    }
    /* 产生动画(向外扩散变大)的圆圈 第二个圆 */
    .pulse1 {
    position: absolute;
    width: 35px;
    height: 35px;
    left: 120px;
    top: 120px;
    border: 1px solid #3399ff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn1 2s ease-out;
    -moz-animation: warn1 2s ease-out;
    animation: warn1 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */
    }
    </style>
    </head>
    
    <body>
    由实心圆点向四周扩散(有阴影)
    <div class="container">
    <div class="dot"></div>
    <div class="pulse"></div>
    <div class="pulse1"></div>
    </div>
    </body>
    </html>
    

    css3动画圆波扩散效果

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>css3动画圆波扩散效果</title>
    <style>
    @keyframes warn {
    0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.0;
    }
    
    25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
    }
    
    50% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.3;
    }
    
    75% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0.5;
    }
    
    100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0.0;
    }
    }
    
    @keyframes warn1 {
    0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.0;
    }
    
    25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
    }
    
    50% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.3;
    }
    
    75% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.5;
    }
    
    100% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0.0;
    }
    }
    
    .container {
    position: relative;
    width: 120px;
    height: 120px;
    left: 10px;
    top: 10px;
    }
    /* 保持大小不变的小圆点 */
    .dot {
    position: absolute;
    width: 7px;
    height: 7px;
    left: 134px;
    top: 134px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 1px solid #33ccff;
    border-radius: 50%; 
    background-color:#33ccff; /* 实心圆 ,如果没有这个就是一个小圆圈 */
    z-index: 2;
    }
    /* 产生动画(向外扩散变大)的圆圈 第一个圆 */
    .pulse {
    position: absolute;
    width: 35px;
    height: 35px;
    left: 120px;
    top: 120px;
    border: 1px solid #3399ff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn 2s ease-out;
    -moz-animation: warn 2s ease-out;
    animation: warn 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    }
    /* 产生动画(向外扩散变大)的圆圈 第二个圆 */
    .pulse1 {
    position: absolute;
    width: 35px;
    height: 35px;
    left: 120px;
    top: 120px;
    border: 1px solid #3399ff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn1 2s ease-out;
    -moz-animation: warn1 2s ease-out;
    animation: warn1 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    }
    </style>
    </head>
    
    <body>
    由实心圆点向四周扩散(无阴影)
    <div class="container">
    <div class="dot"></div>
    <div class="pulse"></div>
    <div class="pulse1"></div>
    </div>
    </body>
    </html>

    css3动画圆波扩散效果

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>css3动画圆波扩散效果</title>
    <style>
    @keyframes warn {
    0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.0;
    }
    
    25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
    }
    
    50% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.3;
    }
    
    75% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0.5;
    }
    
    100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0.0;
    }
    }
    
    @keyframes warn1 {
    0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.0;
    }
    
    25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
    }
    
    50% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.3;
    }
    
    75% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.5;
    }
    
    100% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0.0;
    }
    }
    
    .container {
    position: relative;
    width: 120px;
    height: 120px;
    left: 10px;
    top: 10px;
    }
    /* 保持大小不变的小圆圈 */
    .dot {
    position: absolute;
    width: 7px;
    height: 7px;
    left: 134px;
    top: 134px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 1px solid #33ccff;
    border-radius: 50%; 
    z-index: 2;
    }
    /* 产生动画(向外扩散变大)的圆圈 第一个圆 */
    .pulse {
    position: absolute;
    width: 35px;
    height: 35px;
    left: 120px;
    top: 120px;
    border: 1px solid #3399ff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn 2s ease-out;
    -moz-animation: warn 2s ease-out;
    animation: warn 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */
    }
    /* 产生动画(向外扩散变大)的圆圈 第二个圆 */
    .pulse1 {
    position: absolute;
    width: 35px;
    height: 35px;
    left: 120px;
    top: 120px;
    border: 1px solid #3399ff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn1 2s ease-out;
    -moz-animation: warn1 2s ease-out;
    animation: warn1 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */
    }
    </style>
    </head>
    
    <body>
    由空心圆圈向四周扩散(有阴影)
    <div class="container">
    <div class="dot"></div>
    <div class="pulse"></div>
    <div class="pulse1"></div>
    </div>
    </body>
    </html>

    css3动画圆波扩散效果

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>css3动画圆波扩散效果</title>
    <style>
    @keyframes warn {
    0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.0;
    }
    
    25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
    }
    
    50% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.3;
    }
    
    75% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0.5;
    }
    
    100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0.0;
    }
    }
    
    @keyframes warn1 {
    0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.0;
    }
    
    25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
    }
    
    50% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.3;
    }
    
    75% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.5;
    }
    
    100% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0.0;
    }
    }
    
    .container {
    position: relative;
    width: 120px;
    height: 120px;
    left: 10px;
    top: 10px;
    }
    /* 保持大小不变的小圆圈 */
    .dot {
    position: absolute;
    width: 7px;
    height: 7px;
    left: 134px;
    top: 134px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 1px solid #33ccff;
    border-radius: 50%; 
    z-index: 2;
    }
    /* 产生动画(向外扩散变大)的圆圈 第一个圆 */
    .pulse {
    position: absolute;
    width: 35px;
    height: 35px;
    left: 120px;
    top: 120px;
    border: 1px solid #3399ff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn 2s ease-out;
    -moz-animation: warn 2s ease-out;
    animation: warn 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    }
    /* 产生动画(向外扩散变大)的圆圈 第二个圆 */
    .pulse1 {
    position: absolute;
    width: 35px;
    height: 35px;
    left: 120px;
    top: 120px;
    border: 1px solid #3399ff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn1 2s ease-out;
    -moz-animation: warn1 2s ease-out;
    animation: warn1 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    }
    </style>
    </head>
    
    <body>
    由空心圆圈向四周扩散(无阴影)
    <div class="container">
    <div class="dot"></div>
    <div class="pulse"></div>
    <div class="pulse1"></div>
    </div>
    </body>
    </html>
  • 相关阅读:
    一步步学敏捷开发:4、Scrum的3种角色
    一步步学敏捷开发:3、如何写用户故事
    一步步学敏捷开发:5. Scrum的4种会议
    一步步学敏捷开发:1、敏捷开发及Scrum介绍
    用户故事(User Story)
    对敏捷开发的一点理解
    Java学习之Iterator(迭代器)的一般用法 (转)
    希尔排序
    递归全排列字符串
    Java中equals和==的区别
  • 原文地址:https://www.cnblogs.com/wsir/p/9055798.html
Copyright © 2011-2022 走看看