一、过渡的定义以及基本属性

定义：CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

过渡属性
属性	描述
transition-property	规定应用过渡的 CSS 属性的名称
transition-duration	定义过渡效果花费的时间。默认是 0
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。
transition	复合写法：transition：property duration [delay] [timing-function ],property duration [delay] [timing-function ],….

二、过渡名称、过渡时间、过渡延迟

transition-property 属性的名称: （当指定CSS 属性改变时，过渡效果将开始）
1、all 所有属性都将获得过渡效果( 默认)
2、attr 过渡效果的 CSS 属性名称列表，列表以逗号分隔。
3、none 没有属性会获得过渡效果。
transition-duration 过渡时间：完成过渡效果需要的时间（以秒或毫秒计）
transition-delay 延迟时间：等~（以秒或毫秒计）之后再变化

注意：要实现css过渡，必须包含transition-property和transition-duration

案例1：如下一段动图中，我指定了过渡属性名称为宽度，时间为2s，延时1s。所以当鼠标划过div时，div的宽度逐渐改变，而高度不包含在过渡之内。

三、过渡效果的时间曲线

过渡效果的时间曲线
属性	描述
linear	匀速
ease	（默认值）慢快慢
ease-in	慢入
ease-out	慢出
ease-in-out	慢入慢出
cubic-bezier	[贝塞尔曲线以及其生成地址](https://cubic-bezier.com/)

四、实战纯css打造手风琴图片特效

手风琴图片特效原理解释：这个特效主要运用了css3的伪类以及css3的过渡效果。

首先写出body的框架，将图片放入li里面以便后续伪类操作。
调整wrap、ul、li的宽度高度以及位置。需要注意：wrap宽度满足要求：展示的li总宽度度以及鼠标划上后图片的宽度+剩下四个li的宽、ul宽度度大于5张图片的总宽度、li的宽度必须小于图片的宽度且li还需设置浮动并列在一排。
使用伪类，当鼠标划到ul时候，li的宽度变小。鼠标划到li的时候，被划到的li宽度变为图片的宽度。且需要注意是否满足第2点钟的
wrap宽度满足鼠标划上后图片的宽度+剩下四个li的宽度
使用css3过渡进行美化并且将wrap的超出隐藏，即可完成。

代码下载地址 如果觉得我写的对你有帮助的话，请一键三连。这将会是我日后更新的动力。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手风琴图片特效</title>
</head>
<style>* {margin: 0;padding: 0;}html,body {margin: 0;padding: 0;width: 100%;background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);}#wrap {position: relative;margin: 100px auto;/*宽度满足要求：1、展示的li总长度2、鼠标划上后图片的长度+剩下四个li的长度*/width: 1005px;height: 450px;box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4);overflow: hidden;}#wrap ul {position: relative;/*长度大于5张图片的总长度*/width: 4000px;list-style-type: none;}#wrap ul li {position: relative;float: left;width: 200px;height: 450px;border-left: 1px solid white;box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.4);transition: all 0.5s cubic-bezier(.93, .13, 1, .17);}#wrap ul li a img {display: block;}#wrap ul li .title {position: absolute;top: 400px;left: 0px;width: 800px;height: 50px;background: rgba(0, 0, 0, 0.5);line-height: 50px;}#wrap ul li .title a {padding-left: 10px;color: white;font-size: 20px;font-weight: 500;text-decoration: none;}#wrap ul:hover li {width: 50px;}#wrap ul li:hover {width: 800px;}
</style><body><div id="wrap"><ul><li><div class="title"><a href="#" target="_self">手风琴特效展示</a></div><a href=""><img src="./img/1.jpg" alt="卡通图片" width=800 heiht=450></a></li><li><div class="title"><a href="#" target="_self">手风琴特效展示</a></div><a href=""><img src="./img/2.jpg" alt="卡通图片" width=800 heiht=450></a></li><li><div class="title"><a href="#" target="_self">手风琴特效展示</a></div><a href=""><img src="./img/3.png" alt="卡通图片" width=800 heiht=450></a></li><li><div class="title"><a href="#" target="_self">手风琴特效展示</a></div><a href=""><img src="./img/4.png" alt="卡通图片" width=800 heiht=450></a></li><li><div class="title"><a href="#" target="_self">手风琴特效展示</a></div><a href=""><img src="./img/5.png" alt="卡通图片" width=800 heiht=450></a></li></ul></div>
</body></html>

01-css3动画之过渡详解以及实战纯css打造手风琴图片特效相关推荐

CSS3动画属性 animation详解（看完就会）
CSS3动画属性 animation 文章包含个人理解错误请指出往期文章 [css高级]变量详解轮播图swiper框架的基本使用 [Transform3D]转换详解(看完就会) [css动画] ...
html中怎么做扇形菜单,CSS3实现扇形动画菜单流程详解
这次给大家带来CSS3实现扇形动画菜单流程详解,CSS3实现扇形动画菜单的注意事项有哪些,下面就是实战案例,一起来看一下. 原文章请点击这里简化版完整实例 CSS3扇形动画菜单 *{padding: ...
html中transition默认,CSS3中的Transition详解
W3C标准中对css3的transition这是样描述的:"css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改 ...
iOS动画-CAAnimation使用详解
理解了隐式动画后,显式动画就更加通俗易懂了.区别于隐式动画的特点,显式动画就是需要我们明确指定类型.时间等参数来实现效果的动画.除此之外,我们也可以创建非线性动画,比如沿着任意一条曲线运动等: 我们平 ...
CSS3的@keyframes用法详解:
原文出处: http://www.cnblogs.com/zuihongyan/p/5902541.html CSS3的@keyframes用法详解: 此属性与animation属性是密切相关的,关于 ...
php仿苹果,关于8个超炫酷仿苹果应用的HTML5动画的图文详解
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
html向左箭头样式,详解Bootstrap的纯CSS3箭头按钮样式
简要教程这是一款基于Bootstrap的纯CSS3箭头按钮样式.该按钮通过修改原生Bootstrap的按钮样式,来生成指向左侧或右侧的箭头按钮. [相关视频推荐:Bootstrap教程] 安装可以 ...
html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
android 创建帧动画,Android 逐帧动画创建实例详解
Android 逐帧动画创建实例详解前言: 我们看早期电影的时候,电影通常是一张一张播放,用我们现在专有名词来说,就是一帧帧来,安卓同样有这样动画效果的编排形式. 那么我们先定义逐帧动画xml文件 ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...

01-css3动画之过渡详解以及实战纯css打造手风琴图片特效

过渡详解

一、过渡的定义以及基本属性

二、过渡名称、过渡时间、过渡延迟

三、过渡效果的时间曲线

四、实战纯css打造手风琴图片特效

01-css3动画之过渡详解以及实战纯css打造手风琴图片特效相关推荐

最新文章

热门文章

01-css3动画之过渡详解 以及 实战纯css打造手风琴图片特效

过渡详解

一、过渡的定义以及基本属性

二、过渡名称、过渡时间、过渡延迟

三、过渡效果的时间曲线

四、实战纯css打造手风琴图片特效

01-css3动画之过渡详解 以及 实战纯css打造手风琴图片特效相关推荐

最新文章

热门文章

01-css3动画之过渡详解以及实战纯css打造手风琴图片特效

01-css3动画之过渡详解以及实战纯css打造手风琴图片特效相关推荐