风雨过后就是彩虹,童年的纸飞机又飞到哪里了

我正在参加「初夏创意投稿大赛」详情请看:初夏创意投稿大赛

前言

夏天多的是炎热,多的也有暴风雨,别担心,别害怕,风雨过后就是彩虹

27fb8c55cf23473d922d6c0ebbd50cc2.png
不止有彩虹,还有童年的纸飞机,还有欢声和笑语。就像一副画一样时常出现在我的脑海里,那么现在就把这副画给画出来吧!

1653730813(1).jpg

代码实现

主要用到了css的动画效果,以及绝对定位,还有背景色渐变。彩虹的顺序用的是国际通用的红橙黄绿蓝靛紫。白云可以两边对称,想了下还是别对称了,就这样感觉也行。

html部分

大致分为四个部分:草地,彩虹,山坡草地,纸飞机。

  1. <div class="sky">
  2. <!-- 草地-->
  3. <div class="grass">
  4. <div class="grass0"></div>
  5. <div class="grass1"></div>
  6. <div class="grass2"></div>
  7. <div class="grass3"></div>
  8. </div>
  9. <!-- 彩虹-->
  10. <div class=" rainbow ">
  11. <div class="content">
  12. <div class="bow red"></div>
  13. <div class="bow orange"></div>
  14. <div class="bow yellow"></div>
  15. <div class="bow green"></div>
  16. <div class="bow blue"></div>
  17. <div class="bow indigo"></div>
  18. <div class="bow violet"></div>
  19. </div>
  20. </div>
  21. <!-- 白云-->
  22. <div class="clouds clouds1">
  23. <div class="cloud cloud1"></div>
  24. <div class="cloud cloud2"></div>
  25. <div class="cloud cloud3"></div>
  26. <div class="cloud cloud4"></div>
  27. </div>
  28. <div class="clouds clouds2">
  29. <div class="cloud cloud1"></div>
  30. <div class="cloud cloud2"></div>
  31. <div class="cloud cloud3"></div>
  32. <div class="cloud cloud4"></div>
  33. </div>
  34. <!-- 纸飞机-->
  35. <div class="paperPlane">
  36. <div class="triangle1"></div>
  37. <div class="triangle2"></div>
  38. <div class="triangle3"></div>
  39. </div>
  40. </div>

css部分

先把背景色,样式格式化弄好

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. border: 0;
  5. }
  6. body {
  7. background: #F7FAFC;
  8. }
  9. .sky {
  10. width: 400px;
  11. height: 400px;
  12. background: #b8e1fc;
  13. margin: calc(50vh - 200px) auto 0;
  14. position: relative;
  15. overflow: hidden;
  16. border: 20px solid burlywood;
  17. }

然后开始画草地,分别写了四块草地,动画写单独写出来的

  1. /*草地*/
  2. .grass {
  3. position: absolute;
  4. bottom: -0;
  5. height: 200px;
  6. width: 100%;
  7. }
  8. .grass0 {
  9. height: 1000px;
  10. width: 1000px;
  11. position: absolute;
  12. background: #aad137;
  13. top: 0px;
  14. left: -1000px;
  15. border-radius: 50%;
  16. z-index: 2;
  17. animation: grass0 0.5s forwards;
  18. animation-delay: 0.5s;
  19. }
  20. .grass1 {
  21. height: 400px;
  22. width: 400px;
  23. position: absolute;
  24. background: #9fcc3b;
  25. top: 0;
  26. right: -400px;
  27. border-radius: 50%;
  28. z-index: 2;
  29. animation: grass1 0.5s forwards;
  30. animation-delay: 1s;
  31. }
  32. .grass2 {
  33. height: 700px;
  34. width: 700px;
  35. position: absolute;
  36. background-color: #8f993e;
  37. top: 60px;
  38. left: -700px;
  39. border-radius: 50%;
  40. z-index: 5;
  41. animation: grass2 0.5s forwards;
  42. animation-delay: 1.5s;
  43. }
  44. .grass3 {
  45. height: 1000px;
  46. width: 1000px;
  47. position: absolute;
  48. background-color: #8f863e;
  49. top: 120px;
  50. left: -1000px;
  51. border-radius: 50%;
  52. z-index: 6;
  53. animation: grass3 0.5s forwards;
  54. animation-delay: 2s;
  55. }
  56. @keyframes grass0 {
  57. 100% {
  58. left: -350px;
  59. }
  60. }
  61. @keyframes grass1 {
  62. 100% {
  63. right: -200px;
  64. }
  65. }
  66. @keyframes grass2 {
  67. 100% {
  68. left: -435px;
  69. }
  70. }
  71. @keyframes grass3 {
  72. 100% {
  73. left: -440px;
  74. }
  75. }

彩虹样式是7条,用了两个动画样式,动画延迟效果来一帧一帧的展示

  1. /* 彩虹 */
  2. .rainbow {
  3. position: absolute;
  4. width: 330px;
  5. height: 160px;
  6. z-index: 1;
  7. top: 65px;
  8. left: 40px;
  9. overflow: hidden;
  10. }
  11. .content {
  12. position: relative;
  13. width: 330px;
  14. height: 330px;
  15. }
  16. .red {
  17. border: 18px solid red;
  18. border-radius: 50%;
  19. position: absolute;
  20. top: 0px;
  21. left: 0px;
  22. right: 0px;
  23. bottom: 0px;
  24. }
  25. .content .red {
  26. animation: bow2 0.35s forwards;
  27. animation-delay: 5.45s;
  28. }
  29. .orange {
  30. border: 18px solid orange;
  31. border-radius: 50%;
  32. position: absolute;
  33. top: 18px;
  34. left: 18px;
  35. right: 18px;
  36. bottom: 18px;
  37. }
  38. .content .orange {
  39. animation: bow 0.35s forwards;
  40. animation-delay: 5.1s;
  41. }
  42. .yellow {
  43. border: 18px solid yellow;
  44. border-radius: 50%;
  45. position: absolute;
  46. top: 36px;
  47. left: 36px;
  48. right: 36px;
  49. bottom: 36px;
  50. }
  51. .content .yellow {
  52. animation: bow2 0.35s forwards;
  53. animation-delay: 4.75s;
  54. }
  55. .green {
  56. border: 18px solid green;
  57. border-radius: 50%;
  58. position: absolute;
  59. top: 54px;
  60. left: 54px;
  61. right: 54px;
  62. bottom: 54px;
  63. }
  64. .content .green {
  65. animation: bow 0.35s forwards;
  66. animation-delay: 4.4s;
  67. }
  68. .blue {
  69. border: 18px solid blue;
  70. border-radius: 50%;
  71. position: absolute;
  72. top: 72px;
  73. left: 72px;
  74. right: 72px;
  75. bottom: 72px;
  76. }
  77. .content .blue {
  78. animation: bow2 0.35s forwards;
  79. animation-delay: 4.05s;
  80. }
  81. .indigo {
  82. border: 18px solid indigo;
  83. border-radius: 50%;
  84. position: absolute;
  85. top: 83px;
  86. left: 90px;
  87. right: 90px;
  88. bottom: 90px;
  89. }
  90. .content .indigo {
  91. animation: bow 0.35s forwards;
  92. animation-delay: 3.7s;
  93. }
  94. .violet {
  95. border: 18px solid violet;
  96. border-radius: 50%;
  97. position: absolute;
  98. top: 99px;
  99. left: 108px;
  100. right: 108px;
  101. bottom: 108px;
  102. }
  103. .content .violet {
  104. animation: bow2 0.35s forwards;
  105. animation-delay: 3.35s;
  106. }
  107. .bow {
  108. border-top: 18px solid transparent;
  109. border-right: 18px solid transparent;
  110. transform: rotate(-45deg);
  111. opacity: .6;
  112. }
  113. @keyframes bow {
  114. 0% {
  115. transform: rotate(-45deg);
  116. }
  117. 100% {
  118. transform: rotate(-225deg);
  119. }
  120. }
  121. @keyframes bow2 {
  122. 0% {
  123. transform: rotate(-45deg);
  124. }
  125. 100% {
  126. transform: rotate(135deg);
  127. }
  128. }

白云,内部细节用了圆角来处理

  1. /*白云*/
  2. .clouds {
  3. position: absolute;
  4. top: 0;
  5. width: 105px;
  6. height: 50px;
  7. opacity: 0;
  8. animation: clouds 4s forwards;
  9. animation-delay: 6s;
  10. }
  11. .clouds1 {
  12. top: 120px;
  13. left: -440px;
  14. z-index: 1;
  15. }
  16. .clouds2 {
  17. top: 80px;
  18. left: 440px;
  19. z-index: 2;
  20. }
  21. .cloud {
  22. border-radius: 50%;
  23. position: absolute;
  24. background: #fff;
  25. }
  26. .cloud1 {
  27. height: 40px;
  28. width: 40px;
  29. right: 0;
  30. top: 5px;
  31. z-index: 2;
  32. background: linear-gradient(45deg, #f2f9fe 0%, #d6f0fd 100%);
  33. }
  34. .cloud2 {
  35. height: 50px;
  36. width: 50px;
  37. right: 20px;
  38. top: 0;
  39. z-index: 3;
  40. background: linear-gradient(45deg, #f2f9fe 0%, #d6f0fd 100%);
  41. }
  42. .cloud3 {
  43. height: 45px;
  44. width: 45px;
  45. right: 43px;
  46. top: 3px;
  47. z-index: 4;
  48. background: linear-gradient(45deg, #f2f9fe 0%, #d6f0fd 100%);
  49. }
  50. .cloud4 {
  51. height: 40px;
  52. width: 40px;
  53. right: 65px;
  54. top: 5px;
  55. z-index: 5;
  56. background: linear-gradient(45deg, #f2f9fe 0%, #d6f0fd 100%);
  57. }
  58. @keyframes clouds {
  59. 100% {
  60. opacity: 0.95;
  61. left: 0px;
  62. }
  63. }

纸飞机用到的就是border了,设置三个边框透明色就做出三角了

  1. /*纸飞机*/
  2. .paperPlane {
  3. position: relative;
  4. display: inline-block;
  5. width: 300px;
  6. height: 120px;
  7. top: 184px;
  8. left: -500px;
  9. z-index: 11;
  10. animation: fly 8s forwards;
  11. animation-delay: 2.5s;
  12. }
  13. .triangle1 { /*黄色三角形*/
  14. position: absolute;
  15. top: 50px;
  16. left: 8px;
  17. height: 0;
  18. width: 0;
  19. border-left: 100px solid rgba(255, 255, 255, 0);
  20. border-right: 180px solid rgba(255, 255, 255, 0);
  21. border-bottom: 24px solid #f09c18;
  22. -webkit-transform: rotate(-10deg);
  23. -moz-transform: rotate(-10deg);
  24. -ms-transform: rotate(-10deg);
  25. -o-transform: rotate(-10deg);
  26. transform: rotate(-10deg);
  27. }
  28. .triangle1:after { /*红色边线*/
  29. position: absolute;
  30. left: -100px;
  31. content: ;
  32. display: block;
  33. width: 280px;
  34. height: 24px;
  35. border-bottom: 1px solid red;
  36. }
  37. .triangle2 { /*绿色三角形*/
  38. position: absolute;
  39. top: 39px;
  40. left: 66px;
  41. height: 0;
  42. width: 0;
  43. border-left: 40px solid rgba(255, 255, 255, 0);
  44. border-right: 180px solid rgba(255, 255, 255, 0);
  45. border-top: 24px solid #07d362;
  46. -webkit-transform: rotate(5.2deg);
  47. -moz-transform: rotate(5.2deg);
  48. -ms-transform: rotate(5.2deg);
  49. -o-transform: rotate(5.2deg);
  50. transform: rotate(5.2deg);
  51. }
  52. .triangle2:after { /*黄色边线*/
  53. position: absolute;
  54. top: -24px;
  55. left: -40px;
  56. content: ;
  57. display: block;
  58. width: 220px;
  59. height: 24px;
  60. border-top: 1px solid yellow;
  61. }
  62. .triangle3 { /*黑色三角形*/
  63. position: absolute;
  64. top: 68px;
  65. left: 100px;
  66. height: 0;
  67. width: 0;
  68. border-left: 6px solid rgba(255, 255, 255, 0);
  69. border-right: 100px solid rgba(255, 255, 255, 0);
  70. border-bottom: 12px solid #2e302c;
  71. transform: rotate(-16.8deg);
  72. }
  73. @keyframes fly { /*定义动画*/
  74. 100% {
  75. left: 31px;
  76. }
  77. }

码上掘金

以上代码已放到码上掘金中,有兴趣可以去试下。问一下还会不会折纸飞机了?代码片段

总结

夏天酷热难当,还有暴风雨常在,不管怎样心情要好起来,用一首诗做总结吧。春有百花秋有月,夏有凉风冬有雪,若无闲事挂心头,人间便是好时节


文章标签:

原文连接:https://juejin.cn/post/7102736050618892296

相关推荐

掌握CSS中的z-index

CSS(十四):盒子模型

Web端高分屏图片加载方案

CSS - 网格布局(grid)

CSS教你画一个可爱蛋

前端必备 | 3分钟白嫖我常用的免费效率工具!

如何不用一行 JS 代码做一个现代化可交互网站

CSS做一杯冷饮清凉一夏

CSS Compat 2021 和 Interop 2022中部分特性介绍

一个精灵球解决了产品经理提的3个需求!

CSS3 transform 和 canvas 背后不为人知的秘密

用Html标签和CSS3写的一个手机

做了一个星星打分效果

CSS color-scheme 和夜间模式

超酷炫的转场动画?CSS 轻松拿下!

css魔法 | 火龙の蛋

基于CSS mask-image 实现炫酷图片过渡效果之星球大战

daisyUI快速上手,解决TailwindCSS疯狂堆砌class的问题

css|这些场景题你确定你都知道吗🔥🔥

html和css的常用语法代码详解