动画效果_transition
程序员文章站
2024-03-24 23:02:16
...
百度前端技术学院
设计师学院
No.1 - 制作一个简单的菜单动画效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<style type="text/css">
div#container {
margin: 50px auto;
background-color: white;
border: 5px solid white;
width: 200px;
height: 300px;
text-align: center;
}
span#blu {
margin: 20px auto;
color: black;
font-size: 32px;
line-height: 32px;
}
div#bl {
width: 0px;
height: 4px;
background-color: blue;
border:0px;
margin: 20px auto;
transition: width .2s linear;
-moz-transition: width .2s linear; /* Firefox 4 */
-webkit-transition: width .2s linear; /* Safari 和 Chrome */
-o-transition: width .2s linear; /* Opera */
}
button {
width:150px;
height: 45px;
border-radius: 8px;
background-color: white;
border: 2px solid grey;
margin: 50px auto;
color: black;
font-size: 30px;
line-height: 30px;
outline:none;
}
</style>
</head>
<body>
<div id="container">
<span id="blu">前端学院</span>
<div id="bl"></div>
<button onclick="f1()">切换样式</button>
</div>
<script type="text/javascript">
function f1() {
let bl = document.getElementById("bl");
let blu = document.getElementById("blu");
bl.style.width = "150px";
bl.style.transition = " width .2s linear";
blu.style.color="blue";
bl.addEventListener("transitionend", function() { //第一个动画执行后,停顿200ms后执行第二个动画
setTimeout(function () {
bl.style.width = "0px";
blu.style.color="black";
},200);
}, true);
}
</script>
</body>
</html>
上一篇: 转:Catching Integer Overflows in C
下一篇: 数据拟合
推荐阅读