鼠标悬停动画

来源：互联网发布：vb.net excel 数据库编辑：程序博客网时间：2024/06/06 04:24
<!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>
阅读全文
0 0