水波纹动态效果

本文主要是介绍水波纹动态效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

水波纹动态效果

背景渐变设置

linear-gradient()：线性渐变，使用最后一个颜色填充后续；
reapeating-linear-gradient：重复的线性渐变，重复使用颜色填充；

(颜色值1，颜色值2)，从什么颜色到什么颜色
（to bottom，颜色值，颜色值）从上渐变到下
（to top, 颜色值，颜色值）从下渐变到上
（角度，颜色值，颜色值）从上到下渐变，第一个参数指定了渐变的角度
（to bottom ,颜色值，0px ,颜色值，100px）第二个颜色值从0px开始到100px停止渐变；
radial-gradient()：镜像渐变
repeating-radial-gradient()：重复镜像渐变
- radial-gradient(circle, #f00, #ff0, #080); 第一个值是，正圆的意思。以正圆的方式扩散渐变。第二三四个值。从圆心 #f00 颜色，向外扩散。
- radial-gradient(circle at center, #f00, #ff0, #080); 第一个值的意思是。正圆，圆心在中间，默认就是这个。
- radial-gradient(circle at 50%, #f00, #ff0, #080); 50% 也是一样，宽的 50%，也就是中间。（可以设置两个值，一个值代表left的位置，第二个代表top的位置）
- radial-gradient(circle farthest-corner, #f00, #ff0, #080);
- 第一个值：设置圆的类型。有正圆：circle 椭圆：ellipse，可以搭配 at top 指定位置。(可以填 %，也可以填px，一个值的时候，是设置left，两个值是设置 left 和top 的位置)
- 第一个值还可以设置：
  - closest-side：指渐变的半径长度为从圆心到离圆心最近的边
  - closest-corner：指渐变的半径长度为从圆心到离圆心最近的角
  - farthest-side：指渐变的半径长度为从圆心到离圆心最远的边
  - farthest-corner：指渐变的半径长度为从圆心到离圆心最远的角
  - 还可以加上 at 使用。( farthest-corner at 30px 30px，#f0f, #ff0 )
上述四个属性都可以作为url的背景使用，比如border-image:linear-gradient()

背景

background-color：设置背景颜色，支持十六进制，rgb,rgba,hsl,hsla,transparent
background-image：设置背景图片
background-repeat：设置图片是否平铺和平铺的效果
- repeat-x横向,repeat-y纵向,repeat, no-repeat
- round（当图片不能以整数平铺时会拉伸图片）,space（不会拉伸，但是会留有空白）
- 默认值为repeat在横向和纵向都平铺
设置图片是否平铺，和平铺的效果
background-position：根据容器来定位图片，默认值为0%，0%，分别设置left和top；若只设置一个，则第二个默认center；定位张图片时，每两个参数之间使用逗号分隔；
background-attachment：定义滚动时背景图片相对谁固定
- scroll：相当于position：fixed,当页面滚动时，图片相对于浏览器窗口进行定位，即图片不会随着滚动而发生位置变化；
- local：相当于position：absolute，随着页面滚动，图片位置随之变化
- fixed：相对于浏览器窗口进行定位，本身在父元素中不会发生位置变化，但是当父元素在浏览器窗口中滚动出去时，也随之滚动；
background-origin：设置从哪里开始显示背景图片，border-box，padding-box，content-box，默认值为padding；
background-clip：从哪里开始截掉图片，border-box,padding-box,content-box,text(文字遮罩效果)默认值为border；
background-size：设置背景图片大小；
- auto：背景图片的真实大小；
- cover：背景图片等比例放大到完全覆盖容器，但是与可能展示不全；
- contain：背景图片等比例方法到宽度或高度与容器相等的一边，但是可能出现空白；

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水波纹效果</title><link rel="stylesheet" href="day_3.css">
</head>
<body>
<div class="container"><div class="wave"></div>
</div>
</body>
</html>

css

*{margin: 0;padding: 0;
}
body{display:flex;justify-content: center;align-items: center;height:100vh;background-image:linear-gradient(rgb(90,90,250),rgb(3,3,110))
}
.container,.wave{width: 200px;height: 200px;border-radius:50%;
}
.container{border:3px solid darkturquoise;padding:10px;
}
.wave{position:relative;background-color: skyblue;overflow: hidden;/*overflow定义当有元素溢出时的表现，可以使用这个属性进行图片嵌套*/
}
.wave::before{content:"";position:absolute;top:0;left:50%;width: 300px;height: 300px;border-radius:40%;background-color: rgba(255,255,255,0.8);/*可以快速让元素水平垂直居中，-50%表示让元素向左移动父元素宽度的一半，-60%代表让元素向上移动60%*/transform:translate(-50%,-60%);/*动画名称，时长，运动，循环次数*/animation:wave 5s linear infinite;
}
.wave::after{content:'oceanball';position:absolute;top:30px;left:50%;text-transform:uppercase;color:darkturquoise;font-weight:700;transform:translate(-50%,0)
}
@keyframes wave{100%{transform:translate(-50%,-60%) rotate(360deg);}
}