css实现方形圈圈放大涟漪动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现方形圈圈放大涟漪动画效果代码,仅使用一个div,和一些css代码实现。

代码标签: css 方形 圈圈 放大 涟漪 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   html,body{width:100%;height:100%}body{background-color:#4e4e4e;display:flex;align-items:center;justify-content:center}.circle-ripple{background-color:#35ffc3;width:1em;height:1em;border-radius:50%;-webkit-animation:ripple .7s linear infinite;animation:ripple .7s linear infinite}@-webkit-keyframes ripple{0%{box-shadow:0 0 0 0 rgba(101,255,120,0.3),0 0 0 1em rgba(101,255,120,0.3),0 0 0 3em rgba(101,255,120,0.3),0 0 0 5em rgba(101,2.........完整代码请登录后点击上方下载按钮下载查看

网友评论0