纯css设置元素过渡效果
1.首先，先设置一个div，待会我们使用css3给这个div设置过渡效果。
2.然后给div设置宽高和背景，这里我就设置成200像素，深粉色。
3.接着开始设置transition属性，通过这个属性就可以给元素添加过渡效果。
4.如图所示 ，第一个参数表示的是要过渡的属性值，第二个参数表示的是过渡时间，这里我就设置背景过渡。
5.接着再设置鼠标经过div元素时背景颜色为暗蓝色。
6.之后，预览div背景过渡效果，当鼠标放在div元素上面就会由深粉色过渡到暗蓝色，过渡时间是五秒钟（这里因为是静态图片，待会我会贴出源码）。
7.如果要设置多个属性过渡可以把它们用逗号隔开，比如要同时设置背景和宽度过渡，则可以这样写。
8.接着再给div:hover设置宽度为400像素。
9.这样，当我们鼠标经过div元素时，背景会过渡，同时div元素的宽度也会由200像素过渡到400像素 。.
为了更好参考，我就贴出源代码，直接保存为HTML文件就可以查看效果了哦。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>搜狗指南 </title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: deeppink;
transition: background 5s,width 5s;
}
div:hover{
background: darkblue;
width: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
原文地址：https://zhinan.sogou.com/guide/detail/?id=316512424205
纯css设置元素过渡效果的更多相关文章
- 纯css设置元素高度与宽度相等
设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...
- CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...
- css设置元素垂直居中的几个方法
最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来), 不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...
- css设置元素背景透明度的2种方式
更新记录 本文迁移自Panda666原博客,原发布时间:2021年7月9日. 设置元素的背景的透明度可以使用2种方式:方式1:opacity属性.方式2:使用rgba值.两种方式有一点差异,opaci ...
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- css 设置元素背景为透明
要设置某一元素的背景为透明,在 chrome .firefox.opera 下是这样的: rgba 中的最后一个参数 0.4 就是想要的透明度,范围在0-1之间. 在 ie 中一般是这样的: filt ...
- jQuery的1.x版本的$(element).css()设置元素字体颜色时出现的问题（在IE8以下）
最近赶项目,自己写了个基于jQuery的弹出层插件,中间遇到一个问题,怎么也找不到解决方法,最后发现就是空格的问题...欲哭无泪啊... 在给函数传参时,因为写css代码时习惯在:后面加个空格在写样式 ...
随机推荐
- Java并发AtomicLong接口
java.util.concurrent.atomic.AtomicLong类提供了可以被原子地读取和写入的底层long值的操作,并且还包含高级原子操作. AtomicLong支持基础long类型变量 ...
- 希尔排序(shell)理论---不含源码
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 希尔排序,是一个缩小增量排序.它根据步长来进行排序,步长不同可能会产生不同的序列,但是他们的最终结果是相同的,希尔排序的官方理论难以理解, ...
- Ajax 中Post 与 Get的 实例
Ajax中 Post 与 Get 实例 Ajax的POST实例,index.html <html> <head> <script type="text/ja ...
- 重写原生alert,弹出层过一会就消失
window.alert = function(str) { if(document.querySelectorAll("div.shieldClass").length!=0){ ...
- rpm相关
rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他发行版的采用.RPM ...
- MySQLSyntaxErrorException: Row size too large 转摘自：https://confluence.atlassian.com/display/CONFKB/MySQLSyntaxErrorException%3A+Row+size+too+large
Symptoms The following appears in the atlassian-confluence.log: Caused by: com.mysql.jdbc.exceptions ...
- UILabel颜色逐渐变化
@interface UIViewController () @property (weak, nonatomic) IBOutlet UIView *backView; //空间是用storyBoa ...
- send csv to es with filebeat
## filebeat *.csv 2019-11-30 23:27:50,111111,222222,VIEW,333333333333 filebeat filebeat.inputs:- pat ...
- SecureCRT安装，服务器远程连接客户端SSH
SSH: Secure Shell 的缩写,是用来连接Linux服务器系统的软件. 它可以同时创建多个连接,方便对服务器的操作使用,界面也比Linux系统好看的多,同时安装一些必备的软件能更加方便 ...
- linux随笔-04
管道符.重定向与环境变量&vim编辑器 输入输出重定向 标准输入重定向(STDIN,文件描述符为0):默认从键盘输入,也可从其他文件或命令中输入. 标准输出重定向(STDOUT,文件描述符为 ...