底部出现3秒消失的CSS3效果

2024-07-11 08:20:49

字体：大中小

来源：转载

供稿：网友

这篇文章主要为大家详细介绍了底部出现3秒消失的CSS3效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

先看下演示效果：

底部出现3秒消失的CSS3效果

下面是实现代码，此效果是手机响应式效果，建议手机浏览测试

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title></head><style type="text/css">*{margin: 0px;padding: 0px;}.pay_tips_animation_up{position: fixed;height: 56px;background: #FC000C;width: 100%;bottom: -56px;animation:myfirst 3s none;animation-direction:alternate;animation-iteration-count:1;/* Safari and Chrome */-webkit-animation:myfirst 3s none;-webkit-animation-direction:alternate;-webkit-animation-iteration-count:1; /* Safari 和 Chrome */}@keyframes myfirst{0%  {background:green; bottom:-56px;}25% {background:#999;  bottom:0px;}50% {background:#333;  bottom:0px;}75% {background:yellow; bottom:0px;}100%{background:blue; bottom:-56px;}}@-webkit-keyframes myfirst /* Safari and Chrome */{0%  {background:green; bottom:-56px;}25% {background:#999; bottom:0px;}50% {background:#333; bottom:0px;}75% {background:yellow; bottom:0px;}100%{background:blue; bottom:-56px;}}</style><body><div class="pay_tips_animation_up ddd">11</div></body></html>

以上就是底部出现3秒消失的CSS3效果的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持武林网。

上一篇：四种利用Div+Css实现隐藏文字内容的方法

下一篇：防止浏览器缓存css js等静态文件的方法【荐】