双十一网站左角悬浮图标双十一抢红包活动代码分享-轻刻年轮

也就一段代码加一段JS

这里就直接放出来了，需要的搞一下就好

将一下代码放置你需要显示的页面

<link rel="stylesheet" href="/shuangyi.css" type="text/css" media="all">
<div class="tmall_tab">
    <a href="https://s.click.taobao.com/HjP79gu" target="_blank" class="mm_wf_d11_shake"></a>
</div>
</link>

下面是JS代码放置网站根目录调用即可

/* 自定义 */
@media screen and (max-width: 768px){/* wap */
    .tmall_tab {
        position:fixed;
        bottom:5rem;
        left:.8rem;
        z-index:100;
        width:4.7rem;
    }
	.tmall_tab a{
	    display:block;
	    width:4.7rem;
	    height:6rem;
	    background:url(https://img01.sogoucdn.com/app/a/100540022/2021102010531046160626.png) no-repeat;
	    background-size: 100%;
        display: block;
    }
}
@media screen and (min-width: 768px){/* pc */
    .tmall_tab {
        position: fixed;
        left: 6%;
        bottom: 175px;
        z-index: 100;
        width:140px;
    }
	.tmall_tab a{
        display: block;
        width: 140px;
		height:168px;
		background:url(https://img01.sogoucdn.com/app/a/100540022/2021102010531046160626.png) no-repeat;
    }
}
@-webkit-keyframes site-anim-closeup {
	from {
	-webkit-transform:translate3d(0,0,0) scale(1);
	opacity:1;
}
to {
	-webkit-transform:translate3d(0,400px,0) scale(2);
	opacity:0.5;
}
}@keyframes site-anim-closeup {
	from {
	transform:translate3d(0,0,0) scale(1);
	opacity:1;
}
to {
	transform:translate3d(0,400px,0) scale(2);
	opacity:0.5;
}
}.site-out-up {
	-webkit-animation-duration:3s;
	animation-duration:3s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-name:site-anim-closeup;
	animation-name:site-anim-closeup;
	overflow:hidden;
}
@-webkit-keyframes mm_wf_scale {
	0% {
	-webkit-transform:scale(1);
	transform:scale(1);
}
50% {
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
}
100% {
	-webkit-transform:scale(1);
	transform:scale(1);
}
}@keyframes mm_wf_scale {
	0% {
	-webkit-transform:scale(1);
	transform:scale(1);
}
50% {
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
}
100% {
	-webkit-transform:scale(1);
	transform:scale(1);
}
}.mm_wf_scale {
	-webkit-animation:mm_wf_scale 0.5s ease infinite;
	animation:mm_wf_scale 0.5s ease infinite;
}
.mm_wf_scale_1 {
	-webkit-animation:mm_wf_scale 1s ease infinite;
	animation:mm_wf_scale 1s ease infinite;
}
@-webkit-keyframes mm_wf_d11_icon_updown {
	0% {
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
50% {
	-webkit-transform:translateY(5%);
	transform:translateY(5%);
}
100% {
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
}@keyframes mm_wf_d11_icon_updown {
	0% {
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
50% {
	-webkit-transform:translateY(5%);
	transform:translateY(5%);
}
100% {
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
}.mm_wf_d11_icon_updown {
	-webkit-animation:mm_wf_d11_icon_updown 1s ease infinite;
	animation:mm_wf_d11_icon_updown 1s ease infinite;
}
@-webkit-keyframes mm_wf_d11_updown {
	0% {
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
50% {
	-webkit-transform:translateY(-10px);
	transform:translateY(-10px);
}
100% {
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
}@keyframes mm_wf_d11_updown {
	0% {
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
50% {
	-webkit-transform:translateY(-10px);
	transform:translateY(-10px);
}
100% {
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
}.mm_wf_d11_updown {
	-webkit-animation:mm_wf_d11_updown 3s ease infinite;
	animation:mm_wf_d11_updown 3s ease infinite;
}
@-webkit-keyframes mm_wf_shake {
	0%,60%,80%,100% {
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}
65%,85% {
	-webkit-transform:rotate(5deg);
	transform:rotate(5deg);
}
75%,95% {
	-webkit-transform:rotate(-5deg);
	transform:rotate(-5deg);
}
}@keyframes mm_wf_shake {
	0%,60%,80%,100% {
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}
65%,85% {
	-webkit-transform:rotate(5deg);
	transform:rotate(5deg);
}
75%,95% {
	-webkit-transform:rotate(-5deg);
	transform:rotate(-5deg);
}
}.mm_wf_d11_shake {
	-webkit-animation:mm_wf_shake 1s ease infinite;
	animation:mm_wf_shake 1s ease infinite;
}
@-webkit-keyframes mm_wf_bg_rotate {
	0% {
	-webkit-transform:rotate(0);
	transform:rotate(0);
}
100% {
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg);
}
}@keyframes mm_wf_bg_rotate {
	0% {
	-webkit-transform:rotate(0);
	transform:rotate(0);
}
100% {
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg);
}
}.mm_wf_bg_rotate {
	-webkit-animation:mm_wf_bg_rotate 10s linear infinite;
	animation:mm_wf_bg_rotate 10s linear infinite;
}
.mm_wf_bg_rotate2 {
	-webkit-animation:mm_wf_bg_rotate 7s linear infinite;
	animation:mm_wf_bg_rotate 7s linear infinite;
}
@-webkit-keyframes mm_wf_bg_opacity {
	0% {
	opacity:0;
}
20% {
	opacity:1;
}
30% {
	opacity:1;
}
100% {
	opacity:0;
}
}@keyframes mm_wf_bg_opacity {
	0% {
	opacity:0;
}
20% {
	opacity:1;
}
30% {
	opacity:1;
}
100% {
	opacity:0;
}
}.mm_wf_bg_opacity {
	-webkit-animation:mm_wf_bg_opacity 2s linear infinite;
	animation:mm_wf_bg_opacity 2s linear infinite;
}
.mm_wf_bg_opacity2 {
	-webkit-animation:mm_wf_bg_opacity 2s linear infinite;
	animation:mm_wf_bg_opacity 2s linear infinite;
	-webkit-animation-delay:1s;
	animation-delay:1s;
}
@-webkit-keyframes mm_wf_redbag_1 {
	0% {
	opacity:0;
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
20% {
	opacity:1;
	-webkit-transform:translate(10px,-10px);
	transform:translate(10px,-10px);
}
100% {
	opacity:0.4;
	-webkit-transform:translate(200px,-80px);
	transform:translate(200px,-80px);
}
}@keyframes mm_wf_redbag_1 {
	0% {
	opacity:0;
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
20% {
	opacity:1;
	-webkit-transform:translate(10px,-10px);
	transform:translate(10px,-10px);
}
100% {
	opacity:0.4;
	-webkit-transform:translate(200px,-80px);
	transform:translate(200px,-80px);
}
}.mm_wf_redbag_1 {
	-webkit-animation:mm_wf_redbag_1 1.2s ease-in infinite;
	animation:mm_wf_redbag_1 1.2s ease-in infinite;
}
@-webkit-keyframes mm_wf_redbag_2 {
	0% {
	opacity:0;
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
20% {
	opacity:1;
	-webkit-transform:translate(-10px,-10px);
	transform:translate(-10px,-10px);
}
100% {
	opacity:0.4;
	-webkit-transform:translate(-200px,-80px);
	transform:translate(-200px,-80px);
}
}@keyframes mm_wf_redbag_2 {
	0% {
	opacity:0;
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
20% {
	opacity:1;
	-webkit-transform:translate(-10px,-10px);
	transform:translate(-10px,-10px);
}
100% {
	opacity:0.4;
	-webkit-transform:translate(-200px,-80px);
	transform:translate(-200px,-80px);
}
}.mm_wf_redbag_2 {
	-webkit-animation:mm_wf_redbag_2 1.2s ease-in infinite;
	animation:mm_wf_redbag_2 1.2s ease-in infinite;
	-webkit-animation-delay:0.4s;
	animation-delay:0.4s;
}

效果图来一张

购买后下载不了源码或源码功能失效请联系小编，确认后可立即退款，请勿无理投诉

版权声明 1、本网站名称：轻刻年轮
2、轻刻年轮提供的资源仅供您个人用于非商业性目的。
3、本站文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系客服进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向客服举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
7、本站积分货币获取途径以及用途的解读，想在本站混的好，请务必认真阅读！。
8、本站强烈打击盗版/破解等有损他人权益和违法作为，请各位会员支持正版！

THE END