猿问

css3怎么设置过渡效果花费的时间

css3怎么设置过渡效果花费的时间


守着星空守着你
浏览 956回答 2
2回答

元芳怎么了

&nbsp;transition的语法：1transition:&nbsp;property&nbsp;duration&nbsp;timing-function&nbsp;delay;第二个参数就是过渡所需要的时间。12345678910111213141516171819202122232425<!DOCTYPE&nbsp;html><html><head>&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;charset="UTF-8"&nbsp;/>&nbsp;&nbsp;&nbsp;&nbsp;<title>HTML5学堂</title>&nbsp;&nbsp;&nbsp;&nbsp;<style&nbsp;type="text/css">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.h5course&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;200px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;200px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#39f;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*3s就是过度的时间*/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition:&nbsp;height&nbsp;3s&nbsp;ease-in;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-o-transition:&nbsp;height&nbsp;3s&nbsp;ease-in;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition:&nbsp;height&nbsp;3s&nbsp;ease-in;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.h5course:hover&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;500px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;</style></head><body>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="h5course">学习HTML5，到HTML5学堂</div>&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="js/jquery-3.2.1.min.js"&nbsp;type="text/javascript"></script></body></html>
0

杨__羊羊

实例HTML Code<div id="ts_div"></div>CSS Code#ts_div {width: 300px;height: 300px;margin: 100px auto 0;background-color: #000;transition: all 1s ease;}#ts_div:hover {transform: translateX(200px);}JS Codevar ts_div = document.getElementById("ts_div");$("#ts_div").bind("webkitTransitionEnd", function() {ts_div.css("transform: translateX(-400px)")});
0
随时随地看视频慕课网APP

相关分类

CSS3
我要回答