ife_設計師
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;
-webkit-transition: width .2s linear;
-o-transition: width .2s linear;
}
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() {
setTimeout(function () {
bl.style.width = "0px";
blu.style.color="black";
},200);
}, true);
}
</script>
</body>
</html>
