(莲花绽放)animation

来源：互联网发布：mac lol 编辑：程序博客网时间：2024/04/19 00:06

今天我在学习transation 时在网上看见一个网友写的莲花绽放很炫，我也试着写咯一下，效果如下所示

html代码：

<div class="box">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <!-- <div></div> --></div>

css代码：

body{background-color: #d4d4d4; height: 100%; overflow: hidden;}    .box{ width: 600px; height: auto; margin:50px auto; position: relative;        -webkit-transform:rotate(-34deg);        -moz-transform:rotate(-34deg);        -0-transform:rotate(-34deg);        transform:rotate(-34deg);        /*transition: all 2s linear;*/    }    .box >div{ width: 300px; height: 300px; border-radius: 0 300px;  position: absolute; margin-top:100px; left: -38%;opacity: 0.5;/*background: #f36486;border:1px solid orange;*/        filter:alpha(opacity=50);        /*IE渐变设置样式*/         /* 第一个参数：渐变起始位置的颜色        第二个参数：渐变终止位置的颜色        第三个参数：渐变的类型        0 代表竖向渐变        1  代表横向渐变           filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);     */        background: -webkit-linear-gradient(bottom right ,#f36486, #f7829d, #fae3e4);        background: -moz-linear-gradient(bottom right ,#f36486, #f7829d, #fae3e4);        background: -o-linear-gradient(bottom right ,#f36486, #f7829d, #fae3e4);        background: linear-gradient(bottom right ,#f36486, #f7829d, #fae3e4);        -webkit-transform-origin:100% 100%;        -moz-transform-origin:100% 100%;        -o-transform-origin:100% 100%;        transform-origin:100% 100%;    }    .box > div:nth-child(1){        -webkit-animation: show_1 5s ease-in-out infinite;        animation: show_1 5s ease-in-out infinite;    }    .box > div:nth-child(2){        -webkit-animation: show_2 5s ease-in-out infinite;        animation: show_2 5s ease-in-out infinite;    }    .box > div:nth-child(3){        -webkit-animation: show_3 5s ease-in-out infinite;        animation: show_3 5s ease-in-out infinite;    }    .box > div:nth-child(4){        -webkit-animation: show_4 5s ease-in-out infinite;        animation: show_4 5s ease-in-out infinite;    }    .box > div:nth-child(5){        -webkit-animation: show_5 5s ease-in-out infinite;        animation: show_5 5s ease-in-out infinite;    }    .box > div:nth-child(6){        -webkit-animation: show_6 5s ease-in-out infinite;        animation: show_6 5s ease-in-out infinite;    }    .box > div:nth-child(7){        -webkit-animation: show_7 5s ease-in-out infinite;        animation: show_7 5s ease-in-out infinite;    }    .box > div:nth-child(8){        -webkit-animation: show_8 5s ease-in-out infinite;        animation: show_8 5s ease-in-out infinite;    }    /*1*/    @keyframes show_1{        0%{transform:rotate(0deg);}        100%{transform:rotate(0deg);}    }    @-webkit-@keyframes show_1{        0%{-webkit-transform:rotate(0deg);}        100%{-webkit-transform:rotate(0deg);}    }    /*2*/    @keyframes show_2{        0%{transform:rotate(0deg);}        100%{transform:rotate(22.5deg);}    }    @-webkit-@keyframes show_2{        0%{-webkit-transform:rotate(0deg);}        100%{-webkit-transform:rotate(22.5deg);}    }    /*3*/    @keyframes show_3{        0%{transform:rotate(0deg);}        100%{transform:rotate(45deg);}    }    @-webkit-@keyframes show_3{        0%{-webkit-transform:rotate(0deg);}        100%{-webkit-transform:rotate(45deg);}    }    /*4*/    @keyframes show_4{        0%{transform:rotate(0deg);}        100%{transform:rotate(67.5deg);}    }    @-webkit-@keyframes show_4{        0%{-webkit-transform:rotate(0deg);}        100%{-webkit-transform:rotate(67.5deg);}    }    /*5*/    @keyframes show_5{        0%{transform:rotate(0deg);}        100%{transform:rotate(90deg);}    }    @-webkit-@keyframes show_5{        0%{-webkit-transform:rotate(0deg);}        100%{-webkit-transform:rotate(90deg);}    }    /*6*/    @keyframes show_6{        0%{transform:rotate(0deg);}        100%{transform:rotate(112.5deg);}    }    @-webkit-@keyframes show_6{        0%{-webkit-transform:rotate(0deg);}        100%{-webkit-transform:rotate(112.5deg);}    }    /*7*/    @keyframes show_7{        0%{transform:rotate(0deg);}        100%{transform:rotate(135deg);}    }    @-webkit-@keyframes show_7{        0%{-webkit-transform:rotate(0deg);}        100%{-webkit-transform:rotate(135deg);}    }    /*8*/    @keyframes show_8{        0%{transform:rotate(0deg);}        100%{transform:rotate(157.5deg);}    }    @-webkit-@keyframes show_8{        0%{-webkit-transform:rotate(0deg);}        100%{-webkit-transform:rotate(157.5deg);}    }

0 0