巅云智能建站平台搭建版(创业门户版)火爆上线,终身授权!新增:文章智能采集+全站真静态打包+城市分站+智能小程序+非法词过滤+H5自适应+智能链词等功能功能详情
建站资讯News

CSS3使用transition属性实现过渡效果

0
一佰互联网站建设(www.yinxi.net) 发布时间:2019-04-24 13:44:39 浏览数: 93

属性详解

transition属性目的是让css的一些属性(如background)的以平滑过渡的效果出现。它是一个合并属性,是由以下四个属性组合而成:

  • transition-property:设置应用过渡的CSS属性,如background。
  • transition-duration:设置过渡效果花费的时间。默认是 0。
  • transition-timing-function:设置过渡效果的时间曲线。默认是 "ease"。
  • transition-delay:规定过渡效果何时开始。默认是 0。

示例:

 button{    transition: background 1s;    -webkit-transition: background 1s; /* Safari */ }

定义transition属性时,transition-property和transition-duration是必选,其他两个为可选。

transition-property和transition-duration

transition-property用来指定应用过渡效果的CSS属性,这些属性包括(可能不全):

  • width
  • height
  • color
  • background (color, image, position)
  • transform (in the next post)
  • border (color, width)
  • position (top, bottom, left, right )
  • text (size, weight, shadow, word-spacing)
  • margin
  • padding
  • opacity
  • visibility
  • z-index
  • all

transition-duration属性用来设置指定属性的过渡效果花费时间,可以是秒(s)或者毫秒(ms)。

transition-delay和transition-timing-function

transition-delay用来设置过渡效果开始的时间,默认为0,可以是秒(s)或者毫秒(ms)。如果transition-delay是负数,表示过渡效果提前开始。

transition-timing-function用来设置过渡的效果,这些效果包括:

  • ease - 开始慢,中间快,结束慢
  • ease-in - 渐入效果,慢入快出
  • ease-out - 渐出效果,快入慢出.
  • ease-in-out - 开始慢和结束慢
  • cubic-bezier(n,n,n,n) - 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

示例:

 button{   transition: background 1s ease-in-out 2s;   -webkit-transition: background 1s ease-in-out 2s; /* Safari */ }

多属性

对于多个属性,各个属性的效果以逗号隔开:

  button{     transition: background 1s ease-in-out 2s, width 2s linear;     -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */   }

兼容性

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

触发

需要注意的是,过渡效果是需要之前已经定义好了属性,过渡效果通过触发来应用,比如:hover, :focus, and :active等。

总结

以上所述是小编给大家介绍的CSS3使用transition属性实现过渡效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网页设计网站的支持!

一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

上一篇:纯CSS实现radio和checkbox实现效果示例
下一篇: CSS模仿遥控器按钮
[返回新闻列表]

相关新闻more

26
12月
58同城就是一个彻彻底底的O2O网站

团购作为一种典型的O2O(Online To Offline)应用大行其道之后,分类信息网站如获至宝,开始触类旁通起来。“这个季节去三亚旅游... >>详情

27
04月
php bootstrap实现简单登录

本文实例为大家分享了php bootstrap实现简单登录的方法,供大家参考,具体内容如下所有文件 记住是获取name键值对 from 里面... >>详情

27
03月
抖音怎样做原创,4个步骤教你这样蹭热点做原创

简介:抖音短视频运营如何利用热点来做原创内容,大家都知道,一个人想火,蹭热点是火的最快的,因为高质量的内容不是人人都可以做到的,但是我们既然... >>详情

03
05月
“百度葡语搜索引擎”的十个关键词

在此之前,百度在国外市场推广 Hao123、浏览器等产品,在硅谷、新加坡、东京等地开设研发机构,已经给了我们关于百度全力走出国门的充分暗示。... >>详情

高端网站建设

美工兼顾SEO,为企业电子商务营销助力!

电话:

023-85725751
建站

产品

域名注册 虚拟主机 云服务器 企业邮局
智能建站 APP打包 微站/小程序 创业平台
网站推广 媒体营销 智能采集 AI机器人
400电话 短信营销 店销机器人
私人定制 门户网站