使用CSS和HTML实现网页大风车效果

您所在的位置:网站首页 风车动画下载新版本 使用CSS和HTML实现网页大风车效果

使用CSS和HTML实现网页大风车效果

2024-07-10 15:08| 来源: 网络整理| 查看: 265

使用css和html实现大风车动画效果。我们可以通过设置边框颜色和边框相互挤压的形成三角型,再通过使大盒子以中心旋转来实现大风车动画效果。

HTML代码,我通过写四个相同的盒子放在一个大盒子里面。

不给四个盒子里面添加内容,用css设置四个小盒子的边框,使四个边框相互挤压形成大风车的叶片。

.box1 { border-bottom: 100px solid yellow; } .box2 { border-left: 100px solid rgb(206, 97, 14); } .box3 { border-right: 100px solid rgb(248, 20, 226); } .box4 { border-top: 100px solid rgb(15, 245, 80); color: violet; }

最后再给大盒子添加旋转动画。

@keyframes div { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3