CSS3实现风车

最新推荐文章于 2022-08-09 09:25:15 发布

zp1996323

最新推荐文章于 2022-08-09 09:25:15 发布

阅读量1.3k

点赞数 2

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/zp1996323/article/details/48587533

版权

博主分享了如何利用CSS3的animation属性在谷歌浏览器和Safari中实现风车动画的实践经验。

摘要由CSDN通过智能技术生成

最近在看实验室在做有关风页的事情，于是自己尝试着拿css3写了一个，这个版本的只支持谷歌浏览器和safari浏览器，原因是用到了css3的animation属性

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>风车</title>
        <style type="text/css">
            body{
                background: #a5cad6;
            }
            div{
                width: 1000px;
                margin: 100px auto;
            }
            .bottom{
                border-bottom: 100px solid #fff;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
            }
            .round{