0
点赞
收藏
分享

微信扫一扫

第六课--过渡

闲鱼不咸_99f1 2022-10-12 阅读 162


transition:动画持续时间,动画属性的作用是赋值给元素,整个元素都在使用这个属性


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
</head>
<style>
.div1 {
width: 200px;
height: 300px;
background-color: #4cae4c;
transition: 5s;
}

.div1:hover {

width: 500px;
}

.div2 {
width: 100px;
height: 200px;
background-color: #5bc0de;
transition: width 2s, height 2s, transform 2s;
}

.div2:hover {
width: 500px;
height: 600px;
transform: rotate(180deg);
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

 

举报

相关推荐

0 条评论