CSS3(2)--- 过渡(transition)

一、概念

1、什么是过渡

通俗理解 是从一个状态 渐渐的过渡到 另外一个状态。

比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200px,如果直接从100px变化到200px。从视觉上看去并不友好。我们更喜欢看到的是平滑的过渡。

2、浮动的语法

属性语法格式

transition: 要过渡的属性  花费时间  运动曲线  何时开始;

// 如果有多组属性变化，还是用逗号隔开。前两个属性必须写。后两个可以不写。运动曲线默认匀速。开始时间默认0秒。

属性值

注意

- 如果想要所有的属性都变化过渡， 写一个all 就可以

- transition-duration 花费时间 单位是 秒 s （这个秒是一定需要的）

- 运动曲线 默认是 ease

- 默认是 0s 立马开始

- 过渡写到本身上 谁做过渡动画，写到谁身上(下面例子说明)

运动曲线示意图

二、示例

1、示例一

效果

代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>css3过渡</title>

	<style>

	div {

		width: 100px;

		height: 100px;

		background-color: pink;

		/*transition: width 0.5s ease 0s, height 0.3s; 多组属性用逗号分隔*/

		transition: all 1s; /*  这里过渡是当前div，按照谁做过渡动画，写到谁身上，所以这里要写在这里*/

	}

	div:hover {

		width: 400px;

		height: 300px;

	}

	</style>

</head>

<body>

	<div></div>

</body>

</html>

2、示例二

效果

代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>CSS过渡</title>

	<style>

	div {

		width: 183px;

		height: 130px;

		border: 1px solid red;

		overflow: hidden;  /*多余部分隐藏*/

	}

	div img {

		width: 193px;

		height: 130px;

		transition: all 0.4s; /*所以变化，过渡时间0.4秒*/

	}

	div:hover img {

		margin-left: -10px;  /*移动*/

	}

	</style>

</head>

<body>

	<div>

		<img src="1.jpg" alt="">

	</div>

</body>

</html>

3、示例三

效果

代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>css过渡</title>

	<style>

	* {

		margin: 0;

		padding: 0;

	}

	li {

		list-style: none;

	}

	.subnav {

		margin: 100px auto;

		width: 20px;

	}

	.subnav li {

		width: 20px;

		height: 20px;

		margin: 3px 0;

		background-color: pink;

		position: relative;

	}

	.subnav div {

		position: absolute;  /*子绝父相*/

		right: 0;

		top: 0;

		height: 20px;

		width: 0;

		background-color: purple;

		transition: all 0.6s;

		z-index: -1;  /*这里设置定位级别小于父类,所以父类浮在它上面*/

	}

	.subnav li:hover div {

		width: 100px;

	}

	</style>

</head>

<body>

	<div class="subnav">

		<ul>

			<li>

				<div></div>

			</li>

			<li><div></div></li>

			<li><div></div></li>

			<li><div></div></li>

			<li><div></div></li>

		</ul>

	</div>

</body>

</html>

```
你如果愿意有所作为，就必须有始有终。(16)
```

CSS3(2)--- 过渡(transition)的更多相关文章

  1. CSS3之过渡Transition

    CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...

  2. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  3. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  4. CSS3 过渡transition 认识

    其实,我一直觉得自己对新知识是以一种抵触的情绪在学习的.因为我总是习惯于将事情想得很复杂,所以也错过了很多美好的东西. 以前觉得CSS3的知识应该是很难的,很难理解的.但是我发现我觉得知识点很难,是因 ...

  5. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  6. CSS3 过渡---transition

    过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 过渡动画: 是从 ...

  7. css3动画（transition）属性探讨

    在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...

  8. CSS3的过渡和转换

    CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...

  9. css3 转换 过渡 及动画

    转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...

随机推荐

  1. suseoj The wheat of the prime minister

    1202: 2018四川理工学院大学生ACM程序设计:The wheat of the prime minister 时间限制: 1 Sec  内存限制: 128 MB提交: 4  解决: 3[提交] ...

  2. 堡垒机的核心武器：WebSSH录像实现

    WebSSH终端录像的实现终于来了 前边写了两篇文章『Asciinema:你的所有操作都将被录制』和『Asciinema文章勘误及Web端使用介绍』深入介绍了终端录制工具Asciinema,我们已经可 ...

  3. JS三座大山再学习(一、原型和原型链)

    原文地址 ## 前言 西瓜君之前学习了JS的基础知识与三座大山,但之后工作中没怎么用,印象不太深刻,这次打算再重学一下,打牢基础.冲鸭~~ 原型模式 JS实现继承的方式是通过原型和原型链实现的,JS中 ...

  4. ZeroC ICE的远程调用框架 AMD

    继上一篇<ZeroC ICE的远程调用框架>,本篇再来说其中的AMD.(本篇需要重写) 当在ice文件中声明某个接口方法Method为["amd"]后,接口方法在stu ...

  5. Linux菜鸟——搭建虚拟机环境

    最近在学习Linux搭建服务器,但本人对于Linux一无所知,所以花了两天时间把安装,命令,控制,搭建环境等一系列操作都囫囵吞枣了一遍,但又怕自己记不住太多,所以记录下以前搭建的所有步骤,希望能提醒自 ...

  6. Java基础知识总结之1.8新特性lambda表达式

    函数式接口 函数式接口(functional interface 也叫功能性接口,其实是同一个东西).简单来说,函数式接口是只包含一个方法的接口.比如Java标准库中的java.lang.Runnab ...

  7. python基础-面向对象编程之封装、访问限制机制和property

    面向对象编程之封装 封装 定义:将属性和方法一股脑的封装到对象中,使对象可通过"对象."的方式获取或存储数据. 作用:让对象有了"."的机制,存取数据更加方便 ...

  8. 物联网架构成长之路(47)-利用GitLab实现CI持续集成

    0.前言 前段时间,考虑到要练习部署一套CI/CD的系统.一开始考虑到Jenkins,随着这两天的了解,发现最新版的GitLab已经提供有CI/CD集成了.所以本次博客,干脆一步到位,直接用GitLa ...

  9. linux-PAM

    PAM(Pluggable Authentication Modules)即可插拔式认证模块,一种用户级别的认证方式,它也是当前Linux服务器普遍使用的认证方式. PAM认证原理:参考资料来自htt ...

  10. iptables简单命令

    IPTables是基于Netfilter基本架构实现的一个可扩展的数据报高级管理系统或核外配置工具,利用table.chain.rule三级来存储数据报的各种规则.Netfilter-iptables ...