點擊--漸變-->菜單

時間 2019-11-13

標籤點擊漸變菜單简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>

<style> 
#div
{
cursor:pointer;
position:relative;
margin:30px;
width:200px;
height:30px;
background-color:yellow;
/* Rotate div */
transition:height 0.5s;
}
#div h4{
position:absolute;
top:-15px;
left:10px;
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* Internet Explorer */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
-o-transform:rotate(0deg); /* Opera */
transition:transform 0.2s;
}
</style>
</head>
<body>

<div id="div" onclick="div()" onmouseout="out()"> <h4 id="h">></h4></div>

</body>
<script language="javascript">
function div(){
document.getElementById("h").style.transform="rotate(90deg)";
document.getElementById("div").style.height="300px";
}
function out(){
document.getElementById("h").style.transform="rotate(0deg)";
document.getElementById("div").style.height="30px";
}
</script>
</html>

點擊預覽html

相關標籤/搜索