介绍 .wave {
,,,,,,,位置:,相对的,,
,,,宽度:,200 px;
,,,身高:,200 px;
,,,背景:,@color;
边境:,,,,5 px solid # 76推开;
,,,这个特性:,50%;
,,,溢出:,隐藏;
}
.wave-box::,
.wave-box: after {
,,,,,内容:,& # 39;& # 39;;
,,,,,位置:,绝对;
,,,,,:,0;
,,,,,左:,50%;
,,,,,宽度:,400 px;
,,,,,身高:,400 px;
,,,,,这个特性:,45%;
,,,,,-webkit-transform:,翻译(-50%,-70%);
,,,,,变换:,翻译(-50%,-70%);
,,,,,背景:,rgba (255,, 255,, 255,, 0.5);
,,,,,-webkit-animation:, rotate 10 s linear 无限;
,,,,,动画:,rotate 10 s linear 无限;
,,,,,,z - index: 10;
}
@keyframes rotate {
50%的才能,{
,,,,,,,,,,,-webkit-transform:,翻译(-50%,-75%),旋转(180度);
,,,,,,,,,,,变换:,翻译(-50%,-75%),旋转(180度);
,,}
100%的才能,{
,,,,,,,,,,,-webkit-transform:,翻译(-50%,-70%),旋转(180度);
,,,,,,,,,,,变换:,翻译(-50%,-70%),旋转(180度);
,,}
}//或者使用预编译语言更方便,这里使用更少
.wave (@width;, @height;, @color), {
,,,位置:,相对的,,
,,,宽度:,@width;
,,,身高:,@height;
,,,背景:,@color;
边境:,,,,5 px solid @color;
,,,这个特性:,50%;
,,,溢出:,隐藏;
,,,,::,
,,,,::after {
,,,,,,,内容:,& # 39;& # 39;;
,,,,,,,位置:,绝对;
,,,,,,,:,0;
,,,,,,,左:,50%;
,,,,,,,宽度:,@width *, 2;
,,,,,,,身高:,@height *, 2;
,,,,,,,这个特性:,45%;
,,,,,,,变换:,翻译(-50%,-70%);
,,,,,,,背景:,rgba (255255255, 0.5);
,,,,,,,动画:,rotate 10 s linear 无限;
,,,,,,,,z - index: 10;
,,,}
,,,,::after {
,,,,,,,这个特性:,47%;
,,,,,,,背景:,rgba (255255255, 0.5);
,,,,,,,动画:,rotate 10 s linear 5 s 无限;
,,,,,,,z - index:, 20;
,,,}
}//调用
.wave-box {
,,,.wave (200 px;, 200 px;, # 76推开);
}
& lt; !——,页面上调用,——比;
& lt; div 类=皐ave-box"祝辞& lt;/div>
这篇文章将为大家详细讲解有关如何使用css实现圆形波浪效果图,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
在移动端经常看到一些圆形波浪图来显示金额,刚开始我认为这种效果只能用帆布写的,后来发现用css也可以。
原理:我们都知道让块元素的<代码> border - radius: 50%>
先看一下效果图:
//css代码
关于“如何使用css实现圆形波浪效果图”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
