• (六)HTML5立方体动画设置


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>立方体动画</title>
    <style type="text/css">
    body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{
    margin:0;
    padding:0;
    }
    html,body{
    height: 100%;
    }
    body{
    /*background: url(img/body_bg.png) repeat-x;*/
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .box{
    width: 200px;
    height: 200px;
    /*background: blue;*/
    transform-style: preserve-3d;
    /*transform:rotateY(30deg) rotateX(-15deg);*/
    animation:lft_ani 8s infinite linear;
    }
    .box a{
    display: block;
    opacity: .4;
    border: 1px solid black;
    transform-style:preserve-3d;
    }
    .box .small{
    width: 100px;
    height: 100px;
    background: #18fa07;
    position: absolute;
    left: 50px;
    top: 50px;
    }
    .box .big{
    width: 200px;
    height: 200px;
    background:#2501fd;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 1s;
    }
     
    .box .big:nth-of-type(1){
    transform:translateZ(100px);
    }
    .box .big:nth-of-type(2){
    transform:translateZ(-100px);
    }
    .box .big:nth-of-type(3){
    transform:rotateY(-90deg) translateZ(100px);
    }
    .box .big:nth-of-type(4){
    transform:rotateY(90deg) translateZ(100px);
    }
    .box .big:nth-of-type(5){
    transform:rotateX(90deg) translateZ(100px);
    }
    .box .big:nth-of-type(6){
    transform:rotateX(-90deg) translateZ(100px);
    }
     
    .box:hover .big:nth-of-type(1){
    transform:translateZ(150px);
    }
    .box:hover .big:nth-of-type(2){
    transform:translateZ(-150px);
    }
    .box:hover .big:nth-of-type(3){
    transform:rotateY(-90deg) translateZ(150px);
    }
    .box:hover .big:nth-of-type(4){
    transform:rotateY(90deg) translateZ(150px);
    }
    .box:hover .big:nth-of-type(5){
    transform:rotateX(90deg) translateZ(150px);
    }
    .box:hover .big:nth-of-type(6){
    transform:rotateX(-90deg) translateZ(150px);
    }
     
    .box:hover{
    animation:lft_ani 8s infinite linear paused;
    }
     
     
    .box .small:nth-of-type(7){
    transform:translateZ(50px);
    }
    .box .small:nth-of-type(8){
    transform:translateZ(-50px);
    }
    .box .small:nth-of-type(9){
    transform:rotateY(-90deg) translateZ(50px);
    }
    .box .small:nth-of-type(10){
    transform:rotateY(90deg) translateZ(50px);
    }
    .box .small:nth-of-type(11){
    transform:rotateX(90deg) translateZ(50px);
    }
    .box .small:nth-of-type(12){
    transform:rotateX(-90deg) translateZ(50px);
    }
     
     
    @keyframes lft_ani{
    0%{
    transform:rotateX(0deg) rotateY(0deg);
    }
    100%{
    transform:rotateX(360deg) rotateY(360deg);
    }
    }
     
     
    </style>
    </head>
    <body>
    <div class="box">
    <a href="#" class="big"></a>
    <a href="#" class="big"></a>
    <a href="#" class="big"></a>
    <a href="#" class="big"></a>
    <a href="#" class="big"></a>
    <a href="#" class="big"></a>
    <a href="#" class="small"></a>
    <a href="#" class="small"></a>
    <a href="#" class="small"></a>
    <a href="#" class="small"></a>
    <a href="#" class="small"></a>
    <a href="#" class="small"></a>
    </div>
    </body>
    </html>
  • 相关阅读:
    方法
    逻辑运算符/三元运算符/Scanner
    多线程线程状态和案例演示
    实现多线程的两种方式
    初识多线程
    IO流一些问题的总结
    IO流—其他流
    厦门Android开发三年,工资不到1w,敢问路在何方?
    二本渣渣考研失败,幸得知乎内推,成功拿下Android开发offer!
    2020Android面试心得,已拿到offer
  • 原文地址:https://www.cnblogs.com/bgwhite/p/9406829.html
Copyright © 2020-2023  润新知