<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style lang="">
*{
margin: 0;
padding: 0;
}
body{
background-color: black;
}
.hezi{
margin:100px auto;
transform-style:preserve-3d;
/* transition: all 60s; */
transition: all 60s;
animation: move 10s linear infinite;
/* transform: rotateX(30deg) rotateY(30deg) rotatez(30deg); */
}
.hezi:hover{
transform: rotateX(3600deg) rotateY(3600deg) rotateZ(3600deg);
/* transform: rotateX(-90deg) ; */
}
div{
220px;
height: 220px;
/* background-color: green; */
font-size: 50px;
color:#fff;
}
img{
100%;
height: 100%;
}
#qian{
background:blue;
transform: translateZ(110px);
position: absolute;
}
#hou{
transform: translateZ(-110px);
background-color: yellow;
position: absolute;
}
#shang{
position: absolute;
transform: translateY(-110px) rotateX(90deg);
}
#xia{
position: absolute;
transform: translateY(110px) rotateX(90deg);
background: black;
}
#zuo{
position: absolute;
background-color: red;
transform: translateX(-110px) rotateY(-90deg);
}
#you{
position: absolute;
background-color: pink;
transform: translateX(110px) rotateY(90deg);
}
@keyframes move{
0%{
transform: rotateX(0) rotateY(0);
}
100%{
transform: rotateX(360deg) rotateY(360DEG);
}
}
audio{
display: none;
}
.myclass{
letter-spacing:5px;/*字间距*/
color: red;
font-weight:bold;
font-size:46px;
}
/* 定义keyframe动画，命名为blink */
@keyframes blink{
0%{opacity: 1;}
100%{opacity: 0;}
}
/* 添加兼容性前缀 */
@-webkit-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-ms-keyframes blink {
0% {opacity: 1; }
100% { opacity: 0;}
}
@-o-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* 定义blink类*/
.blink{
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
font-size:30px;
430px;
height: 500px;
margin: 0 auto;
animation: blink 1s linear infinite;
/* 其它浏览器兼容性前缀 */
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
-ms-animation: blink 1s linear infinite;
-o-animation: blink 1s linear infinite;
}
#Time{
color: red;
font-size:80px;
50px;
margin: 0 auto;
animation: blink 1s linear infinite;
/* 其它浏览器兼容性前缀 */
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
-ms-animation: blink 1s linear infinite;
-o-animation: blink 1s linear infinite;
}
</style>
<script>
//使用匿名函数方法
function countDown(){
var time = document.getElementById("Time");
//alert(time.innerHTML);
//获取到id为time标签中的内容，现进行判断
if(time.innerHTML == 0){
document.getElementById("blink").style.display="";
document.getElementById("Time").style.display="none";
}else{
document.getElementById("Time").style.display="";
document.getElementById("blink").style.display="none";
time.innerHTML = time.innerHTML-1;
}
}
//1000毫秒调用一次
window.setInterval("countDown()",1000);
</script>
</head>
<body>
<audio autoplay="autoplay" id="audios" controls="controls"loop="loop" preload="auto"
src="1.mp3">
</audio>
<div class="hezi">
<div id="qian"> <img src="1.jpg" alt=""> </div>
<div id="hou"> <img src="2.jpg" alt=""> </div>
<div id="zuo"> <img src="3.jpg" alt=""> </div>
<div id="you"> <img src="4.jpg" alt=""> </div>
<div id="shang"> <img src="5.jpg" alt=""> </div>
<div id="xia"> <img src="6.jpg" alt=""> </div>
</div>
<div class="blink" id="blink" style="display: none;">
<span style="margin-left: 88px;">给的说号</span><br>
丰东股份的。<br>
不颠三倒四相疑。<br>
辅导双刀费。<br>
</div>
<p id="Time">7</p>
</body>
</html>
效果:
