您的位置:首页 >综合精选 >

css如何实现渐渐消失

跟大家讲解下有关css如何实现渐渐消失,相信小伙伴们对这个话题应该也很关注吧,现在就为小伙伴们说说css如何实现渐渐消失,小编也收集到了有关css如何实现渐渐消失的相关资料,希望大家看到了会喜欢。

css实现渐渐消失的方法:首先用“@keyframes”规则和animation属性定义动画;然后在动画开始部分添加“opacity:1;”样式,设置正常状态;最后在动画结束部分添加“opacity:0;”样式,设置完全透明状态,隐藏元素。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

.hideSlow{ background: #a40808; color: #fff; animation: hidetip 5s 1; animation-fill-mode: forwards; -webkit-animation: showtip 5s 1; -webkit-animation-fill-mode: forwards; } @keyframes hidetip { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes hidetip { from { opacity: 1; } to { opacity: 0; } }

推荐学习:css视频教程

以上就是css如何实现渐渐消失的详细内容,更多请关注php中文网其它相关文章!

来源:php中文网

免责声明:本文由用户上传,如有侵权请联系删除!