e媒网络

一切皆可能 e媒网络 http://www.eMay.net

博客园 首页 新随笔 联系 订阅 管理

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rotate 转动动画测试</title>
<style type="text/css">
.box{
    width:280px;
    height:280px;
    background-color:#FF0;    
}
.tran{
    transform:rotate(30deg) scale(0.5,0.3);    
}
.reset{
    transform:rotate(0deg) scale(1,1);    
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
    $(".btn1").click(function(){
        $(".box").removeClass("reset");
        $(".box").addClass("tran");        
        });
    $(".btn2").click(function(){
        $(".box").removeClass("tran");
        $(".box").addClass("reset");        
        });
});
</script>
</head>
<body>
<div class="box"></div>
<button class="btn1">变化</button>
<button class="btn2">重置</button>
</body>
</html>

 

课后作业:

1.复制上述代码,预览查看效果。

2.读懂上述代码。

posted on 2020-05-28 11:19  e媒网络技术团队  阅读(360)  评论(0编辑  收藏  举报