CSS3 transition属性_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

CSS3 transition属性_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:35 AM

Transition（过渡），设置过渡时间，（transition-duration）

<head>    <title>无标题文档</title>    <style>        .box{width:100px;height:100px;background:red; transition:500ms;}        .box:hover{ background:blue;width:200px;height:200px;}    </style></head><body>    <div class="box"></div></body>

只设置某一个样式过渡，即要运动的样式，下面的例子设置了width过渡（all | width | height | ... | none):

<head>    <title>无标题文档</title>    <style>        .box{width:100px;height:100px;background:red; transition:500ms width;}        .box:hover{ background:blue;width:200px;height:200px;}    </style></head><body>    <div class="box"></div></body>

设置运动形式：transition-timing-function (ease[默认值，逐渐变慢], linea[匀速], ease-in[加速], ease-out[减速], ease-in-out[先加速后减速], cubic-besizer[贝塞尔曲线]（http://matthewlein.com/ceaser/）)

<head>    <title>无标题文档</title>    <style>        .box{width:100px;height:100px;background:red; transition:5s width cubic-bezier(0.145,1.295,0.000,1.610);}        .box:hover{width:500px;}    </style></head><body>    <div class="box"></div></body>

同时设置多个样式的过渡时间，用逗号分隔开，如下

<head>    <title>无标题文档</title>    <style>        .box{width:100px;height:100px;background:red; transition:1s width,2s height,3s background;}        .box:hover{width:500px;height:300px;background:blue;}    </style></head><body>    <div class="box"></div></body>

设置延迟时间，transition-delay，即多长时间后开始某个运动，下面的例子中在1s之后高度开始过渡

 1 <head> 2     <title>无标题文档</title> 3     <style> 4         .box{width:100px;height:100px;background:red; transition:1s width,2s 1s height,3s 3s background;} 5         .box:hover{width:500px;height:300px;background:blue;} 6     </style> 7 </head> 8 <body> 9     <div class="box"></div>10 </body>

过渡结束时触发指定的执行函数，在过渡结束时，执行alert（“end”）

<head>    <title>无标题文档</title>    <style>        .box{width:100px;height:100px;background:red; transition:1s width;}    </style></head><body>    <div class="box" id="box"></div>    <script>        var oBox=document.getElementById("box");        oBox.onclick=function()        {        　　this.style.width=this.offsetWidth+100+"px";        };        addEnd(oBox,function(){        　　alert("end");            });        function addEnd(obj,fn)        {        　　obj.addEventListener('WebkitTransitionEnd',fn,false);        　　obj.addEventListener('transitionend',fn,false);        }    </script></body>

过渡完成事件
Webkit内核： obj.addEventListener('webkitTransitionEnd', function(){}, false);
firefox内核：obj.addEventListener('transitionend', function(){}, false);

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML的目的：启用Web浏览器可以显示内容May 03, 2025 am 12:03 AM

HTML的核心目的在于让浏览器理解并展示网页内容。1.HTML通过标签定义网页结构和内容，如、到、等。2.HTML5增强了多媒体支持，引入了和标签。3.HTML提供了表单元素，支持用户交互。4.优化HTML代码可提升网页性能，如减少HTTP请求和压缩HTML。

为什么HTML标签对Web开发很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）heSdefinElayout，语义和互动性。2）SemantictagsiCtagSimproveCacsibilitieAndseo.3）pose poseriblesibilityAndseoandseo.3）poser