CSS实战

来源：互联网发布：mac能播p2p电影浏览器编辑：程序博客网时间：2024/06/05 05:37

1、实现效果

效果一：涟漪扩散效果

效果二：波动扩散效果

2、实现原理

在 div 里定义圆形，使用 css 的动画，让圆形的大小由小到大进行变化。
① 涟漪扩散：

定义了3个带边框的空圆，让这3个圆形由小到大进行变化，为了体现渐进扩散的效果，使用动画延时，规定
每个圆形延时时间

② 波动扩散：

定义了1个带背景色的圆，让这个圆形由小到大进行变化

3、具体代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS实战 - 波纹扩散效果</title><link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg"><style type="text/css">body {margin: 0;}        .container {              position: absolute;            top: 30%;            left: 30%;            width: 40%;              height: 40%;        }         .spliter {width: 100%;height: 20px;}/************以下为具体实现************/.wave {position: relative;    width: 100px;    height: 100px;    text-align: center;    line-height: 100px;    font-size: 28px;}.wave .circle {    position: absolute;    border-radius: 50%;    opacity: 0;}/* 波纹效果 */.wave.ripple .circle {    width: calc(100% - 6px); /* 减去边框的大小 */    height: calc(100% - 6px);/* 减去边框的大小 */    border: 3px solid #fff;}.wave.ripple .circle:first-child {animation: circle-opacity 2s infinite;}.wave.ripple .circle:nth-child(2) {animation: circle-opacity 2s infinite;animation-delay: .3s;}.wave.ripple .circle:nth-child(3) { animation: circle-opacity 2s infinite;animation-delay: .6s;}.wave.ripple.danger {    color: red;}.wave.ripple.danger .circle {border-color: red;}.wave.ripple.warning {    color: orange;}.wave.ripple.warning .circle {    border-color: orange;}/* 波动效果 */.wave.solid .circle{width: 100%;    height: 100%;    background: #fff;}.wave.solid .circle:first-child {animation: circle-opacity 2s infinite;}.wave.solid.danger {color: red;}.wave.solid.danger .circle{background: red;}.wave.solid.warning {color: orange;}.wave.solid.warning .circle{background: orange;}@keyframes circle-opacity{    from {        opacity: 1;        transform: scale(0);    }    to {        opacity: 0;        transform: scale(1);    }}</style></head><body><div class="container"><div class="wave ripple danger"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="content"><i class="fa fa-bell"></i></div></div><div class="spliter"></div><div class="wave solid warning"><div class="circle"></div><div class="content"><i class="fa fa-bell"></i></div></div></div></body></html>

阅读全文

0 0