Html与Js连用实现动画

来源：互联网发布：京东数据罗盘供应商编辑：程序博客网时间：2024/06/07 16:27

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px auto;
padding: 0px;
}
.div_fu{
height: 504px;
width: 860px;
background: url(img/000231a3wtowomym9ixmqx.jpg);

}
.inp1{
width: 316px;
height: 29px;
margin-left: 250px;
margin-top: 10px;
}
.inp2{
height: 29px;
background-color: #3388FF;
color: #E8F1FF;
}
.div_content{
width: 489px;
height: 92px;
}
.div_content1{
width: 489px;
height: 92px;
}
.div_content img{
float: left;
}
.div_content1 img{
float: left;
}
.inp1:hover{
transform: scale(1.5) translate(-100px);
}
.img_xiang:hover{
transform: scale(3);
}
.inp2:hover{
transform: scale(2);
color: red;
}
.qwe{
-webkit-animation: animation1 3s;
}
.img8:hover{
transform: scale(1.5);
}
.img9:hover{
transform: skewY(50deg);
}
.img10:hover{
transform: rotate(360deg) skew(50deg) scale(3);
transform-style: preserve-3d;
}
.img10{
transition: all 3s;
}
.asd{
-webkit-animation: animation 3s;
}
@-webkit-keyframes animation{
from{transform: rotate(0deg);}
10%{transform: rotate(36deg);}
20%{transform: rotate(72deg);}
30%{transform: rotate(108deg);}
40%{transform: rotate(144deg);}
50%{transform: rotate(180deg);}
60%{transform: rotate(216deg);}
70%{transform: rotate(252deg);}
80%{transform: rotate(288deg);}
90%{transform: rotate(324deg);}
to{transform: rotate(360deg);}
}
@-webkit-keyframes animation1{
from{transform: rotate(360deg);}
10%{transform: rotate(324deg);}
20%{transform: rotate(288deg);}
30%{transform: rotate(252deg);}
40%{transform: rotate(216deg);}
50%{transform: rotate(180deg);}
60%{transform: rotate(144deg);}
70%{transform: rotate(108deg);}
80%{transform: rotate(72deg);}
90%{transform: rotate(36deg);}
to{transform: rotate(0deg);}
}
</style>

</head>
<body>
<img class="img_xiang" src="img/2017-11-29_132233.png" style="position: absolute; top: 122px; left: 800px;"/>
<div class="div_fu">
<img src="img/2017-11-29_131926.png" style="margin-left: 350px; margin-top: 50px;"/>
<input type="search" class="inp1"/><input type="button" value="百度一下" class="inp2"/>
<div class="div_content" style="margin-top: 30px;">
<img src="img/a1.png" class="img1" id="img1" onmouseover="clic()" onmouseout="stop()"/>
<img src="img/a2.png" class="img2" id="img2"/>
<img src="img/a3.png" class="img3" id="img3"/>
<img src="img/a4.png" class="img4" id="img4"/>
<img src="img/a5.png" class="img5" id="img5"/>

</div>
<div class="div_content1">
<img src="img/a6.png" class="img6" id="img6" onmouseover="start()" onmouseout="stop()"/>
<img src="img/a7.png" class="img7" id="img7"/>
<img src="img/a8.png" class="img8" id="img8"/>
<img src="img/a9.png" class="img9" id="img9"/>
<img src="img/a10.png" class="img10" id="img10"/>
</div>
</div>
<script>
function clic(){

var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var img3 = document.getElementById("img3");
var img4 = document.getElementById("img4");
var img5 = document.getElementById("img5");

img1.setAttribute('class','asd')
img2.setAttribute('class','asd');
img3.setAttribute('class','asd');
img4.setAttribute('class','asd');
img5.setAttribute('class','asd');

}
function stop(){
history.go(0)
}
function start(){
var img6 = document.getElementById("img6");
var img7 = document.getElementById("img7");
var img8 = document.getElementById("img8");
var img9 = document.getElementById("img9");
var img10 = document.getElementById("img10");
img6.setAttribute('class','qwe');
img7.setAttribute('class','qwe');
img8.setAttribute('class','qwe');
img9.setAttribute('class','qwe');
img10.setAttribute('class','qwe');
}
</script>
</body>
</html>

阅读全文

0 0