响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例3-1 CSS3过渡

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 过渡</title>
<style>
/*显示*/
.box {width: 100px;height: 100px;background-color: #eee;/*透明度*/opacity: 1;/*过渡*/transition: 3s;
}
/*隐藏*/
.box:hover {opacity: 0;
}
</style>
</head><body>
<div class="box"></div>
</body>
</html>

上述代码中:
第8-16行代码定义.box的样式,设置透明度为1,transition的值为3s;
第18~20行代码定义元素的透明度为0,表示当鼠标指针悬停在.box元素上时元素隐藏,当鼠标离开盒子时元素显示。

运行效果

在这里插入图片描述
在CSS3之前,由于没有过渡属性transition,当修饰CSS样式时,CSS样式属性值就会瞬间变成修改后的值,此时CSS样式的变化是没有过渡效果的,这样会影响用户体验。通过CSS的过渡能够平滑地改变一个元素的CSS值,使元素从一个样式逐渐过渡到另一个样式,就很好的解决了这个问题。
利用transition能够实现元素显示、隐藏的过渡效果。
注意:元素的过渡效果开始于指定的CSS属性改变值时,CSS属性改变的典型时间是鼠标指针位于元素上或离开元素时;当鼠标光标移动到该元素时,该元素会逐渐改变它原有样式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/616522.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode17 电话号码的字母组合

方法1 if-else方法 if-else方法的思路及其简单粗暴&#xff0c;如下图所示&#xff0c;以数字234为例&#xff0c;数字2所对应的字母是abc&#xff0c;数字3所对应的是def&#xff0c;数字4所对应的是ghi&#xff0c;最后所产生的结果就类似于我们中学所学过的树状图一样&…

Windows下Jenkins自动化部署SpringBoot应用

Windows下Jenkins自动化部署SpringBoot应用 1、下载安装包 下载地址&#xff1a; 一个是 msi 程序&#xff1a; https://mirrors.aliyun.com/jenkins/windows/ 一个是 war 程序&#xff1a; https://get.jenkins.io/war-stable/ https://mirrors.jenkins.io/war/ 这里我…

活动 | Mint Blockchain 将于 2024 年 1 月 17 号启动 MintID 限量发行活动

MintID 是 Mint Blockchain 生态的超级权益卡&#xff0c;用于探索 NFT PASS 在未来各种应用场景下的可能性。MintID 将通过限时限量有价发售的方式对外释放&#xff0c;持有人将成为 Mint Blockchain 的核心权益用户。 MintID 总量&#xff1a;10,000 枚 铸造价格&#xff1a…

Go 语言 panic 和 recover 详解

panic() 和 recover() 是 Go 语言中用于处理错误的两个重要函数。panic() 函数用于中止程序并引发panic&#xff0c;而 recover() 函数用于捕获panic并恢复程序的执行。 什么是panic和recover&#xff1f; panic panic() 函数用于中止程序并引发panic。panic() 函数可以接收…

3 微信小程序

各位小伙伴想要博客相关资料的话关注公众号&#xff1a;chuanyeTry即可领取相关资料&#xff01; 功能开发 3 功能开发1. 用户登录1.1 发送短信1.2 登录 3 功能开发 1. 用户登录 1.1 发送短信 1.2 登录 小程序公共对象 app.js App({/*** 当小程序初始化完成时&#xff0c;会…

MES系统中的设备管理及设备数据采集

随时工厂数字化建设的大力推进&#xff0c;设备管理的效率得到了很大的提升&#xff0c;特别是作为机加工企业&#xff0c;设备是整个企业非常重要的核心资产。 一、设备进行数据采集面临痛点&#xff1a; 设备数据状况无法获取与掌握 设备老旧&#xff0c;信息化基础差&…

react 学习笔记

一、创建虚拟dom ReactDOM.render(虚拟dom&#xff0c;要渲染的节点) <body><div id"test"></div><!-- 引入react核心库 --><script src"../js/react.development.js"></script><!-- 引入react-dom&#xff0c;用…

[Onnx简化库深度剖析] OnnxSimplifier和OnnxOptimizer解读-(4)

[Onnx简化库深度剖析] OnnxSimplifier和OnnxOptimizer解读-(4) 简介 现在主要用于通过实操进行onnx简化库的每种pass的特性和效果。因为Pass实在太多&#xff0c;因此这里挑了一些效果显著的Pass进行呈现。左边的是原始模型&#xff0c;右边的是特定Pass优化后的模型 OnnxOp…

关于降版本Tomcat10降到Tomcat9或者Tomcat8,提示找不到jakarta.servlet.http.HttpServletRequest包的解决方法

Tomcat10相较于Tomcat9和8&#xff0c;在Servlet方面&#xff0c;对于javax.servlet包名改为了jakarta.servlet。 当你目前的项目是使用Tomcat10进行部署的&#xff0c;然后页面提示没有找到javax.servlet.http.HttpServletRequest包时&#xff0c;只有两种方法&#xff1a; …

C/C++程序的内存开辟

//———— C/C程序的内存开辟 C程序内存分配的几个区域&#xff1a; //int t 2; //static int r 1; //void test() //{ // static e 1; // int n 1; // int arr[10] {1,2,3,4}; // char g[] "hello world"; // char* p "abcd"; // …

美力AI变革:生成式AI在美妆和时尚领域的巨大改变

美妆AI技术解决方案提供商—玩美移动于今日发布最新全球趋势报告&#xff1a;《生成式AI在美妆和时尚领域的巨大改变》&#xff0c;就生成式AI在美妆和时尚行业的崛起&#xff0c;为品牌商提供了富有洞见的深入分析。该报告分析了来自玩美移动屡获殊荣的玩美系列APP应用套件的大…

文本单词查询复合表达式求值的实现案例分析

本文讨论的“文本单词查询复合表达式求值的实现”案例&#xff0c;来自C primer第四版&#xff0c;该案例面向对象编程和泛型编程&#xff0c;涉及类的继承、抽象、多态、句柄、标准IO库、容器、算法库&#xff0c;是综合性很强的程序 该程序实现文本中查找单个单词&#xff0c…

ELAU MC-4/11/22/400伺服驱动器

在一帧中每一行的选择时间是均等的。假设一帧的扫描行数为N&#xff0c;扫描时间为1&#xff0c;那一行所占有的选择时间为一帧时间的1/N。在液晶显示的驱动方法中把这个值&#xff0c;即一帧行扫描数的倒数称为液晶显示驱动的占空比(duty)&#xff0c;用d表示。在同等电压下&a…

Error: start of central directory not found; zipfile corrupt.

【报错】使用 unzip 指令在 AutoDL 上解压 .zip 文件时遇到 Error: start of central directory not found; zipfile corrupt. 报错&#xff1a; 重新上传后还是解压失败排除了 .zip 文件上传中断的问题。 【原因】Windows 和 Linux 下的压缩文件的二进制格式有所不同&#x…

Python的内置函数 def __init__和__str__用法

__init__() 当使用类名&#xff08;&#xff09;创建对象时&#xff0c;会自动执行以下操作 __init__()是对象的的内置方法&#xff0c;是专门用来定义一个类 具有哪些属性的方法 class Person:def __init__(self):print("这是一个初始化方法")result Person() …

SpringBoot使用过滤器进行接口签名防参数篡改

在Spring Boot中&#xff0c;可以使用过滤器&#xff08;Filter&#xff09;来实现接口签名验签。以下是一个简单的示例&#xff1a; 1. 首先&#xff0c;创建一个名为SignatureFilter的类&#xff0c;实现javax.servlet.Filter接口 import javax.servlet.*; import javax.se…

直接写一区! ZOA-PCNN-AT-SVM斑马优化并行卷积-支持向量机融合注意力机制的故障识别程序,特征可视化,实验多!图多!

适用平台&#xff1a;Matlab2023版本及以上 本原创程序提出的ZOA-PCNN-AT-SVM故障识别模型还没有人写&#xff01;在此基础上进一步对参考模型进行多重改进&#xff0c;程序注释清晰&#xff0c;干货满满&#xff0c;下面对文章和程序做简要介绍&#xff01; ①识别模型部分参…

模拟开关灯

1&#xff0e;  实验任务 如图所示&#xff0c;监视开关K1&#xff08;接在P3.0端口上&#xff09;&#xff0c;用发光二极管L1&#xff08;接在单片机P1.0端口上&#xff09;显示开关状态&#xff0c;如果开关合上&#xff0c;L1亮&#xff0c;开关打开&#xff0c;L1熄灭。…

【mybatis-generator】mybatis代码生成器generator,生成文件名自定义配置

mybatis代码生成器generator, 生成文件名自定义配置 MyBatis-Generator 使用一. 引入依赖和相关插件二.设置配置文件三.运行四. mybatis-generator 自定义生成的文件名一.domainObjectName和mapperName属性二.domainObjectRenamingRule标签三. RenameExampleClassPlugin插件四.…

JUC之Phaser的使用

Phaser是并发包juc.concurrent包下的一个关于线程同步和线程通信的一个工具类&#xff0c;类似于CountDownLanch 和 CyclicBarrier&#xff0c;不同的是 Phaser可以用来根据步骤&#xff0c;等待线程按步骤同时触发执行。 package com.example.test;import com.example.abstra…