大家好,又见面了,我是你们的朋友全栈君。
CSS3 transition实现手风琴效果
最近在项目中遇到了一个需求,需要完成一个手风琴效果的展示,最后通过CSS3 transition
实现了这个效果,下面就分享下实现方法。
效果
首先看下效果:
可以看到,当我们点击toggle
按钮的时候会实现一个带有动画的过渡效果。
transition属性
实现动画效果这要用到了transition
的四个属性,分别是:transition-property
、transition-duration
、transition-timing-function
和transition-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账号...