zoukankan      html  css  js  c++  java
  • CSS3 制作绽放的莲花

    这效果看起来挺炫,但原理并不复杂,能实现一片花瓣动起来,就能实现9片花瓣。效果的叠加而已。

    HTML:

    <section class="demo">  
      <div class="box">  
         <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>  
    </section>

     CSS:

    View Code
    body {
       background-color: #000;
    }      
    
    .demo {
       margin:0px auto;
       width: 500px;
    }
    /*莲花花瓣的容器*/
    .box {
       position: relative;/*设置相对定位,因为花瓣都要进行绝对定位*/   
       height: 400px;
       margin-top:400px
    }
    /*花瓣进行绝对定位*/
    .box .leaf {
       position: absolute;
    }
    /*绘制莲花花瓣*/
    .leaf {
       margin-top:0px;
       width: 200px;
       height: 200px;
       border-radius: 200px 0px;/*制作花瓣角*/
       background: -moz-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
            background: -webkit-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
       opacity: .6;
       filter:alpha(opacity=50);
       transform: rotate(135deg);/*花瓣旋转135deg*/
       transform-origin:  top right;/*重置花瓣旋转原点,这个很重要*/
    }
    
    @keyframes show-2 {
        0% {
         transform: rotate(135deg);
        }
        50% {
         transform: rotate(45deg);
        }
        100%{
         transform: rotate(135deg);
        }
    }
    @keyframes show-3 {
        0% {
         transform: rotate(135deg);
        }
        50% {
         transform: rotate(65deg);
        }
        100%{
         transform: rotate(135deg);
        }
    }
    @keyframes show-4 {
        0% {
         transform: rotate(135deg);
        }
        50% {
         transform: rotate(85deg);
        }
        100%{
         transform: rotate(135deg);
        }
    }
    @keyframes show-5 {
        0% {
         transform: rotate(135deg);
        }
        50% {
         transform: rotate(105deg);
        }
        100%{
         transform: rotate(135deg);
        }
    }
    @keyframes show-6 {
        0% {
         transform: rotate(135deg);
        }
        50% {
         transform: rotate(165deg);
        }
        100%{
         transform: rotate(135deg);
        }
    }
    @keyframes show-7 {
        0% {
         transform: rotate(135deg);
        }
        50% {
         transform: rotate(185deg);
        }
        100%{
         transform: rotate(135deg);
        }
    }
    @keyframes show-8 {
        0% {
         transform: rotate(135deg);
        }
        50% {
         transform: rotate(205deg);
        }
        100%{
         transform: rotate(135deg);
        }
    }  
    
    @keyframes show-9 {
        0% {
         transform: rotate(135deg);
        }
        50% {
         transform: rotate(225deg);
        }
        100%{
         transform: rotate(135deg);
        }
    }  
    
    .leaf:nth-child(1) {
     background: -moz-linear-gradient(45deg,rgba(250,250,250,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
    }
    .leaf:nth-child(2) {
      animation: show-2 6s ease-in-out infinite;
    }
    .leaf:nth-child(3) {
      animation: show-3 6s ease-in-out infinite;
    }
    .leaf:nth-child(4) {
      animation: show-4 6s ease-in-out infinite;
    }
    .leaf:nth-child(5) {
      animation: show-5 6s ease-in-out infinite;
    }
    .leaf:nth-child(6) {
      animation: show-6 6s ease-in-out infinite;
    }
    .leaf:nth-child(7) {
      animation: show-7 6s ease-in-out infinite;
    }
    .leaf:nth-child(8) {
      animation: show-8 6s ease-in-out infinite;
    }
    .leaf:nth-child(9) {
      animation: show-9 6s ease-in-out infinite;
    }

    演示:

  • 相关阅读:
    未能加载文件或程序集“xxx, Version=x.x.x.x, Culture=neutral, PublicKeyToken=xxxxxxxxxxxx”或它的某一个依赖项。系统找不到指定的文件
    RabbitMQ本地正常,发布到服务器上 出行连接失败
    Windows 服务 创建 安装 卸载 和调试
    CSS 格式化 一行一条
    ES6---new Promise()讲解,Promise对象是用来干嘛的?
    Win Server 2008 R2 IIS 默认只能添加一个 443 HTTPS 端口
    MVC 部分视图:Partial() 、RenderPartial() 、 Action() 、RenderAction() 、 RenderPage() 区别
    ;(function ($, undefined){ })(jQuery); 的使用及说明
    JS中的call()方法和apply()方法用法总结
    MongoDB服务无法启动,windows提示发生服务特定错误:100
  • 原文地址:https://www.cnblogs.com/yaojaa/p/2881186.html
Copyright © 2011-2022 走看看