HTML前端开发之路—

2019独角兽企业重金招聘Python工程师标准>>>

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

transition的三个自属性可以一起写在transition当中，例如

‍‍transition：background-color 1s linear；‍‍

也可以分开来写，例如

‍transition-property: background-color;

‍transition-duration: 1s;

‍transition-timing-function: linear;‍‍‍

同时使用多个变形

transition:background-color 1s linear,            height 1s linear,            transform 1s linear,            color 1s linear,            width 1s linear;

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

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

转载于:https://my.oschina.net/LeslieMay/blog/614473

HTML前端开发之路——Transition相关推荐

2019年京东PLUS会员前端开发之路总结
来源 | 京东用户体验设计部时光如梭,白驹过隙,2019年转瞬即逝.这一年对于 PLUS 会员项目前端同学来说是坎坷和充实的,如白岩松所说,痛并快乐着.回首望去,异业合作权益的陆续接入,6.18大促 ...
一个文科妹子走上前端开发不归路（干货分享）
当秋风落叶不再让一个文人驻足沉思,那么ta一定拥有了理性思维.当一个人文理思维兼具,那么好奇心一定使生活丰富多彩.好奇心使我走上了编程之路. 在上千行代码历程中,我仿佛悟出了一些东西,并总结了如下经验 ...
前端2018年12月9日前端开发路上的小白心得--励志当个领路人
从小时候的第一本书微软的计算机入门开始,到现在时光一晃20多年过去了,时光荏苒白驹过隙,小时候的看的懵懵懂懂,到现在的走上前端开发之路也是缘分使然,14年的机缘巧合,进入到国内排名前四的互联网公司开始 ...
我是如何走上前端开发这条路并常年保持一线竞争力的
我是怎么走上前端开发这条路? 首先,我是个文科生,大学里只学过vb,觉得计算机编程这东西太玄乎,不是我玩得转的. 后来机缘巧合去做了一家互联网创业公司的HR,阅了上千份程序员的简历,面了上百个不同水平 ...
Web前端开发好学吗？谈谈一位学姐的前端工程师之路
我的第一篇博客....... 我是一名工科女,因高考失利与理想的院校擦肩而过,从而选择了机电专业.毕业后找工作时才发现机电专业的工作并不太适合我.我的父母也支持我转专业求职,但这个过程有时会让我迷茫. ...
一名优秀的Web前端开发工程师的成长之路：如何学习前端开发知识以及书籍推荐
我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀.甚至卓越的WEB前端工程师. 何为:前端工程师? 前端工程师 ...
掌握未来趋势的前端开发成长之路
前端开发成长之路入门 1.WEB 网页基础.编程基础 HTML5+CSS3入门课程内容: ...
35岁的前端开发工程师，未来路在何方？
在中国,35岁不管是对于程序员还是其他行业来说,还记得不知哪看到这么一句话:35岁之后的你,要么选择出众,要么出局. 对程序员来说,35岁就是个转折点,是中年危机.尤其是对于前端程序员来说,压力更大, ...
一只小菜鸟的web前端开发自学之路
今天初步了解了一下Web前端开发,计算机技术这东西就要多用多练,一只菜的不能再菜的小菜鸟开始漫长的自学之路了 web系统前端是指系统中用户接触到的部分. 打开几个不同网站的网页,观察一下,有网页文件的 ...

HTML前端开发之路——Transition

HTML前端开发之路——Transition相关推荐

最新文章

热门文章