【动画】风车

最新推荐文章于 2024-07-23 16:37:55 发布

*阿漓*

最新推荐文章于 2024-07-23 16:37:55 发布

阅读量23

点赞数

分类专栏：【前端】css样式文章标签： javascript 开发语言 vue

原文链接：https://www.cnblogs.com/deng303359/archive/2012/05/09/windwill.html

版权

【前端】css样式专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML5+CSS3实现的小风车-转动的童年
在这里插入图片描述

<!DOCTYPE HTML>
<html>

<head>
    <style type="text/css">
        #windmill {
            width: 160px;
            height: 160px;
            position: relative;
            -moz-transition: -moz-transform 2s ease-in-out;
            -webkit-transition: -webkit-transform 2s ease-in-out;
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
        }

        #windmill:hover {
            -moz-transform: rotate(960deg);
            -webkit-transform: rotate(960deg);
        }

        #windmill div.top {
            width: 40px;
            height: 80px;
            left: 40px;
            top: 0px;
            border-top-left-radius: 40px;
        }

        #windmill div.right {
            width: 80px;
            height: 40px;
            left: 80px;
            top: 40px;
            border-top-right-radius: 40px;
        }

        #windmill div.bottom {
            width: 40px;
            height: 80px;
            left: 80px;
            top: 80px;
            border-bottom-right-radius: 40px;
        }

        #windmill div.left {
            width: 80px;
            height: 40px;
            left: 0px;
            top: 80px;
            border-bottom-left-radius: 40px;
        }

        #windmill div.ala {
            position: absolute;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            background: rgba(0, 0, 255, 0.4);
            border: 1px solid rgba(0, 0, 255, 0.5);
            -moz-transition: background-color 1s linear;
            -webkit-transition: background-color 1s linear;
        }

        #windmill div.ala:hover {
            background-color: #00F;
        }

        .alaIn {
            position: absolute;
            background: rgba(255, 255, 255, 0.7);
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-transition: background-color 1s linear;
            -webkit-transition: background-color 1s linear;
            left: 0;
            top: 0;
        }

        .alaIn:hover {
            background-color: rgba(255, 255, 255, 0.9);
        }

        .topIn {
            border-bottom-left-radius: 40px;
        }

        .rightIn {
            border-top-left-radius: 40px;
        }

        .bottomIn {
            border-top-right-radius: 40px;
        }

        .leftIn {
            border-bottom-right-radius: 40px;
        }
    </style>
</head>

<body>
    <div id="windmill">
        <div class="top ala"></div>
        <div class="top topIn alaIn"></div>
        <div class="right ala"></div>
        <div class="right rightIn alaIn"></div>
        <div class="bottom ala"></div>
        <div class="bottom bottomIn alaIn"></div>
        <div class="left ala"></div>
        <div class="left leftIn alaIn"></div>
    </div>
</body>

</html>