应用css完成圆形波浪纹实际效果图

日期:2021-03-01 类型:科技新闻 

关键词:小程序如何制作,预约小程序,微信小程序怎么做,微信抽奖小程序,小程序外包

在挪动端常常看到1些圆形波浪纹图来显示信息额度,一开始我觉得这类实际效果只能用canvas写的,后来发现用css还可以。

基本原理:大家都了解让块元素的border-radius:50%会变为圆形,假如少于50%呢,实际上就变为不规律的圆形。大家能够运用这个特点,用伪类再加transform动漫来完成波浪纹实际效果。

先看1下实际效果图:

//css编码

.wave {
        position: relative; 
    width: 200px;
    height: 200px;
    background: @color;
    border: 5px solid #76daff;
    border-radius: 50%;
    overflow: hidden;
}
.wave-box::before,
.wave-box::after {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 400px;
      height: 400px;
      border-radius: 45%;
      -webkit-transform: translate(⑸0%, ⑺0%);
      transform: translate(⑸0%, ⑺0%);
      background: rgba(255, 255, 255, 0.5);
      -webkit-animation: rotate 10s linear infinite;
      animation: rotate 10s linear infinite;
      z-index: 10;
}
@keyframes rotate {
  50% {
            -webkit-transform: translate(⑸0%, ⑺5%) rotate(180deg);
            transform: translate(⑸0%, ⑺5%) rotate(180deg);
  }
  100% {
            -webkit-transform: translate(⑸0%, ⑺0%) rotate(180deg);
            transform: translate(⑸0%, ⑺0%) rotate(180deg);
  }
}
//或应用预编译程序語言更便捷,这里应用less
.wave(@width; @height; @color) {
    position: relative; 
    width: @width;
    height: @height;
    background: @color;
    border: 5px solid @color;
    border-radius: 50%;
    overflow: hidden;
    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: @width * 2;
        height: @height * 2;
        border-radius: 45%;
        transform: translate(⑸0%, ⑺0%);
        background: rgba(255,255,255,0.5);
        animation: rotate 10s linear infinite;
        z-index: 10;
    }
    &::after {
        border-radius: 47%;
        background: rgba(255,255,255,0.5);
        animation: rotate 10s linear ⑸s infinite;
        z-index: 20;
    }
}
//启用
.wave-box {
    .wave(200px; 200px; #76daff);
}
<!-- 网页页面上启用 -->
<div class="wave-box"></div>

总结

以上所述是网编给大伙儿详细介绍的应用css完成圆形波浪纹实际效果图 ,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!