<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<style type="text/css">
#test{
width: 200px;
height: 100px;
background: red;
}
.hoverup{
transition-duration: 5s;
transform: rotate(180deg);
}
.hoverdown{
transition-duration: 5s;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="test"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#test").hover(function(){
$(this).removeClass().addClass("hoverup");
},function(){
$(this).removeClass().addClass("hoverdown");
});
});
</script>
</body>
</html>
css3 旋转效果
最新推荐文章于 2023-05-22 19:49:17 发布