纯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代码时习惯在:后面加个空格在写样式 ...
随机推荐
- unity碰撞检测(耗费性能)
using System.Collections; using System.Collections.Generic; using UnityEngine; public class PengZhua ...
- 背包九讲（Orz）
P01: 01背包问题 题目 有\(N\)件物品和一个容量为\(V\)的背包.第\(i\)件物品的费用是\(c[i]\),价值是\(w[i]\).求解将哪些物品装入背包可使这些物品的费用总和不超过背包 ...
- setclock - 用系统时间来设置硬件时间
总览 setclock 描述 setclock 用当前系统时钟存储的时间设置系统的硬件时间. 它先读取 /etc/sysconfig/clock 的时间格式, 时间存储前应该转化成这种格式. Red ...
- smb.conf - Samba组件的配置文件
总览 SYNOPSIS smb.conf是Samba组件的配置文件,包含Samba程序运行时的配置信息.smb.conf被设计成可由swat (8)程序来配置和管理.本文件包含了关于smb.conf的 ...
- 最大公因数数gcd模板
首先蒟蒻是在大佬的博客里学习的代码,代码风格多有相似之处,大佬博客https://www.cnblogs.com/lMonster81/p/10433902.html 最大公因数那,顾名思义就是两个数 ...
- vue-router中的router-link的active-class
vue-router中的router-link的active-class 在vue-router中要使用选中样式的方法有两种: 1.直接在路由js文件中配置linkActiveClass 2.在r ...
- 常用yum源之(Percona MySQL)
[percona]name = CentOS $releasever - Perconabaseurl=http://repo.percona.com/centos/$releasever/os/$b ...
- 1、Fiddler 打断点 bpu
一.fiddler 设置断点,可修改以下请求 可以修改HTTP请求头信息,如修改cookie,user-agent等 可以修改请求数据,突破表单限制,提交任意数字,如充值最大金额100,可修改为100 ...
- python3.x filter，map，reduce浅析
#map用法: #传递函数api进入map去执行,把字符串第一个字母变大写, #其他变小写返回 def format_name(s): s=s.lower() print(s) return s[0] ...
- 【leetcode】935. Knight Dialer
题目如下: A chess knight can move as indicated in the chess diagram below: . This time, we p ...