纯CSS3动态莲花

来源：互联网发布：铁岭网络订花编辑：程序博客网时间：2024/04/27 20:06
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"><style>/*定义变量*//*定义Mixins*/@keyframes openAnimate {    to {        -webkit-transform: rotate(360deg);        -webkit-transform-origin: top right;        -moz-transform: rotate(360deg);        -moz-transform-origin: top right;        -ms-transform: rotate(360deg);        -ms-transform-origin: top right;        -o-transform: rotate(360deg);        -o-transform-origin: top right;        transform: rotate(360deg);        transform-origin: top right;    }}body {    background-color: #333333;color:#fff;    padding-left: 700px;    padding-top: 100px;    color: #00cece;}.demo {    width: 225px;    height: 225px;    margin: 300px;    position: relative;    -webkit-transform: rotate(135deg);    -webkit-transform-origin: center center;    -moz-transform: rotate(135deg);    -moz-transform-origin: center center;    -ms-transform: rotate(135deg);    -ms-transform-origin: center center;    -o-transform: rotate(135deg);    -o-transform-origin: center center;    transform: rotate(135deg);    transform-origin: center center;}.demo .leaf {    width: 150px;    height: 150px;    border-radius: 150px 0px;    background: linear-gradient(45deg, #bcbec0 8%, #9e1f63 30%, #9e1f63 100%);    opacity: 0.5;    filter: alpha(opacity=50);    position: absolute;    margin-top: 400px;    -webkit-animation: openAnimate 6s ease-in-out infinite alternate;    -moz-animation: openAnimate 6s ease-in-out infinite alternate;    -o-animation: openAnimate 6s ease-in-out infinite alternate;    animation: openAnimate 6s ease-in-out infinite alternate;}.demo .leaf:nth-child( 10n + 10) {    -webkit-animation-delay: 1s;    -moz-animation-delay: 1s;    -o-animation-delay: 1s;    animation-delay: 1s;    -webkit-transform: rotate(540deg);    -webkit-transform-origin: top right;    -moz-transform: rotate(540deg);    -moz-transform-origin: top right;    -ms-transform: rotate(540deg);    -ms-transform-origin: top right;    -o-transform: rotate(540deg);    -o-transform-origin: top right;    transform: rotate(540deg);    transform-origin: top right;}.demo .leaf:nth-child( 10n + 9) {    -webkit-animation-delay: 0.9s;    -moz-animation-delay: 0.9s;    -o-animation-delay: 0.9s;    animation-delay: 0.9s;    -webkit-transform: rotate(504deg);    -webkit-transform-origin: top right;    -moz-transform: rotate(504deg);    -moz-transform-origin: top right;    -ms-transform: rotate(504deg);    -ms-transform-origin: top right;    -o-transform: rotate(504deg);    -o-transform-origin: top right;    transform: rotate(504deg);    transform-origin: top right;}.demo .leaf:nth-child( 10n + 8) {    -webkit-animation-delay: 0.8s;    -moz-animation-delay: 0.8s;    -o-animation-delay: 0.8s;    animation-delay: 0.8s;    -webkit-transform: rotate(468deg);    -webkit-transform-origin: top right;    -moz-transform: rotate(468deg);    -moz-transform-origin: top right;    -ms-transform: rotate(468deg);    -ms-transform-origin: top right;    -o-transform: rotate(468deg);    -o-transform-origin: top right;    transform: rotate(468deg);    transform-origin: top right;}.demo .leaf:nth-child( 10n + 7) {    -webkit-animation-delay: 0.7s;    -moz-animation-delay: 0.7s;    -o-animation-delay: 0.7s;    animation-delay: 0.7s;    -webkit-transform: rotate(432deg);    -webkit-transform-origin: top right;    -moz-transform: rotate(432deg);    -moz-transform-origin: top right;    -ms-transform: rotate(432deg);    -ms-transform-origin: top right;    -o-transform: rotate(432deg);    -o-transform-origin: top right;    transform: rotate(432deg);    transform-origin: top right;}.demo .leaf:nth-child( 10n + 6) {    -webkit-animation-delay: 0.6s;    -moz-animation-delay: 0.6s;    -o-animation-delay: 0.6s;    animation-delay: 0.6s;    -webkit-transform: rotate(396deg);    -webkit-transform-origin: top right;    -moz-transform: rotate(396deg);    -moz-transform-origin: top right;    -ms-transform: rotate(396deg);    -ms-transform-origin: top right;    -o-transform: rotate(396deg);    -o-transform-origin: top right;    transform: rotate(396deg);    transform-origin: top right;}.demo .leaf:nth-child( 10n + 5) {    -webkit-animation-delay: 0.5s;    -moz-animation-delay: 0.5s;    -o-animation-delay: 0.5s;    animation-delay: 0.5s;    -webkit-transform: rotate(360deg);    -webkit-transform-origin: top right;    -moz-transform: rotate(360deg);    -moz-transform-origin: top right;    -ms-transform: rotate(360deg);    -ms-transform-origin: top right;    -o-transform: rotate(360deg);    -o-transform-origin: top right;    transform: rotate(360deg);    transform-origin: top right;}.demo .leaf:nth-child( 10n + 4) {    -webkit-animation-delay: 0.4s;    -moz-animation-delay: 0.4s;    -o-animation-delay: 0.4s;    animation-delay: 0.4s;    -webkit-transform: rotate(324deg);    -webkit-transform-origin: top right;    -moz-transform: rotate(324deg);    -moz-transform-origin: top right;    -ms-transform: rotate(324deg);    -ms-transform-origin: top right;    -o-transform: rotate(324deg);    -o-transform-origin: top right;    transform: rotate(324deg);    transform-origin: top right;}.demo .leaf:nth-child( 10n + 3) {    -webkit-animation-delay: 0.3s;    -moz-animation-delay: 0.3s;    -o-animation-delay: 0.3s;    animation-delay: 0.3s;    -webkit-transform: rotate(288deg);    -webkit-transform-origin: top right;    -moz-transform: rotate(288deg);    -moz-transform-origin: top right;    -ms-transform: rotate(288deg);    -ms-transform-origin: top right;    -o-transform: rotate(288deg);    -o-transform-origin: top right;    transform: rotate(288deg);    transform-origin: top right;}.demo .leaf:nth-child( 10n + 2) {    -webkit-animation-delay: 0.2s;    -moz-animation-delay: 0.2s;    -o-animation-delay: 0.2s;    animation-delay: 0.2s;    -webkit-transform: rotate(252deg);    -webkit-transform-origin: top right;    -moz-transform: rotate(252deg);    -moz-transform-origin: top right;    -ms-transform: rotate(252deg);    -ms-transform-origin: top right;    -o-transform: rotate(252deg);    -o-transform-origin: top right;    transform: rotate(252deg);    transform-origin: top right;}.demo .leaf:nth-child( 10n + 1) {    -webkit-animation-delay: 0.1s;    -moz-animation-delay: 0.1s;    -o-animation-delay: 0.1s;    animation-delay: 0.1s;    -webkit-transform: rotate(216deg);    -webkit-transform-origin: top right;    -moz-transform: rotate(216deg);    -moz-transform-origin: top right;    -ms-transform: rotate(216deg);    -ms-transform-origin: top right;    -o-transform: rotate(216deg);    -o-transform-origin: top right;    transform: rotate(216deg);    transform-origin: top right;}</style></head><body><header id="header">    <hgrounp class="white blank">        <h1>纯CSS3动态莲花</h1>    </hgrounp></header><section class="demo">    <div class="leaf"></div>    <div class="leaf"></div>    <div class="leaf"></div>    <div class="leaf"></div>    <div class="leaf"></div>    <div class="leaf"></div>    <div class="leaf"></div>    <div class="leaf"></div>    <div class="leaf"></div>    <div class="leaf"></div></section></body></html>
0 0