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

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

也就一段代码 加一段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;
}

效果图来一张

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

THE END
代码技巧静听电台
# 代码分享# 双十一# 双十一活动
喜欢就支持一下吧
点赞10赞赏 分享
轻刻年轮的头像-轻刻年轮钻石会员
超好看的响应式个人主页导航主页友好的个人介绍页源码分享-轻刻年轮
超好看的响应式个人主页导航主页友好的个人介绍页源码分享
超好看的响应式个人主页导航主页友好的个人介绍页源码分享
3年前 47.3W+
创意下载页自带邀请码的下载页验证码获取内容下载页访问页加密验证页源码-轻刻年轮
创意下载页自带邀请码的下载页验证码获取内容下载页访问页加密验证页源码
创意下载页自带邀请码的下载页验证码获取内容下载页访问页加密验证页...
3年前 30.4W+
粒子发射器有趣的HTML源码代码动态特效制作源码粒子源码-轻刻年轮
粒子发射器有趣的HTML源码代码动态特效制作源码粒子源码
粒子发射器有趣的HTML源码代码动态特效制作源码粒子源码
3年前 24.6W+
修复版姓氏头像框微信小程序制作古风姓名头像生成图片多模板下载支持流量主微信小程序源码-轻刻年轮
修复版姓氏头像框微信小程序制作古风姓名头像生成图片多模板下载支持流量主微信小程序源码
修复版姓氏头像框微信小程序制作古风姓名头像生成图片多模板下载支持...
3年前 21.7W+
修复版单页视频网高仿B站手机端自动采集360视频自定义解析接口源码-轻刻年轮
修复版单页视频网高仿B站手机端自动采集360视频自定义解析接口源码
修复版单页视频网高仿B站手机端自动采集360视频自定义解析接口源码
3年前 15.4W+
我的一个道姑朋友-背景故事-轻刻年轮
我的一个道姑朋友-背景故事
我的一个道姑朋友-背景故事
3年前 11.7W+
相关推荐
我的一个道姑朋友-背景故事-轻刻年轮
我的一个道姑朋友-背景故事
我的一个道姑朋友-背景故事
3年前 11.7W+
用一个姓氏写一句文艺情话!（性格表白）-轻刻年轮
用一个姓氏写一句文艺情话!（性格表白）
用一个姓氏写一句文艺情话!（性格表白）
4年前 3.9W+
网站底部添加网站运行时间代码，自动计算精确到秒-轻刻年轮
网站底部添加网站运行时间代码，自动计算精确到秒
网站底部添加网站运行时间代码，自动计算精确到秒
6年前 1.3W+
从网上搜集到的有趣、实用的的iapp代码-轻刻年轮
从网上搜集到的有趣、实用的的iapp代码
从网上搜集到的有趣、实用的的iapp代码
6年前 1.2W+
搭建自己的PHP二维码API源码-轻刻年轮
搭建自己的PHP二维码API源码
搭建自己的PHP二维码API源码
6年前 1.1W+
网站底部添加访客阅读次数总访问量在线人数代码分享-轻刻年轮
网站底部添加访客阅读次数总访问量在线人数代码分享
网站底部添加访客阅读次数总访问量在线人数代码分享
5年前 1.1W+
评论 抢沙发

请登录后发表评论

    暂无评论内容

旗下时光

一个自用的个人博客导航 记磊导航
网易、QQ、热门排行榜 轻刻音乐
为图片加上专属水印 图片加水印
在线制作网页，短链生成表白网 网页制作
每日更新美图无水印壁纸 在线美图
qq2656431343的头像-轻刻年轮

qq265643134321天前0

你这个ai摘要用的也是别人的系统吗，还是咋弄的
chinshan的头像-轻刻年轮

chinshan徽章-初出茅庐-轻刻年轮28天前0

表情[fendou]-轻刻年轮表情[youhengheng]-轻刻年轮
优盟盒子的头像-轻刻年轮

优盟盒子29天前0

学习一下
wadee的头像-轻刻年轮

wadee徽章-初出茅庐-轻刻年轮4个月前0

我不知道有没有设置，我是直接复制你的代码，只是修改了自己喜欢的图片，其他没有改
wadee的头像-轻刻年轮

wadee徽章-初出茅庐-轻刻年轮4个月前0

博主，您好，主题更新到7.5之后，这个侧边栏不显示背景图片，只是有数据而已，我在浏览器单独访问图片的链接是正常的。
微尘的头像-轻刻年轮

微尘5个月前0

表情[ciya]-轻刻年轮感谢分享
zzzzbbbb的头像-轻刻年轮

zzzzbbbb5个月前0

您好，我这边想跟您聊下亚马逊云科技文章合作事宜，可以加个联系方式详聊下嘛
foer的头像-轻刻年轮

foer徽章-初出茅庐-轻刻年轮6个月前0

谢谢表情[hanxiao]-轻刻年轮
热门文章
超好看的响应式个人主页导航主页友好的个人介绍页源码分享-轻刻年轮

超好看的响应式个人主页导航主页友好的个人介绍页源码分享

付费资源￥1源码程序# 轻刻年轮# 引导页# 源码下载
轻刻年轮的头像-轻刻年轮钻石会员2年前
147.3W+13.3W+
创意下载页自带邀请码的下载页验证码获取内容下载页访问页加密验证页源码-轻刻年轮

创意下载页自带邀请码的下载页验证码获取内容下载页访问页加密验证页源码

免费资源源码程序# 轻刻年轮# 程序源码# 下载页
轻刻年轮的头像-轻刻年轮钻石会员3年前
230.4W+1.4W+
粒子发射器有趣的HTML源码代码动态特效制作源码粒子源码-轻刻年轮

粒子发射器有趣的HTML源码代码动态特效制作源码粒子源码

免费资源源码程序# 轻刻年轮# 特效# 粒子发射器
轻刻年轮的头像-轻刻年轮钻石会员3年前
024.6W+4.4W+
修复版姓氏头像框微信小程序制作古风姓名头像生成图片多模板下载支持流量主微信小程序源码-轻刻年轮

修复版姓氏头像框微信小程序制作古风姓名头像生成图片多模板下载支持流量主微信小程序源码

付费资源200源码程序# 轻刻年轮# 微信小程序# 头像生成
轻刻年轮的头像-轻刻年轮钻石会员2年前
321.7W+25.9W+
修复版单页视频网高仿B站手机端自动采集360视频自定义解析接口源码-轻刻年轮

修复版单页视频网高仿B站手机端自动采集360视频自定义解析接口源码

付费资源￥2源码程序# 轻刻年轮# HTML源码# 程序源码
轻刻年轮的头像-轻刻年轮钻石会员3年前
115.4W+2.5W+
我的一个道姑朋友-背景故事-轻刻年轮

我的一个道姑朋友-背景故事

静听电台# 播放器# 道姑朋友# 我的一个道姑朋友
轻刻年轮的头像-轻刻年轮钻石会员3年前
1011.7W+358
超好看的响应式个人主页导航主页友好的个人介绍页源码分享-轻刻年轮
47.3W+人已阅读
超好看的响应式个人主页导航主页友好的个人介绍页源码分享
TOP1
创意下载页自带邀请码的下载页验证码获取内容下载页访问页加密验证页源码-轻刻年轮
创意下载页自带邀请码的下载页验证码获取内容下载页访问页加密验证页源码
3年前30.4W+人已阅读
TOP2
粒子发射器有趣的HTML源码代码动态特效制作源码粒子源码-轻刻年轮
粒子发射器有趣的HTML源码代码动态特效制作源码粒子源码
3年前24.6W+人已阅读
TOP3
修复版姓氏头像框微信小程序制作古风姓名头像生成图片多模板下载支持流量主微信小程序源码-轻刻年轮
修复版姓氏头像框微信小程序制作古风姓名头像生成图片多模板下载支持流量主微信小程序源码
3年前21.7W+人已阅读
TOP4
修复版单页视频网高仿B站手机端自动采集360视频自定义解析接口源码-轻刻年轮
修复版单页视频网高仿B站手机端自动采集360视频自定义解析接口源码
3年前15.4W+人已阅读
TOP5
我的一个道姑朋友-背景故事-轻刻年轮
我的一个道姑朋友-背景故事
3年前11.7W+人已阅读
TOP6