鼠标悬停动画

最新推荐文章于 2023-03-06 20:43:56 发布

Liuxb_zao

最新推荐文章于 2023-03-06 20:43:56 发布

阅读量297

点赞数

本文链接：https://blog.csdn.net/Liuxb_zao/article/details/78186193

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span.change:hover{
            color: red;
            font-size:20px ;
        }
        #haha{width: 300px;height: 15px;}
        #haha:hover{
            width: 600px;
            height: 60px;
        }
        #lala{width: 100px;height:100px;}
        #lala:hover{
            width: 200px;
            height: 200px;
        }

        a.change:hover{

           -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);

            display:block;
            transition:2s;

        }
        l.change:hover{

            -webkit-transform: rotate(-360deg);
            -moz-transform: rotate(-360deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            display:block;
            transition:2s;

        }
        img.change:hover{

            -webkit-transform: rotate(-25deg);
            -moz-transform: rotate(-25deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

        }
    </style>
</head>
<body background="img/bg.jpg">
<div style="width: 100%">
<div style="padding-top: 200px;margin-left: 650px">
<form method="get" id="searchform" action="http://baidu.com">
   
      <input type="text" class="box" name="s" id="haha"  placeholder="搜索一下" >
        <button style="background: dodgerblue;color: aliceblue"><span class="change"> 百度一下</span></button>

</form>

</div>
    <div style="padding-top:60px;margin-left:500px;font-weight: 100">
        <a class="change"><img src="img/001.png" style="width: 100px;height: 100px"></a>
        <img src="img/001.png" style="width: 100px;height: 100px">
        <img src="img/001.png" style="width: 100px;height: 100px">
        <img src="img/001.png" style="width: 100px;height: 100px">
        <img src="img/001.png" style="width: 100px;height: 100px"><br>
    </div>
        <div style="padding-top:20px;margin-left:500px;font-weight: 100">
        <l class="change"><img src="img/003.png" style="width: 100px;height: 100px"></l>
        <img src="img/003.png" style="width: 100px;height: 100px">
        <span id="lala"><img src="img/003.png" style="width: 100px;height: 100px" ></span>
        <img src="img/003.png" style="width: 100px;height: 100px" class="change">
        <img src="img/003.png" style="width: 100px;height: 100px">
    </div>
</div>
</body>
</html>

Liuxb_zao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标悬停动画

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> span.change:hover{ color: red; font-size:20px ; } #haha{width: 30
复制链接

扫一扫