为网站左下角添加跳动的图片公告

教程分享

最近看到很多资源站都添加了跳动的图片公告，采用都是css3的animate-bounce-up上下跳动动画，。下面把教程分享给有需求的朋友。

1、在合适的位置添加代码：

<div class="global animate-bounce-up pop-small ">
<a href="javascript:;" class="close a12-1-close-small" title="关闭"></a>
<a href="https://mk99.net/joinvip.html" target="_blank" class="go-act" click-stat="35"></a>
</div>

2、添加css样式：

.global{position:fixed;bottom:60px;left:36px;z-index:999;width:180px;height:170px;-webkit-animation:click 2.4s infinite;-ms-animation:click 2.4s infinite;-moz-animation:click 2.4s infinite;-o-animation:click 2.4s infinite;animation:click 2.4s infinite}
.pop-small{background:url(pop-small.png) no-repeat center;height:205px;width:204px}
.global .close{position:absolute;top:14px;right:16px;z-index:999;display:block;width:14px;height:14px}
.global .a12-1-close-small{top:5px;right:26px;width:24px;height:24px}
.global .go-act{position:absolute;bottom:1px;left:0;z-index:998;display:block;width:100%;height:100%}
.animate-bounce-up{-webkit-animation:bounce-up 2s linear infinite;animation:bounce-up 2s linear infinite}
@-webkit-keyframes bounce-up{25%{-webkit-transform:translateY(10px)}50%,100%{-webkit-transform:translateY(0)}75%{-webkit-transform:translateY(-10px)}}@keyframes bounce-up{25%{transform:translateY(10px)}50%,100%{transform:translateY(0)}75%{transform:translateY(-10px)}}

3、在底部添加js代码：

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(".animate-bounce-up .close").click(function(){$(".animate-bounce-up").hide()});
</script>

教程结束，需要的小伙伴赶快试试吧。

样式如图

 

原文链接：https://88hzy.cn/1562.html，转载请注明出处。