当前位置:   article > 正文

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

css 波浪动画
  • wxml
  1. <view class="container">
  2. <view class="head">
  3. </view>
  4. </view>
  • wxss
  1. .container {
  2. width: 100vw;
  3. height: 100vh;
  4. }
  5. .head {
  6. position: relative;
  7. height: 400rpx;
  8. background-color: rgb(118, 218, 255);
  9. overflow: hidden;
  10. }
  11. .head::after {
  12. content: "";
  13. position: absolute;
  14. left: 50%;
  15. width: 1000rpx;
  16. height: 1000rpx;
  17. background-color: #fff;
  18. animation-name: rotate;
  19. animation-iteration-count: infinite;
  20. animation-timing-function: linear;
  21. bottom: 40rpx;
  22. opacity: .5;
  23. border-radius: 47%;
  24. animation-duration: 10s;
  25. }
  26. .head::before {
  27. content: "";
  28. position: absolute;
  29. left: 50%;
  30. width: 1000rpx;
  31. height: 1000rpx;
  32. background-color: #fff;
  33. animation-name: rotate;
  34. animation-iteration-count: infinite;
  35. animation-timing-function: linear;
  36. bottom: 100rpx;
  37. border-radius: 45%;
  38. animation-duration: 10s;
  39. }
  40. @keyframes rotate {
  41. 0% {
  42. transform: translate(-50%, 0) rotateZ(0deg);
  43. }
  44. 50% {
  45. transform: translate(-50%, -2%) rotateZ(180deg);
  46. }
  47. 100% {
  48. transform: translate(-50%, 0%) rotateZ(360deg);
  49. }
  50. }

效果

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/763506
推荐阅读
相关标签
  

闽ICP备14008679号