热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

css3过渡属性怎么用

今天小编给大家分享一下css3过渡属性怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考

今天小编给大家分享一下css3过渡属性怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

css3过渡采用的属性有:1、transition;2、transition-property;3、transition-duration;4、transition-timing-function;5、transition-delay。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点,必须规定两项内容:

  • 指定要添加效果的CSS属性

  • 指定效果的持续时间。

通过过渡transition属性,可以让web前端开发人员不需要Javascript就可以实现简单的动画交互效果,要实现这一点,必须实现一项内容,即指定效果的持续时间。

css3过渡属性

属性描述CSS
transition简写属性,用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3
transition-delay规定过渡效果何时开始。默认是 0。3

复合属性

过渡transition的这四个子属性只有是必需值且不能为0。其中,都是时间。当两个时间同时出现时,第一个是,第二个是;当只有一个时间时,它是,而为默认值0

transition:  ||  || 
 || 

[注意]transition的这四个子属性之间不能用逗号隔开,只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值,多值部分稍后介绍);而空格隔开的代表不同属性的四个关于过渡的子属性。

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            transition: 2s;/*代表持续时间为2s,延迟时间为默认值0 */
            /* transition: 1s 2s; 代表持续时间为1s,延迟时间为2s */
        }
        .test:hover {
            width: 300px;
        }
    

css3过渡属性怎么用

相关子属性

1、transition-property

transition-property属性指定CSS属性的nametransition效果(transition效果时将会启动指定的CSS属性的变化)。none: 没有指定任何样式,all: 默认值,表示指定元素所有支持transition-property属性的样式。: 可过渡的样式,可用逗号分开写多个样式。

注意:始终指定 transition-duration属性,否则持续时间为0,transition不会有任何效果。

1)、可过渡的样式

不是所有的CSS样式值都可以过渡,只有具有中间值的属性才具备过渡效果 ,具体如下

颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient
        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            background-color: lightblue;
            transition: width 2s, background-color 2s ease 0.5s;
            /*代表width持续时间为2s,延迟时间为默认值0;
              background-color持续时间2s 延迟0.5s */
        }

        .test:hover {
            width: 300px;
            background-color: indianred;
        }

效果图:

css3过渡属性怎么用

2、transition-duration

transition-duration属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认值:0s。

[注意]该属性不能为负值 。

[注意]若该属性为0s则为默认值,若为0则为无效值。所以必须带单位 。

[注意]该值为单值时,即所有过渡属性都对应同样时间;该值为多值时,过渡属性按照顺序对应持续时间 。

3、transition-timing-function

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

4、transition-delay

transition-delay属性指定何时将开始切换效果,值是指以秒为单位(S)或毫秒(ms)。默认值:0s。

[注意]该属性若为负值,无延迟效果,但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0,则无过渡效果;若该设定值大于0,则过渡元素从该设定值开始完成剩余的过渡效果  [注意]若该属性为0s则为默认值,若为0则为无效值。所以必须带单位 。

[注意]该值为单值时,即所有过渡属性都对应同样时间;该值为多值时,过渡属性按照顺序对应持续时间 。

过渡阶段

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            transition: 3s;/* 设置反向状态 */
        }
        .test:hover {
            width: 300px;
            transition: 100ms;
        }

效果:

css3过渡属性怎么用

触发方式

一般地,过渡transition的触发有三种方式,分别是伪类触发、媒体查询触发和Javascript触发。其中常用伪类触发包括:hover、:focus、:active等 。

/* 把浏览器的宽度拖动到小于1000px时触发 */
@media (max-width: 1000px){
    .test{
        width: 500px;
    }
}

以上就是“css3过渡属性怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程笔记行业资讯频道。


推荐阅读
  • MVC框架下使用DataGrid实现时间筛选与枚举填充
    本文介绍如何在ASP.NET MVC项目中利用DataGrid组件增强搜索功能,具体包括使用jQuery UI的DatePicker插件添加时间筛选条件,并通过枚举数据填充下拉列表。 ... [详细]
  • 本文将详细介绍如何实现类似于CSDN博客的页面返回顶部功能,通过调整返回速度和图标显示条件,使用户体验更加流畅。适合前端开发者参考学习。 ... [详细]
  • 本文探讨了在使用Apache Flink向Kafka发送数据过程中遇到的事务频繁失败问题,并提供了详细的解决方案,包括必要的配置调整和最佳实践。 ... [详细]
  • 拖拉切割直线 ... [详细]
  • 本文介绍了如何在Spring框架中配置和使用定时任务,包括初始化配置和动态启动定时器的方法。通过示例代码展示了如何利用Spring的TaskScheduler接口来创建和管理定时任务。 ... [详细]
  • 本文档提供了详细的MySQL安装步骤,包括解压安装文件、选择安装类型、配置MySQL服务以及设置管理员密码等关键环节,帮助用户顺利完成MySQL的安装。 ... [详细]
  • Qt6 QML 图像绘制与剪裁
    本文介绍了如何在Qt6 QML的画布中加载和绘制图像,并详细说明了图像剪裁的实现方法。 ... [详细]
  • ECharts图表绘制函数集
    本文档提供了使用ECharts库创建柱状图、饼图和双折线图的JavaScript函数。每个函数都详细列出了参数说明,并通过示例展示了如何调用这些函数以生成不同类型的图表。 ... [详细]
  • 本文探讨了Lua中元表和元方法的使用,通过具体的代码示例展示了如何利用这些特性来实现类似C语言中的运算符重载功能。 ... [详细]
  • Web网络基础
    目录儿1使用HTTP协议访问Web2HTTP的诞生2.1因特网的起源2.2互联网、因特网与万维网2.3万维网与HTTP3网络基础TCPIP3.1TCPIP协议族3.2TCPIP的分 ... [详细]
  • 本文介绍了一种算法,用于在一个给定的二叉树中找到一个节点,该节点的子树包含最大数量的值小于该节点的节点。如果存在多个符合条件的节点,可以选择任意一个。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 实现一个具有动画效果的手风琴组件,包括代码示例和实现原理。 ... [详细]
  • 本文探讨了在Node.js环境中如何有效地捕获标准输出(stdout)的内容,并将其存储到变量中。通过具体的示例和解决方案,帮助开发者解决常见的输出捕获问题。 ... [详细]
  • 酷家乐 Serverless FaaS 产品实践探索
    本文探讨了酷家乐在 Serverless FaaS 领域的实践与经验,重点介绍了 FaaS 平台的构建、业务收益及未来发展方向。 ... [详细]
  • 作为一名CSS初学者,我在博客园中尝试通过CSS美化页面,特别是为超链接添加图标,以提升阅读体验。本文将分享如何使用CSS和字体图标库来实现这一功能。 ... [详细]
author-avatar
三砖先生
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有