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

效果

相关推荐
00后程序员张15 小时前
iOS 26 App 运行状况全面解析 多工具协同监控与调试实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9160074717 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆、加固与发布治理(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
2501_9159184117 小时前
怎么上架 App?iOS 应用上架完整流程详解与跨平台发布实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088917 小时前
iOS 混淆工具链实战 多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
狂团商城小师妹17 小时前
JAVA无人共享台球杆台球柜系统球杆柜租赁系统源码支持微信小程序
java·开发语言·微信小程序·小程序
Sherry00718 小时前
【译】 CSS 布局算法揭秘:一次思维转变,让 CSS 从玄学到科学
前端·css
夜雨深秋来18 小时前
BEM方法论:构建可维护的前端CSS架构
前端·css
小羊不会c++吗(黑客小羊)20 小时前
HTML教程——1,css
css·html
奶糖 肥晨1 天前
微信小程序隐藏滚动条多种方法教程
微信小程序·小程序·notepad++
计算机学姐1 天前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis