Home > Web Front-end > HTML Tutorial > HTML前端开发之路--Transition_html/css_WEB-ITnose

HTML前端开发之路--Transition_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:27:06
Original
1178 people have browsed it

Transition属性简介,transition属性有三个子属性, property,duration和time-function,property指的是变化的属性,duration指的是变化时间,time-function值得是过渡动画的形式;

transition的三个自属性可以一起卸载transition当中,例如

transition: background-color 1s linear;<br />
Copy after login

也可以分开来写,例如

transition-property: background-color;<br />transition-duration: 1s;<br />transition-timing-function: linear;
Copy after login

具体实现见以下代码示例:

<!DOCTYPE html><br /><html><br /><head lang="en"><br />    <meta charset="UTF-8"><br />    <title></title><br />    <style><br />        div{<br />            background-color: #5cafa5;<br />            padding: 10px;<br />            width: 100px;<br />            height: 100px;<br />            margin: 200px auto;<br />            color: black;<br />            text-align: center;<br />            /*transition: background-color 1s linear;*/<br />            /*transition-property: background-color;*/<br />            /*transition-duration: 1s;*/<br />            /*transition-timing-function: linear;*/<br /> transition:background-color 1s linear,<br />                        height 1s linear,<br />                        transform 1s linear,<br />                        color 1s linear,<br />                        width 1s linear;<br />        }<br />        div:hover{<br />            background-color: brown;<br />            transform: rotate(360deg);<br />            height: 200px;<br />            width: 200px;<br />            color: white;<br />        }<br />    </style><br /></head><br /><body><br /><!--transition:propertiy(属性)<br />dration(整个动画执行时间)<br />timing-function(过渡动画的形式)--><br /><div>实例文字</div><br /></body><br /></html>
Copy after login


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template