css涟漪效果

最新推荐文章于 2024-07-26 09:00:00 发布

黄瓜sunny

最新推荐文章于 2024-07-26 09:00:00 发布

阅读量2k

点赞数 3

分类专栏： css 文章标签： css html

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html：

<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>

css：

.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);  
            }  
        }