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

教程内容

最近看到很多资源站都添加了跳动都图片公告,采用都是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>


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

资源下载

点击下载 [提取码: 1024] 复制

提示:此非实物交易,购买后不退款,请考虑好再购买 百度网盘下载神器

售前咨询和售后服务 联系客服咨询

免责声明:
1. 本站所有资源来源于网络,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请自负。
2. 如果您喜欢该源码,请支持购买正版,得到更好的正版服务。
3. 如果你有好源码或者教程,可以联系站长投稿,分享有金币奖励和额的外收入!
4. 本站提供的非本站原创资源都不包含技术服务请大家谅解!
5. 如有链接无法下载或失效,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 本站无法保证所有资源的准确性、安全性和完整性!
8. 如本站源码有侵权问题,请联系站长!