前端特效集合第一篇：阴影波纹效果，类似动态svg图；

Wu.vue.js

于 2020-08-06 23:46:39 发布

阅读量323

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/wufuShuna/article/details/107852362

版权

前端专栏收录该内容

12 篇文章 2 订阅

订阅专栏

本文介绍如何利用CSS3的animation属性创建一个类似动态SVG的阴影波纹效果，通过实例代码展示实现过程。

摘要由CSDN通过智能技术生成

css3的animation属性实现：

html：

   <span></span>

css:

  span {
            display: block;
            width: 100px;
            height: 100px;
            margin: 160px auto;
            animation: ripple 0.6s linear infinite;
            border-radius: 50px;
            background: red;
        }
        /* dalgalanma efekti */
        
        @keyframes ripple {
            0% {
                box-shadow: 0 0 0 0 rgba(0, 128, 0, 0.1), 0 0 0 20px rgba(0, 128, 0, 0.1), 0 0 0 40px rgba(0, 128, 0, 0.1), 0 0 0 60px rgba(0, 128, 0, 0.1);
            }
            100% {
                box-shadow: 0 0 0 20px rgba(0, 128, 0, 0.1), 0 0 0 40px rgba(0, 128, 0, 0.1), 0 0 0 60px rgba(0, 128, 0, 0.1), 0 0 0 80px rgba(0, 128, 0, 0);
            }
        }