zoukankan      html  css  js  c++  java
  • 心形陀螺案例css3

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body{
    background:#000;
    }
    .box{
    300px;
    height:300px;
    margin:200px auto;
    -webkit-perspective:1500px;
    position:relative;
    }
    .div{
    150px;
    height:250px;
    position:absolute;
    transform-style:preserve-3d;
    animation:name 2s linear infinite;
    transform:rotateY(0deg);
    }
    @-webkit-keyframes name {
    from{
    transform:rotateY(0deg);
    }
    to{
    transform:rotateY(360deg);
    }
    }
    .div>div{
    140px;
    height:240px;
    position:absolute;
    border-10px 10px 0 0;
    border-radius:50% 50% 0% 50%;
    border-color:red;
    border-style:solid;
    }
    .div>div:nth-of-type(1){
    transform:rotateY(0deg) rotateZ(45deg) translateX(50px);
    }
    .div>div:nth-of-type(2){
    transform:rotateY(450deg) rotateZ(45deg) translateX(50px);
    }
    .div>div:nth-of-type(3){
    transform:rotateY(90deg) rotateZ(45deg) translateX(50px);
    }
    .div>div:nth-of-type(4){
    transform:rotateY(135deg) rotateZ(45deg) translateX(50px);
    }
    .div>div:nth-of-type(5){
    transform:rotateY(180deg) rotateZ(45deg) translateX(50px);
    }
    .div>div:nth-of-type(6){
    transform:rotateY(225deg) rotateZ(45deg) translateX(50px);
    }
    .div>div:nth-of-type(7){
    transform:rotateY(270deg) rotateZ(45deg) translateX(50px);
    }
    .div>div:nth-of-type(8){
    transform:rotateY(315deg) rotateZ(45deg) translateX(50px);
    }
    .div>div:nth-of-type(9){
    transform:rotateY(360deg) rotateZ(45deg) translateX(50px);
    }
    </style>
    </head>
    <body>
    <div class="box">
    <div class="div">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    位运算的简单简要
    Date()函数详细参数
    Android画图之Matrix(二)
    图像渐变特效的简单介绍
    Android MotionEvent中getX()和getRawX()的区别
    Timer计时器
    android中raw文件夹和asset文件夹的共同点和区别
    Selector、shape详解
    select语句后以for update结尾
    Openfire(原来的Wildfire) 在 Web 2.0 中的作用
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10821300.html
Copyright © 2011-2022 走看看