css设置显示隐藏动画的方法

2023-06-14 11:06:32 688人浏览八月长安

摘要

小编给大家分享一下CSS设置显示隐藏动画的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！css设置显示隐藏动画的方法：首先创建一个html示例文件；然后创建一

小编给大家分享一下CSS设置显示隐藏动画的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

css设置显示隐藏动画的方法：首先创建一个html示例文件；然后创建一个<div>标签，并设置一些文字；最后使用“@-WEBkit-keyframes”对fadenum类设置淡出淡入效果即可。

打开html开发软件新建一个html代码页面。如图：

css设置显示隐藏动画的方法

在html代码页面创建一个<div>标签，然后给这个<div>添加一个class类并设置一些文字，用于显示淡出淡入动画效果（那里中使用的类名：fadenum，下面将直接对该类进行描述）。如图：

css设置显示隐藏动画的方法

设置<div>类样式。创建<style>标签，在这个标签里面设置fadenum类的宽、高、背景色，方便接下来查看淡出淡入效果。如图：

css设置显示隐藏动画的方法

保存html代码后使用浏览器打开即可看到设置<div>样式显示效果。

css设置显示隐藏动画的方法

添加淡出淡入动画效果。使用@-webkit-keyframes对fadenum类设置淡出淡入效果。默认开始是显示，紧接着就是淡出，然后再淡入。

淡出淡入效果代码：

@-webkit-keyframes fadenum{    0%{opacity: 1;}   50%{opacity: 0;}   100%{opacity: 1;}}

css设置显示隐藏动画的方法

为fadenum类添加淡出淡入效果，直接把代码添加到fadenum类即可。

使用animation进行淡出淡入效果进行时间、动画方式进行设置。如图：

代码：

-webkit-animation: fadenum 2s infinite;    -moz-animation: fadenum 2s infinite;  animation:fadenum 2s infinite;

css设置显示隐藏动画的方法

保存html代码使用浏览器打开即可看到<div>标签自动淡出淡入效果。

css设置显示隐藏动画的方法

页面所有代码。可以直接复制所有代码到新建html页面，粘贴保存后使用浏览器打开即可看到效果。

所有代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css3显示隐藏效果</title><style>.fadenum{background-color: #ffce44;width: 50px;height: 50px;text-align:center;line-height:50px;margin:40px auto;-webkit-animation: fadenum 2s infinite;    -moz-animation: fadenum 2s infinite;  animation:fadenum 2s infinite;}@-webkit-keyframes fadenum{    0%{opacity: 1;}   50%{opacity: 0;}   100%{opacity: 1;}}@-moz-keyframes fadenum{    0%{opacity: 1;}   50%{opacity: 0;}   100%{opacity: 1;}}@-o-keyframes fadenum{    0%{opacity: 1;}   50%{opacity: 0;}   100%{opacity: 1;}}@keyframes fadenum{    0%{opacity: 1;}   50%{opacity: 0;}   100%{opacity: 1;}}</style></head><body><div class="fadenum">30</div></body></html>

注意事项

案例中使用@-webkit-keyframes主要针对谷歌内核浏览器，如果存在不兼容其他浏览器需要添加其他浏览器前缀

以上是“css设置显示隐藏动画的方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: css设置显示隐藏动画的方法

本文链接: https://www.lsjlt.com/news/270146.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

C++ 生态系统中流行库和框架的贡献指南

作为 c++++ 开发人员，通过遵循以下步骤即可为流行库和框架做出贡献：选择一个项目并熟悉其代码库。在 issue 跟踪器中寻找适合初学者的问题。创建一个新分支，实现修复并添加测试。提交...

99+

2024-05-15

框架 c++ 流行库 git
C++ 生态系统中流行库和框架的社区支持情况

c++++生态系统中流行库和框架的社区支持情况：boost：活跃的社区提供广泛的文档、教程和讨论区，确保持续的维护和更新。qt：庞大的社区提供丰富的文档、示例和论坛，积极参与开发和维护。...

99+

2024-05-15

生态系统社区支持 c++ overflow 标准库
c++中if elseif使用规则

c++ 中 if-else if 语句的使用规则为：语法：if (条件1) { // 执行代码块 1} else if (条件 2) { // 执行代码块 2}// ...else ...

99+

2024-05-15

c++
c++中的继承怎么写

继承是一种允许类从现有类派生并访问其成员的强大机制。在 c++ 中，继承类型包括：单继承：一个子类从一个基类继承。多继承：一个子类从多个基类继承。层次继承：多个子类从同一个基类继承。多层...

99+

2024-05-15

c++
c++中如何使用类和对象掌握目标

在 c++ 中创建类和对象：使用 class 关键字定义类，包含数据成员和方法。使用对象名称和类名称创建对象。访问权限包括：公有、受保护和私有。数据成员是类的变量，每个对象拥有自己的副本...

99+

2024-05-15

c++
c++中优先级是什么意思

c++ 中的优先级规则：优先级高的操作符先执行，相同优先级的从左到右执行，括号可改变执行顺序。操作符优先级表包含从最高到最低的优先级列表，其中赋值运算符具有最低优先级。通过了解优先级，可...

99+

2024-05-15

c++
c++中a+是什么意思

c++ 中的 a+ 运算符表示自增运算符，用于将变量递增 1 并将结果存储在同一变量中。语法为 a++，用法包括循环和计数器。它可与后置递增运算符 ++a 交换使用，后者在表达式求值后递...

99+

2024-05-15

c++
c++中a.b什么意思

c++kquote>“a.b”表示对象“a”的成员“b”，用于访问对象成员，可用“对象名.成员名”的语法。它还可以用于访问嵌套成员，如“对象名.嵌套成员名.成员名”的语法。 c++...

99+

2024-05-15

c++
C++ 并发编程库的优缺点

c++++ 提供了多种并发编程库，满足不同场景下的需求。线程库 (std::thread) 易于使用但开销大；异步库 (std::async) 可异步执行任务，但 api 复杂；协程库 ...

99+

2024-05-15

c++ 并发编程
如何在 Golang 中备份数据库？

在 golang 中备份数据库对于保护数据至关重要。可以使用标准库中的 database/sql 包，或第三方包如 github.com/go-sql-driver/mysql。具体步骤...

99+

2024-05-15

golang 数据库备份 mysql git 标准库