CSS 风车（花瓣）旋转动画圆角

这是一个综合的案例，用到了transition（动画，动作在单位时间内完成），transform（旋转），border-radius（圆角），absolute（定位），linear-gradient（线性渐变）,box-shadow（阴影）。

这里记录一下备忘，贴出源码，方便下次使用时理解，粘贴代码可以直接可以看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        /*禁用所有元素的内外边距*/
        *{
            margin: 0;
            padding: 0px;
        }

        /*禁用浏览器的滚动条*/
        html,body{
            height:100%;
            overflow: hidden;
        }

        /*初始最外层的容器*/
        #wrapper{
            height:100%;
            overflow: auto;
        }

        /*居中定位*/
        #wrap{
            position: absolute;
            top:0px;
            left:0px;
            bottom:0px;
            right:0px;

            margin: auto;
            width: 456px;
            height: 456px;
            /*150 s 完成动画（选装48000 度）*/
            transition: 150s;
        }

        /*鼠标悬浮开启动画*/
        #wrap:hover{
            transform: rotate(48000deg);
        }

        /* > 代表直接下属的子元素*/
        #wrap > div{
            position: relative;
            width: 150px;
            height:150px;
            /**/
            float: left;
            border-radius: 0 100%;
            /*box-shadow: 10px 10px pink;*/
            /*border: solid 1px black;*/
            background-image: linear-gradient(deeppink,white);
        }
        
        /*选中直接下属的第一个子元素*/
        #wrap > div:nth-child(1){
            top:75px;
            left:75px;
            background-image: linear-gradient(green,pink);
        }
        #wrap > div:nth-child(2){
            top: 43px;
            right: 10px;
            transform: rotate(40deg);
            background-image: linear-gradient(yellow,pink);
        }
        #wrap > div:nth-child(3){
            top: 63px;
            right: 91px;
            transform: rotate(80deg);
            background-image: linear-gradient(red,pink);
        }
        #wrap > div:nth-child(4){
            left: 256px;
            top: -29px;
            transform: rotate(120deg);
            background-image: linear-gradient(orange,pink);
        }
        #wrap > div:nth-child(5){
            left: 97px;
            top: 43px;
            transform: rotate(160deg);
            background-image: linear-gradient(green,pink);
        }
        #wrap > div:nth-child(6){
            left: -106px;
            top: 95px;
            transform: rotate(200deg);
            background-image: linear-gradient(yellow,pink);
        }
        #wrap > div:nth-child(7){
            left: 124px;
            top: -51px;
            transform: rotate(240deg);
            background-image: linear-gradient(red,pink);
        }
        #wrap > div:nth-child(8){
            left: -89px;
            top: -92px;
            transform: rotate(280deg);
            background-image: linear-gradient(orange,pink);
        }
        #wrap > div:nth-child(9){
            left: -259px;
            top: -163px;
            transform: rotate(320deg);
            background-image: linear-gradient(#00ff80,pink);
            /*width:75px;*/
        }
        #wrap > div:nth-child(9){
            left: -259px;
            top: -163px;
            transform: rotate(320deg);
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

</body>
</html>

CSS 风车（花瓣）旋转动画圆角

猜你喜欢