HTML5图片的hover事件案例

最新推荐文章于 2025-03-18 15:05:59 发布

四夕520

最新推荐文章于 2025-03-18 15:05:59 发布

阅读量6.4k

点赞数 1

本文链接：https://blog.youkuaiyun.com/Luokaiqin520/article/details/79189943

版权

这篇博客展示了如何使用HTML5和CSS实现图片及元素的hover效果，包括图片缩放、输入框变换、按钮点击动画以及图片旋转。通过设置CSS的`transform`属性和`hover`伪类，以及JavaScript来控制动画的开始和结束，实现了一系列交互式的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<style>

body{
background: url(../img/bb.jpg);

/*背景图片足够大*/
background-size: cover;
}

.img1{
width: 400px;
height: 260px;
margin-top: 200px;
}

.img2 {
width: 75px;
height: 75px;
position: relative;
top: -80px;
right: -300px;
}

/*小图标鼠标移上去时缩放原来的1.2倍*/
.img2:hover{
transform: scale(1.2);
}

.input1{ /*设置输入框的大小*/
width: 1000px;
height: 80px;
font-size: 65px;
}
.input1:hover{ /* //当鼠标移上去时要做的事情*/
transform: scale(1.5);
}

.input2{
width: 300px;
height: 80px;
font-size: 65px;
background-color: blue;
}

/*百度一下鼠标移上去时缩放原来的2倍.字变成红色*/
.input2:hover{
transform: scale(2);
color: red;

}

.asd{

animation: name1 2s linear;
}

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

#j2:hover{
transition: all 2s;
transform: rotate(45deg);
}

</style>
</head>
<body>

<center>
<img src="../img/baidu.png" class="img1"/>

<table border="0" cellspacing="0">
<tr>
<td><input type="text" class="input1" placeholder="请您输入"></td>
<td><input type="button" class="input2" value="百度一下"></td>
</tr>

</table>

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

<table>
<tr>
<td><img src="../img/a3.jpg" id="j1" οnmοuseοver="start()" οnmοuseοut="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" οnmοuseοver="start1()" οnmοuseοut="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 start1(){

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","asd1")
j7.setAttribute("class","asd1")
j8.setAttribute("class","asd1")
j9.setAttribute("class","asd1")
j10.setAttribute("class","asd1")
}

</script>

</body>
</html>