当前位置:首页 > 前端技术 > 5行代码 超级简单 用css做好看的动画 实现背景颜色渐变过渡,宽高动态过渡

5行代码 超级简单 用css做好看的动画 实现背景颜色渐变过渡,宽高动态过渡

2022年11月09日 17:43:15前端技术60

经常我们需要改变一个元素的样式时候,直接过渡会十分生硬,如果加上过渡效果,变换的过程柔和许多看着也就更好看了。

废话不多说,先上效果图:

5行代码 超级简单 用css做好看的动画 实现背景颜色渐变过渡,宽高动态过渡 _ JavaClub全栈架构师技术笔记

 

上面的效果图的演示过程:

1.首先是展示没有动画的效果

2.然后是div方块所有属性的值,在变化的时候都有动画的效果

3.再接着是只有背景颜色在改变的时候,有动画的效果

4.最后是只有长度改变的时候,有动画的效果,其他属性改变没动画效果

 

上代码:

<style>
.box {width:100px;height:100px;margin:50px auto;background-color:red;transition:all 1s;}
.box:hover {background-color:yellow;height:200px;width:200px}
</style>
<div class="box"></div>

 

动画的关键在于第二行的最后一个属性:transition:all 1s;

这个属性表示要有过渡的属性,和过渡的时间,比如需要长度有1秒的过渡时间,那就是:transition:height 1s;如果需要背景变化时有2秒的过渡时间,那就是:transition:background-color 2s;

然后只要使用了该样式的元素,在样式有改变的时候,就会按着transition值中的对应属性和时间来过渡。

 

 

如果我的文章对您有帮助,就请客官给个赞吧

5行代码 超级简单 用css做好看的动画 实现背景颜色渐变过渡,宽高动态过渡 _ JavaClub全栈架构师技术笔记

THE END!

 

 

 

作者:fucaijin
来源链接:https://blog.csdn.net/fucaijin/article/details/103589483

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

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


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

标签: css
分享给朋友: