CSS3 莲花盛开动画

作者(出处):百宝箱工作室发布时间:2017年2月24日 17:42:39查阅量:411

<!DOCTYPE html><html>
<head><meta charset="UTF-8">
<title>CSS3制作莲花开放动画-柯乐义</title>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/css3/10/prefixfree.min.js"></script>
<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: #ccc;
}
.demo {
  width: 225px;
  height: 225px;
  margin: 300px auto 0;
  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.6;
  filter: alpha(opacity=60);
  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>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2017
点击这里给我发消息