CSS3 transition实现手风琴效果「建议收藏」

CSS3 transition实现手风琴效果「建议收藏」CSS3transition实现手风琴效果最近在项目中遇到了一个需求,需要完成一个手风琴效果的展示,最后通过CSS3transition实现了这个效果,下面就分享下实现方法。效果首先看下效果:可以看到,当我们点击toggle按钮的时候会实现一个带有动画的过渡效果。transition属性实现动画效果这要用到了transition的四个属性,分别是:transition-prope…

大家好,又见面了,我是你们的朋友全栈君。

CSS3 transition实现手风琴效果

最近在项目中遇到了一个需求,需要完成一个手风琴效果的展示,最后通过CSS3 transition实现了这个效果,下面就分享下实现方法。

效果

首先看下效果:
在这里插入图片描述
可以看到,当我们点击toggle按钮的时候会实现一个带有动画的过渡效果。

transition属性

实现动画效果这要用到了transition的四个属性,分别是:transition-propertytransition-durationtransition-timing-functiontransition-delay,下面简单介绍下四个属性。

transition-property:指定需要过渡的CSS属性。并不是所有属性都能过渡的,只有能数字量化的CSS属性才能过渡,常见的有width,height,right,left,bottom,top,opacity,color等,或者可以直接设为all,表示所有属性都会获得过度效果。
transition-duration:指定过渡所需要的时间。
transition-delay:延迟开始过渡的时间,默认值是0,表示不延迟,立即开始过渡动作。
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))。
cubic-bezier(n,n,n,n) cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。。

可以看到,除了指定的属性之外,还可以通过cubic-bezier(n,n,n,n)自定义平滑曲线,贝塞尔曲线的生成比较复杂,我们可以借助于缓动函数速查表或者cubic-bezier等在线工具查看动画效果。

代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 transition实现手风琴特效</title>
</head>
<body>
<div class="slider" id="slider">
<button class="toggle-btn" onclick="document.getElementById('slider').classList.toggle('toggle');">toggle</button>
</div>
<style> .slider { 
 max-width: 400px; background: #2a85a0; height: 400px; width: 400px; position: relative; /* Webkit内核浏览器:Safari and Chrome*/ -webkit-transition-property: all; -webkit-transition-duration: .5s; -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); /* Mozilla内核浏览器:firefox3.5+*/ -moz-transition-property: all; -moz-transition-duration: .5s; -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); /* Opera*/ -o-transition-property: all; -o-transition-duration: .5s; -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); /* IE9*/ -ms-transition-property: all; -ms-transition-duration: .5s; -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .slider.toggle { 
 max-width: 10px; } .toggle-btn { 
 position: absolute; top: 0; color: #ffffff; right: -50px; width: 50px; height: 20px; background: #5a7ef1; } </style>
</body>
</html>

下面的是我的公众号二维码图片,欢迎关注。
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158391.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Vue.js 快速入门

    Vue.js 快速入门

  • Pycharm中解决Unresolved Reference问题

    Pycharm中解决Unresolved Reference问题**PyCharm中解决UnresolvedReference问题**之前看到很多博主解决遇到的pycharm中UnresolvedReference问题,作为一个萌新,我在第一次下载pycharm的时候并没有遇到这个问题,但是最近几天重新下载了pycharm之后,打开之前写的代码,出现了问题,下面分享给大家我的解决方法:进入PyCharm->File->Setting->ProjectInterpreter在最开始的时候,打开ProjectInterpreter,下

  • csdn怎么查看自己的积分(手机号积分怎么查)

    这里直接给出地址:查看CSDN积分会自动跳转到自己的积分信息页面参考:https://blog.csdn.net/wu387894541/article/details/106994289/

  • 云计算解决的主要问题_云数据中心的特征有哪些

    云计算解决的主要问题_云数据中心的特征有哪些有关数据中心的建设问题,不同行业所面临建设问题也是参差不齐,对于传统制造业而言盲目的讨论大数据应用似乎有些空中楼阁,依靠实际经验来发言似乎更有说服力。有关数据中心的建设问题,不同行业所面临建设问题也是参差不齐,对于传统制造业而言盲目的讨论大数据应用似乎有些空中楼阁,依靠实际经验来发言似乎更有说服力。按照原有的组织和业务结构,应用系统是省市两级部署,但随着发展慢慢地向省局集中部署。看似小小的变化导致…

  • 多线程面试题(值得收藏)「建议收藏」

    多线程面试题(值得收藏)「建议收藏」史上最强多线程面试47题(含答案),建议收藏金九银十快到了,即将进入找工作的高峰期,最新整理的最全多线程并发面试47题和答案总结,希望对想进BAT的同学有帮助,由于篇幅较长,建议收藏后细看~1、并发编程三要素?1)原子性原子性指的是一个或者多个操作,要么全部执行并且在执行的过程中不被其他操作打断,要么就全部都不执行。2)可见性可见性指多个线程操作一个共享变量时,其中一个线程对变量进行修…

  • fstream与sstream

    fstream与sstream#include是C++的预编译语句,作用是包含对应的文件,在这里是包含C++的STL头文件fstream。在包含了这个文件后,就可以使用fstream中定义的类及各种成员函数了。fstream是C++STL中对文件操作的合集,包含了常用的所有文件操作。在C++中,所有的文件操作,都是以流(stream)的方式进行的,fstream也就是文件流filestream。最常用的两种操作…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号