微信小程序纯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);
  }
}

效果

相关推荐
future_studio12 分钟前
聊聊 Unity(小白专享、C# 小程序 之 播放器)
unity·小程序·c#
Q_Q51100828530 分钟前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
小Tomkk1 小时前
Rokid 开发空间小程序 实战
3d·小程序·rokid·jsar
说私域1 小时前
基于多模态AI技术的传统行业智能化升级路径研究——以开源AI大模型、AI智能名片与S2B2C商城小程序为例
人工智能·小程序·开源
2501_916007472 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者84 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
努力就够了5 小时前
微信小程序:日常零售供应系统
微信小程序·erp·接单·零售系统
说私域5 小时前
基于开源AI大模型、AI智能名片与S2B2C商城小程序的购物中心精准零售数据架构研究
人工智能·小程序·开源
说私域6 小时前
开源链动2+1模式、AI智能名片与S2B2C商城小程序:社群经济的数字化重构路径
人工智能·小程序·开源
peachSoda76 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序