html-鼠标移动后自动旋转

来源：互联网发布：java连接数据库的框架编辑：程序博客网时间：2024/05/17 23:19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><style>img{    -webkit-transition: 0.4s;    -webkit-transition: -webkit-transform 0.4s ease-out;    transition: transform 0.4s ease-out;    -moz-transition: -moz-transform 0.4s ease-out;}img:hover{    transform: rotateZ(360deg);    -webkit-transform: rotateZ(360deg);    -moz-transform: rotateZ(360deg);}</style></head><body>    <a href="www.baidu.com">    <img src="file://C:/Users/nl28/Desktop/web/1.jpg" width="200" id="1"     style="position:absolute; left:800px; top:500px; " >    </a>    <img src="file://C:/Users/nl28/Desktop/web/2.jpg"  width="300"  id="2"    style="position:absolute; left:400px; top:500px; ">    <img src="file://C:/Users/nl28/Desktop/web/3.jpg"  width="400" id="3"    style="position:absolute; left:50px; top:100px; ">    <img src="file://C:/Users/nl28/Desktop/web/4.gif"  width="300" id="4"    style="position:absolute; left:400px; top:300px; "></script></body></html>

效果图
这里写图片描述

阅读全文

0 0