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

来源：互联网发布：js set array 转换编辑：程序博客网时间：2024/05/19 10:39

本文主要介绍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%}}

阅读全文

0 0