html-css3.2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style type="text/css">

body{
background: url(../img/bb.jpg) no-repeat;
/*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。*/
background-size: cover;
}

.img1 {
padding-top: 100px;
width: 645px;
height: 237px;
}

.input1{
width: 1300px;
height: 100px;
font-size: 75px;
}

.input1:hover{
transform: scale(1.5, 1.5);
}

.input2 {
width: 300px;
height: 100px;
background: blue;
font-size: 75px;
}

.input2:hover{
transform: scale(2, 2);
color: red;
}
.img2 {
width: 75px;
height: 75px;
position: relative;
top: -80px;
right: -400px;
}

.img2:hover {
transform: scale(1.5, 1.5);
}

.asd{
animation: aa 2s linear;
}

@-webkit-keyframes aa{
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);
}
100% {
transform: rotate(360deg);
}
}
.qwe{
animation: nn 5s linear;
}

@-webkit-keyframes nn{
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);
}

100%{
transform: rotate(0deg);
}
}

#j2:hover{
transition: all 5s;
transform: rotate(360deg);
}
#j3:hover{
transition: all 1s;
transform: scale(2);
}
#j4:hover{
transition: all 1s;
transform: rotate(50deg);
}

</style>
</head>
<body>
<center>
<img src="../img/baidu.png" class="img1"/>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="search" placeholder="亲输入" class="input1"/></td>
<td><input type="button" value="百度一下" class="input2"/><td>

</tr>

</table>
<img src="../img/small.png" class="img2"/>


<table>
<tr>
<td><img src="../img/a3.jpg" id="j1" onmouseover="start()" onmouseout="stop()"></td>
<td><img src="../img/a4.jpg" id="j2"></td>
<td><img src="../img/a5.jpg" id="j3"></td>
<td><img src="../img/a6.jpg" id="j4"></td>
<td><img src="../img/a7.jpg" id="j5"></td>
</tr>

<tr>
<td><img src="../img/a8.jpg" id="j6" onmouseover="clic()" onmouseout="stop()"></td>
<td><img src="../img/a9.jpg" id="j7"></td>
<td><img src="../img/a10.jpg" id="j8"></td>
<td><img src="../img/a11.jpg" id="j9"></td>
<td><img src="../img/a12.jpg" id="j10"></td>
</tr>
</table>
</center>

<script>
function start(){
var j1 = document.getElementById("j1");
var j2 = document.getElementById("j2");
var j3 = document.getElementById("j3");
var j4 = document.getElementById("j4");
var j5 = document.getElementById("j5");

j1.setAttribute('class', 'asd');
j2.setAttribute('class', 'asd');
j3.setAttribute('class', 'asd');
j4.setAttribute('class', 'asd');
j5.setAttribute('class', 'asd');
}
//刷新
function stop() {
history.go(0)
}
function clic(){
var j6 = document.getElementById("j6")
var j7 = document.getElementById("j7");
var j8 = document.getElementById("j8");
var j9 = document.getElementById("j9");
var j10 = document.getElementById("j10");

j6.setAttribute('class', 'qwe');
j7.setAttribute('class', 'qwe');
j8.setAttribute('class', 'qwe');
j9.setAttribute('class', 'qwe');
j10.setAttribute('class','qwe');
}

</script>

</body>
</html>

猜你喜欢