css3动画之左右摇摆网站左下角红包代码-技术分享-云码资源

css3动画之左右摇摆网站左下角红包代码

发布于：2020-05-29 19:29 阅读次数：1439 作者：云码素材分类：技术分享关键词：红包 css3

今天给云码素材网站左下角加上了弹出红包代码，可关闭，可左右摇摆，可根据屏幕大小自动关闭。具体的代码如下，详细的演示网站效果，请查看云码素材网站首页。

一.html代码如下

<div class="leftpop close-box visible-lg">
<a class="close-btn" href="javascript:;"><i class="fa fa-remove"></i></a>
<div class="box">
<a href="https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=0qr1pz08" target="_blank">
<img src="https://img.ymscai.com/leftad.png"></a>
</div>
</div>

二.css代码如下

/*左侧飘窗*/
.leftpop{ position: fixed; z-index: 99; left: 10px; bottom: 10px;}
.leftpop .box{ -webkit-animation: rotate 0.4s linear alternate infinite; 
animation: rotate 0.4s linear alternate infinite;}
.leftpop .close-btn{ position: absolute; z-index: 1; top: -5px; right: -5px; 
width: 20px; height: 20px; line-height: 18px; text-align: center; border-radius: 50%; 
background-color: rgba(0,0,0,.5); color: #fff;}
@media screen and (max-width: 1200px) {
    .visible-lg {
        display: none;
    }
}
@-webkit-keyframes rotate { 0% { transform: rotate(-5deg); } 50% { transform: rotate(0deg); } 
100% { transform: rotate(5deg);; }}

三.js代码如下

	<script type="text/javascript">
    
    $(".close-btn").on("click",function(){
		$(this).parents(".close-box").remove();
	});
</script>

入群分享

我要加群：资源共享的时代，不要再单打独斗！加小编微信号加入群：xnynews(备注：云码素材入群)，qq群号：202498279,一起技术学习，资源分享！

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！

原创声明：本站所有资源如果标明原创的为云码素材已测试或原创开发项目,可提供有偿技术服务,如标明为收集,为网络收集资源，网路收集资源不提供任何技术支持和服务,网络虚拟资源,一经售出,概不退货,请购买前认真看清资源详情说明。