纯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代码时习惯在:后面加个空格在写样式 ...
随机推荐
- cdh5.7 做完HA后hive 查询出现异常： expected: hdfs://nameservice
异常信息如下: select * from b_pt_pr_customer_address_info limit 19; FAILED: SemanticException Unable to de ...
- python发送邮件，文件后缀变成了bin
问题:在用python做自动化测试时,将html测试报告在邮件中添加文件发送的过程中,发现发送成功后,文件的后缀为.bin 解决方法: 加一行代码 msg_att["Content-Disp ...
- Docker镜像仓库的搭建--> Harbor篇
简介 Harbor是VMware公司开源的一个企业级Docker Registry项目,项目地址:https://github.com/goharbor/harbor Harbor作为一个企业级私有R ...
- cygwin的用途
cgywin简介 打开cygwin的官方网站(www.cygwin.com),一行英文非常醒目:Get that Linux feeling – on Windows! 简而言之,cygwin是一个在 ...
- 定时任务crond介绍
定时任务cornd crond介绍: crond是linux系统中用来定期(或周期性)执行命令或指定程序任务脚本的一种程序. 查看crontab帮助: [root@db01 ~]# crontab - ...
- 三、spring的AOP
AOP的基本认识 Aspect Oriented Programming,面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术 利用AOP可以对业务逻辑的各个部分进行隔离,从而 ...
- .NET Core TDD 前传: 编写易于测试的代码 一 -- 缝
转载于: https://www.cnblogs.com/cgzl/p/9365955.html 有时候不是我们不想做单元测试, 而是这代码写的实在是没法测试.... 举个例子, 如果一辆汽车在产出后 ...
- ros节点启动和关闭相关
Ros node启动与关闭 1. ros运行单位: Ros程序运行的单位是ros node. 2. ros 节点的启动: (1)初始化ros节点:通过调用ros::init()接口实现:可以通过参数指 ...
- Redis的常用功能
排序: sort mylist 排序 sort mylist alpha desc limit 0 2 字母排序 sort list by it:* desc by命令 sort list by it ...
- 前端学习(二十八）es6&ajax（笔记）
ES6 let 块级作用域 const 解构赋值 字符串拼接 扩展运算符 ------------------------------------------ ...