css怎么设置显示隐藏动画
脚本宝典收集整理的这篇文章主要介绍了css怎么设置显示隐藏动画，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
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页面，粘贴保存后使用浏览器打开即可看到效果。
所有代码：
<!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怎么设置显示隐藏动画的详细内容，更多请关注脚本宝典其它相关文章！
脚本宝典总结
以上是脚本宝典为你收集整理的css怎么设置显示隐藏动画全部内容，希望文章能够帮你解决css怎么设置显示隐藏动画所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- Sass 概述 2024-10-18
- css3中transform属性实现的4种功能 2022-04-13
- 纯CSS3实现div按照顺序出入效果 2022-04-13
- CSS实现隐藏搜索框功能(动画正反向序列) 2022-04-13
- 使用CSS3实现按钮悬停闪烁动态特效代码 2022-04-13
- CSS3 Tab动画实例之背景切换动态效果 2022-04-13
- CSS实现两列布局的N种方法 2022-04-13
- CSS 实现Chrome标签栏的技巧 2022-04-13
- css实现两栏布局，左侧固定宽，右侧自适应的多种方法 2022-04-13
- 从QQtabBar看css命名规范BEM的详细介绍 2022-04-13