欢迎访问优讯网!
您当前的位置:首页 > 爱编程

CSS实现波动水球效果的示例代码

时间:2020-05-18 09:01:28  来源:优讯网  作者:小卡司  浏览次数:
这篇文章主要介绍了CSS实现波动水球效果,代码分为html和css部分,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
 

今天学习到了一个新的css特效,波动水球效果,也是非常的好看

在这里插入图片描述

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/水球效果.css">
</head>
<body>
    <div class="main">
        <div class="wave">
             
        </div>
    </div>
</body>
</html>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    background: linear-gradient(rgb(95,95,250)10%,rgb(3,3,110));
 
}
.main,.wave{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
 
 
}
.main{
     
    border:3px solid darkturquoise;
     
    padding: 10px;
}
.wave{
      
    background: darkturquoise;
    overflow: hidden;
     
}
.wave:after{
    content: "";
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,-60%);
    border-radius: 40%;
    animation: wave 5s linear infinite;
 
}
.wave::before{
    content:"waterball" ;
    position: absolute;
    left: 50%;
    top: 0;
    color: darkturquoise;
    z-index: 99;
    transform: translate(-50%,30px);
 
}
@keyframes wave{
    100%{
        transform: translate(-50%,-60%) rotate(360deg);
    }
}

总结

到此这篇关于CSS实现波动水球效果的示例代码的文章就介绍到这了

来顶一下
返回首页
返回首页

原文链接:https://www.jb51.net/css/725402.html


推荐资讯
如何下载旧版centos iso镜像 如何下载迷你mini版的centos镜像
如何下载旧版centos i
计算机的正确使用姿势 电脑痴如何正确的使用电脑
计算机的正确使用姿势
好用的后台管理的前端框架模版H-ui H-ui框架模版分享
好用的后台管理的前端
微信电脑多开方法 无需辅助电脑版微信双开方法分享
微信电脑多开方法 无
相关文章
栏目更新
栏目热门