x
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>蜜蜂教程(mifengjc.com)</title>6
<style>7
#myDIV {8
border: 1px solid black;9
background-color: lightblue;10
width: 270px;11
height: 200px;12
overflow: auto;13
}14
15
#myDIV:hover {16
background-color: coral;17
width: 570px;18
height: 500px;19
padding: 100px;20
border-radius: 50px;21
}22
</style>23
</head>24
<body>25
26
<p>把鼠标指针悬停在 DIV 元素上，它将改变颜色和尺寸大小！</p>27
<p>点击“尝试一下”按钮，再次把鼠标指针悬停在 DIV 元素上。改变将逐渐进行，就像一个动画：</p>28
<button onclick="myFunction()">尝试一下</button>29
<div id="myDIV">30
<h1>myDIV</h1>31
</div>32
<script>33
function myFunction() {34
document.getElementById("myDIV").style.transition = "all 2s";35
document.getElementById("myDIV").style.WebkitTransition = "all 2s";36
}37
</script>38
<p>Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。</p>39
<p>Safari 支持另一个可替代该属性的属性，即 WebkitTransition 属性。</p>40
41
</body>42
</html>