纯CSS完成波浪纹挪动实际效果的示例

日期:2020-12-12 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

在一些网页页面上经常看到波浪纹的实际效果,尽管仅有装饰设计的功效,可是却让网页页面看上去更生动了,另外一些状况下也能起到进度条的功效,而波浪纹的方式却比一般进度条更美观大方趣味。

假如要想完成波浪纹的实际效果,作者想起的第1个方式是根据 canvas 绘图波浪纹,随后用帧动漫让波浪纹健身运动起来。这类方法完成的波浪纹实际效果应当是最好是的,可以完成许多细节,例如操纵波峰的高宽比、更改波浪纹的数量、依据前1个波浪纹的高宽比测算后1个波浪纹的高宽比这些。

可是常常要求其实不会这么繁杂,商品主管和设计方案要想的只是1个看上去还较为美观大方的波浪纹实际效果罢了。假如用 canvas 去做,就确实是屈才了,耗时耗力。因此这类状况下,便可以尝试应用 css 来进行这个小要求。

剖析波浪纹实际效果

上面是作者进行的波浪纹实际效果的在其中1种(不容易做 gif,就用多张照片拼贴在1起替代吧),它有两个波峰,这两个波峰动起来时,会有1种向右推动的实际效果。大家先1个1个看来,假如要完成1个波峰,大家应当如何做?

波峰具备弧度,在 css 中可以完成弧度实际效果的是border-raduis这个特性;而针对向右推动的实际效果,单独看来的话,实际上能够了解为是转动动漫,大家能够根据animation来完成。

// html
<div class="wave"></div>

// style
.wave {
    width: 300px;
    height: 300px;
    border-raduis: 50%;
    background: blue;
}

上面编码中的.wave在网页页面上的显示信息实际效果是1个圆形。尽管都还没加上动漫,可是大家早已能够料想到,即便转动起来,大家视觉效果上来看并沒有在健身运动。这要如何处理呢?实际上很简易,要是让每个角的弧度都不一样就可以了。另外,让宽高不一样,可使绘图出来的实际效果更好。

.wave {
    width: 250px;
    height: 300px;
    border-top-right-radius: 150px;
    border-top-left-radius: 150px;
    border-bottom-right-radius: 150px;
    border-bottom-left-radius: 140px;
    background: #adcbfe;
}

随后根据动漫使这个不规律的样子动起来。

.wave {
    width: 250px;
    height: 300px;
    border-top-right-radius: 150px;
    border-top-left-radius: 150px;
    border-bottom-right-radius: 150px;
    border-bottom-left-radius: 140px;
    background: #adcbfe;
    animation: wave 4s linear infinite;
}

@keyframes wave {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

有关 css 动漫的应用,能够参照以前的1篇文章内容:

纯CSS完成轮播图实际效果

到这里,1个波浪纹的完成就进行了。第2个波浪纹的完成流程和第1个是同样的,可是能够对width height border-raduis animation 这些特性开展改动,使两个波浪纹的健身运动节奏不一样,有快有慢有高有低,这样波浪纹的实际效果就会更真正。

要想看源代码的小伙子伴能够戳下面这个连接:

demo on github

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。