04.CSS3 transition属性及5个小案例分享

一、介绍

过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果,经常和 :hover 一起 搭配使用。

二、语法

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

transition: property duration timing-function delay;

三、属性

1.property

想要变化的 css 属性,宽度、高度、背景颜色、内外边距都可以。

过渡不能将display:none;过渡到display:block;因为过渡属性只能值变,不能改变单词,如果想让隐藏的元素过渡到显示,可以将opacity: 0;过渡到opacity: 1; 。

如果想要所有的属性都变化过渡, 写一个all 就可以。

描述
none(默认) 没有属性会获得过渡效果
all 所有属性都将获得过渡效果
property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔

2.duration

默认值是 0,意味着和没加过渡一样瞬间变化。

time值单位是秒 (必须写单位) 比如 0.5s / .5s

描述
time 规定完成过渡效果需要花费的时间(以秒或毫秒计)。

3.timing-function

定义过渡的运动曲线,默认是ease,可以省略

描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)
ease(默认) 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1)
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1)
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1)
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

04.CSS3 transition属性及5个小案例分享_第1张图片

4.delay

用于定义运动何时开始,单位是秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)

描述
time 规定在过渡效果开始之前需要等待的时间,以秒或毫秒计。

四、案例

1.让一个透明的盒子放大位移加阴影。其中用:hover有小问题




    
    
    Document
    




    
小艾同学

:hover时候出现的抖动问题:
04.CSS3 transition属性及5个小案例分享_第2张图片

2.仿小米logo移动效果




    
    
    小米logo
    



    



04.CSS3 transition属性及5个小案例分享_第3张图片

3.当鼠标经过时给盒子加阴影,有立体感,并在底部弹出一个隐藏的盒子




    
    
    Document
    



    
  • 1
  • 2
  • 3
  • 4

04.CSS3 transition属性及5个小案例分享_第4张图片

4.商品下拉列表




    
    
    Document
    



    



04.CSS3 transition属性及5个小案例分享_第5张图片

分享完毕,不妥之处,敬请批评指正,谢谢大家!

你可能感兴趣的:(分享前端知识)