您的位置：首页 > Web前端 > CSS

前端模型--css动画（旋转八音盒）

2017-12-13 19:32 381 查看

本文主要介绍css的动画样式实现旋转八音盒

案例图片：

html相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>八音盒</title>
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/music.css">
<!--<embed src="images/music/刘德华%20-%20慢慢习惯.mp3" height="50px" type="" loop="-1"-->
<!--hidden="no" repeat="true" playcount="true" autostart="true"
style="z-index:1;position: absolute">-->
<!--<embed src="images/music/刘德华%20-%20慢慢习惯.mp3" height="50px" type="">-->
<audio src="images/music/刘德华%20-%20慢慢习惯.mp3" autoplay="autoplay" controls="controls"></audio>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>

</ul>
<div class="heart"></div>
</body>
</html>

music.css相关代码：

body{
background-image: url("../images/music/timg%20(7).jpg");
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
overflow: hidden;
}
ul{
position: relative;
width: 150px;
height: 200px;
margin: 20% auto;
transform-style: preserve-3d;
-webkit-perspective: 0;
transform: rotateX(-10deg) rotateY(0deg);
animation: around 6s linear .1s infinite normal;
}
.heart{
background-image: url("../images/music/heart.png");
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
position: absolute;
left: 0;
top: 50%;
animation: move 6s linear .1s infinite normal;
z-index: 10;
width: 100px;
height: 100px;
}
li{
position: absolute;
left: 0;
top: 0;
width: 140px;
height: 200px;
line-height: 240px;
text-align: center;
font-size: 34px;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
li:nth-child(1){
background-image: url("../images/music/timg%20(1).jpg");
transform:rotateX(0deg) rotateY(0deg) translateZ(120px);
}
li:nth-child(2){
background-image: url("../images/music/timg%20(2).jpg");
transform:rotateX(0deg) rotateY(60deg) translateZ(120px);
}
li:nth-child(3){
background-image: url("../images/music/timg%20(3).jpg");
transform:rotateX(0deg) rotateY(-60deg) translateZ(120px);
}
li:nth-child(4){
background-image: url("../images/music/timg%20(4).jpg");
transform:rotateX(0deg) rotateY(-240deg) translateZ(120px);
}
li:nth-child(5){
background-image: url("../images/music/timg%20(5).jpg");
transform:rotateX(0deg) rotateY(240deg) translateZ(120px);
}
li:nth-child(6){
background-image: url("../images/music/timg%20(6).jpg");
transform:rotateX(0deg) rotateY(180deg) translateZ(120px);
}
@keyframes around {
0%{transform: rotateX(-10deg) rotateY(0deg) ;}
100%{transform:rotateX(-10deg) rotateY(360deg) ;}
}
@keyframes move{
0%{left: 0;top: 50%}
25%{left: 25%;top: 0}
75%{left: 75%;top: 100%}
100%{left: 100%;top:50%}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css动画旋转动画旋转八音盒 css动画八音盒

相关文章推荐

新的分享

章节导航