CSS写太极和魔方动画效果

最新推荐文章于 2021-04-04 16:49:39 发布

置顶青珣墨笠

最新推荐文章于 2021-04-04 16:49:39 发布

阅读量711

点赞数

分类专栏： web前端小项目 web前端html css 文章标签： css 太极魔方

本文链接：https://blog.csdn.net/zhangli2513/article/details/77199405

版权

web前端html css 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

web前端小项目

12 篇文章 1 订阅

订阅专栏

太极效果图：
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{background-color: #779999;}
            *{margin: 0;padding: 0;}
            .box-taiji{
              /*只设置高度不给宽度*/
              width:0px;
              height:400px;
              position:relative;
              margin:50px auto;
              /*用border写出左右的宽度和颜色*/
              border-left:200px solid #000;
              border-right:200px solid #fff;
              border-radius:50%;
              animation:move 4s linear infinite;
            }
            /*在盒子内添加两个元素*/
            .box-taiji:before,.box-taiji:after{
              position:absolute;
              content:"";
              display:block;
            }
            /*before为容器内的大圆*/
            .box-taiji:before{
              width:200px;
              height:200px;
              top:0px;
              left:-100px;
              z-index:1;
              background-color:#fff;
              border-radius:50%;
              /*倒影出另外一半的大圆 颜色相反*/
              box-shadow:0 200px 0 #000;
            }
            /*after为大圆中心的小圆*/
            .box-taiji:after{
              width:60px;
              height:60px;
              top:70px;
              left:-30px;
              z-index:2;
              background-color:#000;
              border-radius:50%;
              /*倒映出另外一半的小圆 颜色相反*/
              box-shadow:0 200px 0 #fff;
            }
            @keyframes move{
              100%{
                transform:rotate(0deg);
              }
              0%{
                transform:rotate(360deg);
              }
            }
        </style>
    </head>
    <body>
        <div class="box-taiji"></div>
    </body>
</html>

魔方效果图：
这里写图片描述

魔方的hover效果，散开：
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>魔方</title>
        <link rel="stylesheet" type="text/css" href="css/lifangti.css"/>
    </head>
    <body>
        <ul>
            <li>
                div*9
            </li>
            <li>
                div*9
            </li>
            <li>
                div*9
            </li>
            <li>
                div*9
            </li>
            <li>
                div*9
            </li>
            <li>
                div*9
            </li>
        </ul>
    </body>
</html>

body{background: black;}
ul{
    width: 300px;
    height: 300px;
    margin: 10%;
    list-style: none;
    position: relative;
    animation: rotate 5s linear 0s infinite;
    transform-style: preserve-3d;
}
@keyframes rotate{
    form{
        transform: rotateX(0deg)rotateY(0deg);
    }
    to{
        transform: rotateX(360deg)rotateY(360deg);
    }
}
li{
    width: 300px;
    height: 300px;
    position: absolute;
    font-size: 60px;
    color: white;
    line-height: 300px;
    text-align: center;
}
div{
    width:96px;
    height:96px;
    border: 2px solid white;
    float: left;
    border-radius: 5px;
}
/*前面*/
ul li:first-child{
    transform: translateZ(150px);
}
ul li:first-child div{
    background-color:blue;
}
/*后面*/
ul li:nth-child(2){
    transform: translateZ(-150px);
}
ul li:nth-child(2) div{
    background-color:green;
}
/*左面*/
ul li:nth-child(3){
    transform: rotateY(-90deg)translateZ(150px);
}
ul li:nth-child(3) div{
    background-color:#ADFF2F;
}
/*右面*/
ul li:nth-child(4){
    transform: rotateY(90deg)translateZ(150px);
}
ul li:nth-child(4) div{
    background-color: hotpink;
}
/*上面*/
ul li:nth-child(5){
    transform: rotateX(-90deg)translateZ(150px);
}
ul li:nth-child(5) div{
    background-color: #779999;
}
/*下面*/
ul li:last-child{
    transform: rotateX(90deg)translateZ(150px);
}
ul li:last-child div{
    background-color:yellow;
}
/*hover效果*/
/*前面*/
ul:hover li:first-child{
    transform: translateZ(200px);
}
/*后面*/
ul:hover li:nth-child(2){
    transform: translateZ(-200px);
}
/*左面*/
ul:hover li:nth-child(3){
    transform: rotateY(-90deg)translateZ(200px);
}
/*右面*/
ul:hover li:nth-child(4){
    transform: rotateY(90deg)translateZ(200px);
}
/*上面*/
ul:hover li:nth-child(5){
    transform: rotateX(-90deg)translateZ(200px);
}
/*下面*/
ul:hover li:last-child{
    transform: rotateX(90deg)translateZ(200px);
}

青珣墨笠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS写太极和魔方动画效果

太极效果图： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{background-color: #779999;} *{margin: 0;pad
复制链接

扫一扫