css怎么设置显示隐藏动画-木庄网络博客

本文摘自PHP中文网，作者藏色散人，侵删。

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

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

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

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

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

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

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

【推荐学习：css视频教程】

淡出淡入效果代码：

@-webkit-keyframes fadenum{ /*设置内容由显示变为隐藏*/
   0%{opacity: 1;}
   50%{opacity: 0;}
   100%{opacity: 1;}
}

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

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

代码：

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

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

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

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者