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设置元素过渡效果的更多相关文章

  1. 纯css设置元素高度与宽度相等

    设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...

  2. CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度

    使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...

  3. css设置元素垂直居中的几个方法

    最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来),  不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...

  4. css设置元素背景透明度的2种方式

    更新记录 本文迁移自Panda666原博客,原发布时间:2021年7月9日. 设置元素的背景的透明度可以使用2种方式:方式1:opacity属性.方式2:使用rgba值.两种方式有一点差异,opaci ...

  5. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  6. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  7. 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  8. css 设置元素背景为透明

    要设置某一元素的背景为透明,在 chrome .firefox.opera 下是这样的: rgba 中的最后一个参数 0.4 就是想要的透明度,范围在0-1之间. 在 ie 中一般是这样的: filt ...

  9. jQuery的1.x版本的$(element).css()设置元素字体颜色时出现的问题（在IE8以下）

    最近赶项目,自己写了个基于jQuery的弹出层插件,中间遇到一个问题,怎么也找不到解决方法,最后发现就是空格的问题...欲哭无泪啊... 在给函数传参时,因为写css代码时习惯在:后面加个空格在写样式 ...

随机推荐

  1. 转 lsof命令详解

    lsof命令详解   lsof (list open files)是一个列出当前系统打开文件的工具.在linux系统环境下,任何事物都可以以文件形式存在,通过文件不仅可以访问常规的数据,还可以访问网络 ...

  2. f-strings格式化输出

    python3.6后加入标准库的格式化输出新的写法 不区分大小写,f,F都可以 可以加入表达式 s1 = 'haha' s = f'python{s1.upper()}' l1 = ['小明', 18 ...

  3. python基础之运算符和编码

    while循环 什么是循环? 就是不断的重复做一件事 while --关键字 后边跟条件 :还有循环体. 条件体为真,循环体内执行,为假不执行 while else 两者为一体的,相当于 if els ...

  4. 浮点字符串转int类型报错，解决

    一,直接上代码,先转double,再强转int,看你是选择,舍入,还是直接取整数位 var a1 = "1500.76"; var a2 = Convert.ToDouble(a1 ...

  5. VUE $SET源码

  6. html/js部分问题和小结

    2015/9/8 1.js中不要试图去处理由[变量:变量]组成的map(不过可以通过DWR.addOptions添加),而是处理[bh:变量][xm:变量],然后通过data[i].bh,data[i ...

  7. js常用算术运算符与一元运算符在做运算时不同类型的转换规则

    /** * 算术运算符:+, -, *, /, % * 当对非number类型的值进行运算(-, *, /, %)时,会将这些值先转换成number再运算,加法'+'运算除外, * 当对非number ...

  8. 大哥带我走渗透4（中）----oracle报错注入

    5/30 报错注入 0x01 准备阶段 1. 基础知识今天了解了,但是,只能看懂和最基本的理解,不能自己上路.所以,还是要不停学习基础.并且及时总结.这有一篇很详细的文章:https://www.cn ...

  9. Es学习第五课， 分词器介绍和中文分词器配置

    上课我们介绍了倒排索引,在里面提到了分词的概念,分词器就是用来分词的. 分词器是ES中专门处理分词的组件,英文为Analyzer,定义为:从一串文本中切分出一个一个的词条,并对每个词条进行标准化.它由 ...

  10. 07.interrupt

    /** *isInterrupted */ public class InterruptDemo { public static void main(String[] args) throws Int ...