transition过度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transtition</title>
<style>
.zero{
height:100px;
width:100px;
background-color:white;
transition: background-color 0.5s ease-in 0s;
float:left;
margin-left:10px;
}
.zero:hover{
background-color:gray;
} </style>
</head>
<body>
<div class='zero'></div>
<div class='zero'></div>
<div class='zero'></div>
<div class='zero'></div>
<div class='zero'></div>
<div class='zero'></div>
<div class='zero'></div>
<div class='zero'></div>
<div class='zero'></div>
</body>
</html>
这时比较简单的过度可以实现一些简单的类似动画的效果，实现过渡一定要具备四个要素：
1.指定过渡属性，如background、color等
2.指定过渡所需时间
3.指定过渡函数，即过渡的速度、方式等
4.指定过渡延迟时间，表示开始执行的时间
这样就可以实现过渡由于是符合元素可以直接这样写transition: <property> <duration> <timing-function> <delay>。
transition过度的更多相关文章
- CSS3 transition 过度
一个元素在不同的状态之间进行平滑的交换 CSS3中使用transition属性实现过度效果 一个简单的例子: img{ background-image:url("img/1.jpg&quo ...
- transition过度效果 + transform旋转360度
css样式: .animate{ width:65px; height:40px; background:#92B901; color:#ffffff; position:absolute; font ...
- css3 transition属性
最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...
- CSS3详解：transform、transition
CSS3 transform是什么? transform的含义是:改变,使-变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
- css—动画（transform, transition, animation）
transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有 ...
- Css3炫酷总结使用
先从CSS3的选择器说起: E F:所有的子孙元素: E>F: E中的子元素: E+F:E元素之后的最近的选择器: E~F:E中所以后面兄弟元素(CSS3 不包括自己本身,前面也不包括) att ...
- css3快速复习
选择器边框.阴影 border-radius: 50%; 设置正圆形背景的改变CSS3重要的新东西: ● transition 过度,让一个元素从一个样式,变为另一个样式,不再是干蹦了,而是有动画,均 ...
- HTML——CSS的基础语法2
一.盒模型 1-1.什么是盒模型? HTML5盒模型包括:内容(content).填充(padding.也叫做内边距).边框(border).边界(margin,也叫做外边距). 这些属性我们可以用日 ...
- 半个月学习的it内容
1 基本头部标签: 1 head: HEAD里面主要放一些有关网页设置的相关语句-->2编码格式: 设置网页的字符集编码格式:GB2312,简体中文的编码格式 GBK:扩展的国标码,比国标码多 ...
随机推荐
- javascript中DOM集锦（二）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- CentOS 7搭建LAMP环境（二）
前面已经讲过了CentOS 7下LAMP环境的配置过程,一台简单的WEB服务器已搭建完成,但后期在网站部署的过程中也许会碰到各种各样头疼的问题.下面我们来讲讲怎么解决这些问题,以及如何高效地管理服务器 ...
- sql的存储过程使用详解--基本语法
存储过程简介 SQL语句需要先编译然后执行,而存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集,经编译后存储在数据库中,用户通过指定存储过程的名字并给定参数(如果该存储 ...
- python常见模块命令(os/sys/platform)
一.Os Python的标准库中的os模块主要涉及普遍的操作系统功能.可以在Linux和Windows下运行,与平台无关. os.sep 可以取代操作系统特定的路径分割符. os.name字符串指示你 ...
- HDU1212
大数MOD #include<cstdio> #include<cstdlib> #include<iostream> #include<algorithm& ...
- NPOI导出WPF DataGrid控件显示数据
最近做个项目,需要导出DataGrid显示的数据,中间遇到了不少的坑,在此纪录一下,方便以后查看,也希望能给用到的人,一点帮助. 导出DataGrid显示的数据,并不是导出DataGrid的Items ...
- 关于TileBrush中Viewbox，Viewport以及Stretch，AlignmentX/Y的详细研究
我们知道TileBrush是WPF中一个战斗力爆表的虚基类,从它派生出的DrawingBrush,ImageBrush和VisualBrush在WPF图形编程中发挥着重要作用.然而关于TileBrus ...
- JavaScript实现常见算法面试题
算法题目部分参照了<进军硅谷>这本书. github:https://github.com/qcer/Algo-Practice (如果你觉得有帮助,记得给个star,THS) 一.排序 ...
- winPcap编程之不用回调方法捕获数据包(五 转)
这一次要分析的实例程序跟上一讲非常类似(“打开适配器并捕获数据包”),略微不同的一点是本次将pcap_loop()函数替换成了pcap_next_ex()函数.本节的重点也就是说一下这两个函数之间的差 ...
- Python 3.6.3 官网 下载 安装 测试 入门教程 (windows)
1. 官网下载 Python 3.6.3 访问 Python 官网 https://www.python.org/ 点击 Downloads => Python 3.6.3 下载 Python ...