使用CSS和HTML实现网页大风车效果 |
您所在的位置:网站首页 › 风车动画下载新版本 › 使用CSS和HTML实现网页大风车效果 |
使用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 |