好玩的Css动画
大家好，我是小晨，
css3的动画（animation）一直都是比较有趣的，记得我在刚接触到动画的时候也很特别感兴趣，今天用C3动画写一个简单的小魔方。
注：本文是我初学
css动画突发灵感写的一个小demo，技术并不是很鲜明，不喜勿喷。如有侵权请与我联系 谢谢
主体部分
主体部分比较简单，六个
div里面分别有ul，ul里面分别由九个小li，如下：
<body>
<div class="box">
<div class="yi">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="er">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="san">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="si">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="wu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="liu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
</body>
样式部分
样式部分主要使用了
rotate3d属性来进行旋转，具体如下：
<style>
* {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
body {
background-color: aliceblue;
perspective: 800px;
}
.box {
position: relative;
width: 400px;
height: 400px;
margin: 200px auto;
transform-style: preserve-3d;
animation: move 6s linear infinite alternate;
}
.box div {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.yi {
background-color: transparent;
transform: translate3d(0, 0, 200px);
}
.er {
background-color: transparent;
transform: translate3d(200px, 0, 0) rotateY(-90deg);
}
.san {
background-color: transparent;
transform: translate3d(-200px, 0, 0) rotateY(-90deg);
}
.si {
background-color: transparent;
transform: translate3d(0, 0, -200px);
}
.wu {
background-color: transparent;
transform: translate3d(0, -200px, 0) rotateX(90deg);
}
.liu {
background-color: transparent;
transform: translate3d(0, 200px, 0) rotateX(90deg);
}
@keyframes move {
0% {}
100% {
transform: rotate3d(1, 1, -1, 360deg);
}
}
.box ul {
width: 100%;
height: 100%;
border: 1px rgb(0, 255, 0) solid;
}
.box ul li {
color: #fff;
font-size: 20px;
float: left;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin: 16.6px;
border-radius: 30px;
}
.box .yi ul li {
background-color: pink;
}
.box .er ul li {
background-color: skyblue;
}
.box .san ul li {
background-color: purple;
}
.box .si ul li {
background-color: thistle;
}
.box .wu ul li {
background-color: mediumpurple;
}
.box .liu ul li {
background-color: orange;
}
</style>
效果
因我我不会制作gif动图，所以只能用码上掘金了，呜呜
总结
css动画真的超级好玩，隔壁小孩都看哭了，我是小晨 一个不想加班的加班族。
我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！”
