当前位置:首页 > 前端技术 > CSS 中 transition 的使用(实现过渡效果)

CSS 中 transition 的使用(实现过渡效果)

2022年08月05日 11:30:54前端技术4

首先给出 <body> 和 <style> 中的基础代码

<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
<style>
.box1 {
    width: 500px;
    height: 500px;
    background-color: yellowgreen;
}

.box1 div {
    width: 100px;
    height: 50px;
}

.box2 {
    background-color: aqua;
    margin-bottom: 100px;
}

.box3 {
    background-color: antiquewhite;
}

.box1:hover div {

}

基础代码实现的效果如下图:

(接下来将使用 box1 与 box2 作对比,容易看出区别)

CSS 中 transition 的使用(实现过渡效果) _ JavaClub全栈架构师技术笔记

  接下来讲解一下 transition 的属性:

1、transition-property 用于指定要执行过渡的属性

            - 多个属性之间使用 ',' 隔开

            - 如果所有属性都需要过渡,则使用 all 关键字

            - 大部分属性都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡

2、transition-duration 用于指定过渡效果的持续时间

            - 时间单位: s 秒 和 ms 毫秒

以上两个属性必须同时给定,否则是不会出现过渡效果的,下面给出例子:

        我们修改 CSS 代码,将 .box2 与 .box1:hover div 的代码改为:

.box2 {
    background-color: aqua;
    margin-bottom: 100px;
    transition-property: width, height;
    transition-duration: 2s, 1000ms;
}
    
.box1:hover div {
    width: 200px;
    height: 100px;
}

 修改之后的效果为:

(width 对应 2s ,height 对应 1000ms)

CSS 中 transition 的使用(实现过渡效果) _ JavaClub全栈架构师技术笔记

 3、transition-timing-function 表示过渡的时序函数

            - 指定过渡的执行方式

            - 可选值:

                ease 默认值,慢速开始,先加速,再减速

                linear 匀速运动

                ease-in 加速运动

                ease-out 减速运动

                ease-in-out 先加速 后减速

                cubic-bezier() 来制定时序函数(贝塞尔曲线)

                    - https://cubic-bezier.com ,这是一个贝塞尔曲线的网址,可以自己拖动曲线,

                        获取想要的结果,有兴趣的小伙伴可以试试

                steps() 分步执行过渡效果

                    - 第一个参数表示分几步

                    - 第二个参数:

                        start 在时间开始时就执行过渡

                        end 在时间结束时执行过渡(默认值)

例子:

        我们在最基础的代码上进行修改:

.box2 {
    background-color: aqua;
    margin-bottom: 100px;
    transition-property: margin-left;
    transition-duration: 2s;
}
.box3 {
    background-color: antiquewhite;
    transition-property: margin-left;
    transition-duration: 2s;
    transition-timing-function: linear;
}
.box1:hover div {
    margin-left: 400px;
}

效果如下:

CSS 中 transition 的使用(实现过渡效果) _ JavaClub全栈架构师技术笔记 

(其余的 ease-in , ease-out , ease-in-out , 就不分别演示了)

这是使用 cubic-bezier() 的例子,可以得到很好玩的效果: 

(将 .box3 的 transition-timing-function 修改为为:)

.box3 {
    transition-timing-function: cubic-bezier(.13,1.51,.82,-0.59);
}

效果如下:

CSS 中 transition 的使用(实现过渡效果) _ JavaClub全栈架构师技术笔记

steps() 则是分步进行,我们同样修改 .box3 的 transition-timing-function:

.box3 {
    transition-timing-function: steps(3,start);
}

效果如下:

(start 与 end 的区别则是执行时间,假设过渡时间 transition-duration:10s ,分为两步执行 steps(2,end),则会在数完第一个五秒才开始移动,若为 steps(2,start),则在最开始就会开始移动)

CSS 中 transition 的使用(实现过渡效果) _ JavaClub全栈架构师技术笔记

 4、transition-delay: 过渡效果的延迟,等待一段时间后再执行过渡

修改 CSS 代码:

.box3 {
    background-color: antiquewhite;
    transition-property: margin-left;
    transition-duration: 2s;
    transition-delay: 1s;
}

效果如下:

CSS 中 transition 的使用(实现过渡效果) _ JavaClub全栈架构师技术笔记

 最后则是最常用的 transition :

transition 可以同时设置过渡相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟时间(前面说的一堆乱七八糟的属性都可以用这个属性来简写

修改 CSS 代码:

.box3 {
    background-color: antiquewhite;
    /* transition-property: margin-left;
    transition-duration: 2s;
    transition-delay: 1s; */
    transition: margin-left 2s 1s;
}

(效果与上一个例子相同,故略)

当然也可以同时指定多个属性,对应不同的时间,也可以添加时序函数:

.xxx{
    transition: width,height 2s,1s 1s steps(2,end);
}

作者:MaJiFu..
来源链接:https://blog.csdn.net/weixin_45631453/article/details/120884144

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17579.html

标签: css
分享给朋友:

“CSS 中 transition 的使用(实现过渡效果)” 的相关文章

css中的@media用法总结

1、head标签中引入 //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="st...

css去除html中a标签的默认样式

html中a标签的默认样式实在是太丑,这简直是对前端程序猿的一种蹂躏!!!所以通常情况下需要去除a标签的默认样式。 以下代码是在a标签的不同状态下去除默认的下划线,如果要修改颜色、字体等,在对应位置添加css样式即可。 /*去除a...

什么是HTML和CSS

什么是HTML和CSS? HTML的定义: 首先来说HTML,HTML中文称为超文本标记语言,从语义上来说,它只是一种是一种标识性的语言,并不是一种编程语言。所以在提及其作用时,只能从语义方面去想,而不能从样式上去想。它其中有许许多多的标签,...

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

css一个标签添加多个class的样式顺序问题

css一个标签添加多个class的样式顺序问题

在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下: /*div标签原有样式*/ .nav>.navlogin, .navregist {...

CSS将img图片填满父容器div,自适应容器大小

当一个页面中引入多张图片时候,会碰到图片尺寸不一致,单要求显示成一致的大小,我们直接设置图片尺寸会导致图片变形,这就是我们遇到的问题,看下解决方法: <div> <img src="引入的图片地址" alt=""> </div&...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

js修改css样式的方法,js如何设置css样式?js修改css样式的方法

js如何设置css样式?本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就给大家介绍使用javascript是如果设置css样式的。 1、直接设置样式(内联样式) 使...

css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法

1.只针对底部高度固定的情况,不能解决底部高度不固定的情况, 原理:主要内容放在page-main里面,page-container最小高度100%(注意这里html,body高度也要设为100%),position为relative。footer的position为abs...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。