微信小程序纯css实现波浪效果

  • wxml
html 复制代码
<view class="container">
  <view class="head">
    
  </view>
</view>
  • wxss
html 复制代码
.container {
  width: 100vw;
  height: 100vh;
}

.head {
  position: relative;
  height: 400rpx;
  background-color: rgb(118, 218, 255);
  overflow: hidden;
}

.head::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1000rpx;
  height: 1000rpx;
  background-color: #fff;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  bottom: 40rpx;
  opacity: .5;
  border-radius: 47%;
  animation-duration: 10s;
}

.head::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 1000rpx;
  height: 1000rpx;
  background-color: #fff;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  bottom: 100rpx;
  border-radius: 45%;
  animation-duration: 10s;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, 0) rotateZ(0deg);
  }

  50% {
    transform: translate(-50%, -2%) rotateZ(180deg);
  }

  100% {
    transform: translate(-50%, 0%) rotateZ(360deg);
  }
}

效果

相关推荐
石金龙9 小时前
[译] Composition in CSS
前端·css
天天扭码9 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户4582031531710 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
会豪17 小时前
CSS 动画属性精讲:从基础到实战
前端·css
前端Hardy1 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy1 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
墨渊君2 天前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
小帆聊前端2 天前
Flex 布局实战指南:从踩坑到精通,解决 90% 布局难题
css