感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition 属性</title>
</head>
<body>
<h1>transition 属性</h1>
<div class="all">0、transition-property: all —— 所有属性都将获得过渡效果。</div>
<br/>
<div class="none">0、transition-property: none —— 没有属性会获得过渡效果。</div>
<div class="linear">1、transition-timing-function: linear</div>
<div class="ease">2、transition-timing-function: ease</div>
<div class="ease-in">3、transition-timing-function: ease-in</div>
<div class="ease-out">4、transition-timing-function: ease-out</div>
<div class="ease-in-out">5、transition-timing-function: ease-in-out</div>
<div class="cubic-bezier">6、transition-timing-function: cubic-bezier(0,0,0.25,1)</div>
</body>
</html>
输入 JavaScript 代码……
xxxxxxxxxx
div {
width: 300px;
height: 35px;
background: red;
}
div:hover {
width: 600px;
.none {
transition: none 2s linear;
.all {
transition: all 2s linear;
.linear {
transition: width 2s linear;
.ease {
transition: width 2s ease;
.ease-in {
transition: width 2s ease-in;
.ease-out {
transition: width 2s ease-out;
.ease-in-out {
transition: width 2s ease-in-out;
.cubic-bezier {
transition: width 2s cubic-bezier(0,0,0.25,1);