当前位置: 首页 > 网络应用技术

在初夏,使用CSS教您在夏季经常播放的四个彩色风车

时间:2023-03-07 13:11:05 网络应用技术

  一个盒子里有4个盒子,代表四片叶子。叶子在侧面圆形。它们是通过框架的角属性实现的。每一部分中有两种不同的颜色。位置和框架圆角属性实现了两种不同的颜色。定位属性是上述元素,其定位属性作为基准点。我们可以使用此功能。

  通过将伪元素存储在刀片的大盒子中,以避免过于繁琐的层次结构来实现中心中心的中心。

  棍子由一个额外的标签实现,并与大刀片大盒子绑在一起

  风车可以旋转,通过CSS动画属性实现

  在这里,您需要将下一个样式设置为大盒子,以促进叶子的定位

  通过设置盒子的盒子,左角的圆角为90%

  边框颜色的效果以实现边框和内容的不同颜色的效果,然后通过伪元素实现两种不同的颜色,还需要在伪元素中添加边框颜色。这可能会产生分区效果。因此,使用标准流的漂浮物可以为伪元素设置宽度和高度

  由于每个刀片的颜色都不同,因此我们通过CSS属性选择器将颜色分区的效果添加到每个风车的叶片

  小点的效果是通过大刀片的伪元素来实现的,建立了框架颜色,并使用框架的角来实现圆形效果

  这个盒子需要与大盒子相同的水平,因为大框将在最后添加动画效果。如果添加它,它将导致棍子随它旋转

  通过CSS旋转属性,旋转不同位置的角度,然后将叶子的位置放在给儿子-in -law的道路上

  我们可以通过CSS动画属性@KeyFrames实现风车旋转的效果。我们让他加快速度并设置1000度

  最后,将动画添加到风车叶片的大盒子中

  我将代码放在掘金上的掘金上。让我们看一下代码的代码剪辑,以携带我们对童年的记忆。祝你每天幸福,赞美

  原始:https://juejin.cn/post/7101536739004514341