A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© gz_xudada 中级黑马   /  2017-12-5 16:48  /  1299 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 gz_xudada 于 2017-12-5 16:56 编辑

1. css3中的E:hover选择器
E代表element元素的意思
hover 悬停
E:hover 就是当鼠标悬停在E元素上使用的样式
测试代码:


测试效果:





2. css3过渡属性
2.1. transition-property
规定应用过渡的 CSS 属性的名称
取值:
none                没有属性会获得过渡效果
all                        默认值,所有属性都将获得过渡效果
property                定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔


2.2. transition-duration
定义过渡效果花费的时间(规定完成过渡效果需要花费的时间)
取值:
时间,单位是毫秒,默认值是0,意味不会有效果


2.3. transition-timing-function        
规定过渡效果的时间曲线。



描述
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 之间的数值。


2.4. transition-delay
规定过渡效果何时开始(在过渡效果开始前等待 多少 时间)
取值:
time,默认是 0,单位是秒或者毫秒


2.5. transition
简写属性,用于在一个属性中设置四个过渡属性。
语法:
transition: property duration timing-function delay;

示例代码:




测试效果:






下一遍将为大家分享css3的变形属性

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马