01-css3之过渡
一、介绍
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果，经常和 :hover 一起 搭配使用。
二、语法
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
transition: property duration timing-function delay;
三、属性
1.property
想要变化的 css 属性，宽度、高度、背景颜色、内外边距都可以。
过渡不能将display:none;过渡到display:block;因为过渡属性只能值变，不能改变单词，如果想让隐藏的元素过渡到显示，可以将opacity: 0;过渡到opacity: 1; 。
如果想要所有的属性都变化过渡， 写一个all 就可以。
| 值 | 描述 |
|---|---|
| none(默认) | 没有属性会获得过渡效果 |
| all | 所有属性都将获得过渡效果 |
| property | 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔 |
2.duration
默认值是 0，意味着和没加过渡一样瞬间变化。
time值单位是秒 (必须写单位） 比如 0.5s / .5s
| 值 | 描述 |
|---|---|
| time | 规定完成过渡效果需要花费的时间（以秒或毫秒计）。 |
3.timing-function
定义过渡的运动曲线，默认是ease，可以省略
| 值 | 描述 |
|---|---|
| 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) |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1) |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值 |
4.delay
用于定义运动何时开始，单位是秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
| 值 | 描述 |
|---|---|
| time | 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。 |
四、案例
1.让一个透明的盒子放大位移加阴影。其中用:hover有小问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
opacity: 0;
background-color: #f34;
box-shadow: 0 0 0 0 rgba(0, 0, 0, .1);
/* transition:要过渡的属性 花费时间(单位s 秒) 运动曲线(默认ease 常用linear匀速) 何时开始(延迟 单位s，默认0) */
/* transtion不能使display:none过渡到display：block */
/* 只能值变,不能变单词 */
transition: all 1s;
}
/* 让盒子移动位置时使用hover会有小问题 */
/* 当盒子左边线移动到鼠标上之后，盒子会默认鼠标已经不再盒子上了，会往回恢复原位 */
/* 当盒子往回走时又经过了鼠标，即触发位移效果，盒子左边线再次经过移动到鼠标时，又会重复上面的操作，所以出现抖动。 */
/* div:hover */
div:active {
/* opactiy:可以让盒子和里面的内容变透明 */
/* 取值0-1的小数，0是透明，1是完全显示 */
opacity: 1;
top: 100px;
left: 100px;
width: 150px;
height: 150px;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .2);
}
</style>
</head>
<body>
<div>小艾同学</div>
</body>
</html>
:hover时候出现的抖动问题：
2.仿小米logo移动效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米logo</title>
<style>
* {
margin: 0;
padding: 0;
}
.logo {
/* 溢出隐藏 */
overflow: hidden;
position: relative;
width: 55px;
height: 55px;
background-color: #ff6700;
margin: 100px auto;
}
.logo a {
position: absolute;
top: 0;
left: -55px;
/* a里面放两个盒子，所以宽度是logo的200% */
width: 200%;
height: 100%;
/* 谁变化给谁加过渡 */
transition: all .2s;
}
a::before,
a::after {
content: "";
float: left;
/* 小盒子应该和logo一样宽100%，单他的父亲a是200%，所以他是父亲a的一半 */
width: 50%;
height: 100%;
background: url(images/mi-home.png) center;
}
a::after {
background: url(images/mi-logo.png) center;
}
.logo:hover a {
/* 鼠标经过时a，右移动小盒子的宽度 */
left: 0px;
}
</style>
</head>
<body>
<div class="logo">
<a href="#"></a>
</div>
</body>
</html>
3.当鼠标经过时给盒子加阴影，有立体感，并在底部弹出一个隐藏的盒子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.dad {
width: 1200px;
margin: 100px auto;
}
li {
list-style: none;
}
li {
/* 溢出隐藏，让隐藏的盒子看不见 */
overflow: hidden;
position: relative;
float: left;
width: 230px;
height: 300px;
background-color: #aaa;
margin: 20px;
transition: all .5s;
}
.dad li::after {
content: "隐藏的盒子";
position: absolute;
bottom: -80px;
left: 0;
width: 100%;
height: 80px;
background-color: #f34;
/* 让谁过渡就给谁加 */
transition: all 1s;
}
.dad li:hover {
/* 让li向上走走，更有立体感 */
margin-top: 10px;
/* 给li加阴影 */
box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.dad li:hover::after {
/* 鼠标经过li时，li::after向上移动80 */
bottom: 0;
}
</style>
</head>
<body>
<div class="dad">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
4.商品下拉列表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.dropdown {
/* 隐藏溢出的文字不能给父盒子加，因为dd相对于父盒子永远溢出，鼠标经过时 也不会显示 */
/* overflow: hidden; */
width: 150px;
height: 45px;
}
.dt {
width: 100%;
height: 100%;
line-height: 45px;
text-align: center;
background-color: #f34;
}
.dd {
/* dd高度为0时文字溢出隐藏 */
overflow: hidden;
width: 100%;
/* height: 300px; */
/* 先让高度为0 */
height: 0;
background-color: pink;
transition: all .3s;
}
/* 鼠标经过dropdown时候，让dd下拉 */
.dropdown:hover .dd {
height: 300px;
}
</style>
</head>
<body>
<div class="dropdown">
<div class="dt">商品分类</div>
<div class="dd">
<ul>
<li>商品1</li>
<li>商品2</li>
<li>商品3</li>
<li>商品4</li>
<li>商品5</li>
<li>商品6</li>
<li>商品7</li>
<li>商品8</li>
</ul>
</div>
</div>
</body>
</html>
分享完毕，不妥之处，敬请批评指正，谢谢大家！
01-css3之过渡的更多相关文章
- CSS3的过渡和转换
CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...
- css3的过渡、动画、2D、3D效果
浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...
- CSS3(2)--- 过渡(transition)
CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...
- 牛逼的css3:动态过渡与图形变换
写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...
- CSS3之过渡Transition
CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...
- CSS笔记（十三）CSS3之过渡
参考:http://www.w3school.com.cn/css3/css3_transition.asp 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元 ...
- CSS3 transition过渡
transition 属性是一个简写属性,用于设置四个过渡属性: transition: property duration timing-function delay; transition-pro ...
- css3 转换 过渡 及动画
转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...
- CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀
CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...
- CSS3 Transition 过渡
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动 ...
随机推荐
- 记录一次线上bug
记录一次线上bug,总的来说就是弱网和重复点击.特殊值校验的问题. 测试场景一: 在3g网络或者使页面加载速度需要两秒左右的时候,输入学号,提交学生的缴费项目,提交完一个 学生的缴费后, ...
- hdu1728 逃离迷宫bfs
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1728/ 关于广度优先搜索的第一篇题解.广度优先搜索,就是状态树的层次遍历,一层一层的搜索,直到搜索到目标状态为止 ...
- ML-Agents（三）3DBall例子
ML-Agents(三)3DBall例子 前一周忙着公司的考试,都没有怎么学新的,今天补上~ 之后的记录,我准备先只研究官方的示例,主要是把研究过程中的疑惑和想法记下来.首先我先补充一下如何利用GPU ...
- vscode快速生成html模板（vscode快捷键"!"生成html模板）
问题: 在vscode中新建test.html, 内容是空白的,输入"!",然后按tap键 ,没有生成常见的html模板,也就是如下: 输入! html html:5 DOCTYP ...
- PAT-B 1003. 我要通过！(20) Java版
"答案正确"是自动判题系统给出的最令人欢喜的回复.本题属于PAT的"答案正确"大派送 -- 只要读入的字符串满足下列条件,系统就输出"答案正确&quo ...
- 面向对象(OO)第一阶段学习总结
前言:对OO本阶段作业情况说明 本阶段一共完成三次作业,第一次主要是在主方法里面进行编程,也就是和之前C差不多,而随着学习的深入,慢慢了解到面向对象与面向过程的区别.作业的难度也在慢慢增大,后两次都用 ...
- IC设计流程概述
芯片设计分为前端设计和后端设计,前端设计(也称逻辑设计)和后端设计(也称物理设计)并没有统一严格的界限,涉及到与工艺有关的设计就是后端设计. Front-end design flow 1. 规格制定 ...
- Java 判断 循环
一.优先级 1.1 先判断5>3,true 6>4 true;然后true==true ,最后是true; 1.2 6>5,true;而true和4无法比较.所以该判断出错: 1.3 ...
- el-table分页展示数据
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" :show- ...
- Gin框架04：趣谈参数绑定与校验
导读 在第二节,我们学习了Gin框架的路由定义与参数接收,今天应一位同学的要求,来讲解一下参数的绑定与校验. 为什么校验参数? 本不必抛出这个问题的,但顾及到初出茅庐的同学,这里解释一下. 假设做一个 ...