网站左边增加悬浮图双十一抢红包活动代码

最新推荐文章于 2023-05-12 17:23:57 发布
最新推荐文章于 2023-05-12 17:23:57 发布
阅读量406 收藏
点赞数
分类专栏： 特效代码 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haomu96/article/details/120967249
版权

网站左边增加悬浮图双十一抢红包活动代码，抢红包，购痛快。 在某个网站看见个左边悬浮挂件非常不错就顺手趴下来了，动态效果的，最近双十一快到了应该很多站长朋友都用得到，可以用来做双十一优惠领红包活动入口，手机也一样自适应。
网站左边增加悬浮图双十一抢红包活动代码-浩沐资源网

大家都在想着各种方法引流，那么今天就告诉大家如何在自己的网站上添加悬浮图引流双十一抢红包活动。

首页添加代码如下

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

CSS规则如下

/* 浩沐资源网 整站模板下载网站 www.dhaomu.com */
/* QQ：291920666 */
/* 仿站：www.htianzi.com */
/* 源码：www.dhaomu.com */
/* 自定义 */
@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://img.dhaomu.com/wp-content/uploads/2021/10/1635214657-4ec4697e3f4d10d.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://img.dhaomu.com/wp-content/uploads/2021/10/1635214657-4ec4697e3f4d10d.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;
}

展示效果如下

网站左边增加悬浮图双十一抢红包活动代码-浩沐资源网

渡漳
关注
专栏目录
几行代码教你轻松瓜分双十一20亿红包
wulishinian的博客
11-05 797
这几天，双十一的活动有没有把你折腾的不轻呢？如果没有，只有两种可能：一，你没女朋友；二，你没有女性朋友，不然你一定会收到如下消息： 要知道阿里每年都会发放大量红包、各种优惠券和各种互助游戏…而这两天，马爸爸的“ATM”们可都沉迷于这些个互助游戏里不可自拔，吾日三省吾身：签到了？做任务了么？升级了么？： 一般我们程序员对这种游戏都是没什么太大兴趣，毕竟每天都有找不完的Bug，加不完的班，但是假如...
双11抢红包代码
weixin_30888413的博客
10-27 193
发个群福利，天猫双11红包自动抢代码 使用chrome/firefox浏览器，打开http://s.click.taobao.com/yJK1Nmx，登录自己的淘宝账号，然后按"F12"，在"console"里粘贴以下代码 var AutoClick=$; function getHb(){ if(AutoClick("div[clk='core:close']")!=null){...
2023 网站添加左侧固定悬浮领红包代码
05-12 366
最近几天，支付宝发起了春季消费节红包活动，吸引了众多用户的关注和参与。为了方便网站访客扫码领取红包，我编写了一个左侧固定悬浮代码，使用PS软件对二维码进行修改并替换URL链接。这样，访客可以轻松扫码参与活动，提高用户体验和参与度。
图片在网页上漂浮的代码
01-20
图片在网页上漂浮的代码,适用于IE版浏览器。
html左侧悬浮广告,HTML网页漂浮广告原理js实现
weixin_39694016的博客
05-30 302
#demo {width: 100px;height: 100px;position:absolute;border-radius:50px;}window.onload = function(){var demo = document.getElementById('demo');var sx = sy = 10;var x = y = 0;function move(){if(document...
网站左角悬浮图双十一抢红包活动代码
最新发布
07-14
【标题】：“网站左角悬浮图双十一抢红包活动代码”是指一种特定的编程技术，用于在网站的左上角设计一个浮动的图像或按钮，该元素会在用户滚动页面时始终保持在屏幕的一角，吸引访客注意力，从而引导他们参与双十一...
WAP/手机网页底部悬浮图片定时翻滚广告代码特效单图带关闭按钮
01-05
其中，一种常见的营销手段是使用广告来吸引用户注意力，而"WAP/手机网页底部悬浮图片定时翻滚广告代码特效单图带关闭按钮"正是这种策略的体现。这个特效代码旨在提供一种在手机网页底部展示滚动广告的方式，既能吸引...
jQuery网站右侧悬浮楼层滚动导航代码
06-05
【jQuery网站右侧悬浮楼层滚动导航代码】是一种网页交互设计技术，用于提高用户在浏览网站时的导航体验。这种技术利用JavaScript库jQuery实现，使得导航菜单始终保持在屏幕右侧，即使页面内容向下滚动，导航仍然可见...
jQuery网站右侧悬浮在线客服代码.zip
07-11
【jQuery网站右侧悬浮在线客服代码】是一个用于网页的JavaScript实现，它使用了流行的jQuery库来创建一个始终在页面右侧显示的浮动式在线客服系统。这个系统通常用于网站，以便为访客提供即时的客户服务或支持，提升...
jQuery网站右侧悬浮在线客服代码
06-24
这个"jQuery网站右侧悬浮在线客服代码"就是一个实现此类功能的示例，它仿照了知名网站美橙官网的设计风格，使用户可以方便地与客服进行实时交流，提升网站的互动性和服务质量。 首先，jQuery是一个广泛使用的...
双11红包前端jQuery
12-01
插件描述：双11红包前端jQuery. 参考示例：http://www.jq22.com/jquery-info4896
悬浮广告：会议网站模板
02-03
| 总览 Project Hoverboard是会议网站模板，可帮助您在几分钟内建立具有博客，演讲者和日程表管理功能的移动优先会议网站。 该模板是根据团队7年的运行会议经验以及来自世界各地500多个使用先前Hoverboard版本的活动组织者的反馈而创建的。 我们的目标是允许活动组织者以最少的资源建立一个专业的会议网站。 首先，您只需要Web技术的基本知识和免费的Firebase帐户。 产品特点 特征 描述 快速优化 91/100 PWA 离线工作 场地上糟糕的WiFi不再是问题 移动优先 针对小屏幕进行了优化的布局，Hoverboard可以作为本机应用程序安装在手机上 推送通知 通
苏宁双11全屏弹出代码.rar
07-04
网站采用苏宁模块，与大家分享！
wap红包弹出框
03-02
wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包http://wap.cdznrx.com/zt/rtnx180105/ http://wap.cdznrx.com/zt/rtnx180105/ http://wap.cdznrx.com/zt/rtnx180105/ 弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框wap红包弹出框
jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.zip
07-11
HTML5微信红包抽奖红包雨特效动画js效果下载。一款非常实用的红包雨抽奖jQuery插件，背景红包雨动画非常炫酷，带抽奖弹窗提示。
php网页怎么做漂浮图片,网页上怎么让图片出现自由漂动的效果？（js代码示例）...
weixin_39636857的博客
03-11 654
有时候我们在打开某些网站时，会立即飘出一个广告式的图片在你面前晃悠，当然对于站长来说这是为了让用户能够第一时间看到他们的广告或者重要信息等，对于用户来说，可选择性观看这些图片信息，自然是更重要的。那么今天这篇文章主要介绍关于网页漂浮代码(图片漂浮可选择性关闭)的具体演示。希望对感兴趣的朋友有所帮助。js漂浮广告代码具体示例如下：关闭 网站漂浮代码测试var xPos = 300;var yP...
双十一频繁弹窗，一招解决
gaowei15750194853的博客
10-29 1382
双十一没来的时候，偶尔一两个广告，小编还能接受，现在，隔几分钟弹一个广告，这尼玛劳资暴脾气都来了，今天小编分享一个超级好用的弹窗解决方案。 电脑上安装电脑管家（若有其他杀毒软件，先自行卸载，一台电脑只装一个杀毒软件，别问我为什么）， 点击工具箱 找到软件弹窗拦截 手动添加 全选（太流氓了，连输入法都植入了广告） 好了，该搬砖了，记得多喝水。 ...
常用的页面左右边及漂浮图片代码
zgqtxwd的专栏
05-01 1777
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
京东网站的悬浮代码实现解析
在网页设计中，"京东漂浮代码"通常是指用于实现京东网站上特定元素（如广告、导航栏等）在页面滚动时始终保持固定位置的JavaScript或CSS代码。这种效果也被称为"固定定位"或者"粘性定位"，它能够提升用户体验，使...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

渡漳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值