水波纹动态效果

最新推荐文章于 2022-03-04 16:16:14 发布

this_is_Azou

最新推荐文章于 2022-03-04 16:16:14 发布

阅读量571

点赞数

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

本文链接：https://blog.csdn.net/this_is_Azou/article/details/110671546

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

水波纹动态效果

背景渐变设置

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

效果

水波纹效果

this_is_Azou

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
水波纹动态效果

水波纹动态效果背景渐变设置linear-gradient()：线性渐变，使用最后一个颜色填充后续；reapeating-linear-gradient：重复的线性渐变，重复使用颜色填充；(颜色值1，颜色值2)，从什么颜色到什么颜色（to bottom，颜色值，颜色值）从上渐变到下（to top, 颜色值，颜色值）从下渐变到上（角度，颜色值，颜色值）从上到下渐变，第一个参数指定了渐变的角度（to bottom ,颜色值，0px ,颜色值，100px）第二个颜色值从0px开始到100p
复制链接

扫一扫