纯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代码时习惯在:后面加个空格在写样式 ...
随机推荐
- 分别用switch语句和if语句实现键盘录入月份，输出对应的季节
switch建议判断固定值的时候用 if建议判断区间或范围的时候用 1.用switch实现键盘录入月份,输出对应的季节 import java.util.Scanner; class Hello2 { ...
- C++异常处理的深入理解
1,问题: 1,如果在 main 函数中抛出异常会发生什么? 1,不处理,则崩溃: 2,如果异常不处理,最后会传到哪里? 3,下面的代码输出什么? 4,异常的最终处理编程实验: #include &l ...
- Java Console/控制台 打印表格
功能:控制台打印表格,支持字段动态长度,左对齐,右对齐,居中,设置最大列长,设置列间隔符,设置最多打印多少行. 类下载地址:http://download.csdn.net/download/j506 ...
- JQ的live学习
$("#StartTime").live("blur keypress keyup",function(){ if($("#EndTime" ...
- vue项目在webpack打包后背景图片显示不了
加上 publicPath:'../../'即可
- SQL数据库— <3>高级查询、常用函数 --摘录网络
SQL Server T-SQL高级查询 高级查询在数据库中用得是最频繁的,也是应用最广泛的. Ø 基本常用查询 --select select * from student; --all 查询所有 ...
- mqtt haproxy 代理及负载搭建
目录 mqtt 分布集群搭建 haproxy 安装配置 解压 安装 配置haproxy.cfg 启动haproxy 配置mqtt 测试 负载配置说明 负载均衡算法 ACL规则定义 全局配置 默认配置 ...
- SHOW - 显示运行时参数的数值
SYNOPSIS SHOW name SHOW ALL DESCRIPTION 描述 SHOW 将显示当前运行时参数的数值. 这些变量可以通过 SET 语句来设置,或者通过编辑 postgresql. ...
- flask开发问题小记
前因 最近在使用flask开发一个APP的后端时出现了一些小问题.我使用sqlalchemy建立了如下多对多关系: 中间表 user_manager_group = db.Table('manage_ ...
- mysql slave节点多线程复制
线上一个mysql主备延迟很大,master节点写入频繁,slave节点积累大量relay-log无法即使写入. 参考:https://www.cnblogs.com/conanwang/p/6006 ...