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>
  • 相关阅读:
    Dev gridControl 按回车增加一行
    Web自动化----常见组件操作
    Web自动化----切换(iframe,浏览器窗口,alret)
    Web自动化----元素等待方法(显式等待和隐式等待)
    Web自动化----模拟动作(鼠标,快捷键,拖拽)
    MySQL的20条基本优化 加参考资料
    国内IT技术博客对比
    博客客户端文章测试
    QQ登录网站接入
    微信公众号本地开发调试工具
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10821300.html
Copyright © 2011-2022 走看看