子比主题 – 左边悬浮动态抢红包代码

060
子比主题 – 左边悬浮动态抢红包代码-繁星博客
子比主题 – 左边悬浮动态抢红包代码
此内容为付费阅读，请付费后查看
￥9.9￥29.9
暂时无法购买，请与站长联系
您当前未登录！建议登陆后购买，可保存购买订单
付费阅读

文章最后更新时间：2025-01-09 22:56:06

一款左侧悬浮挂件，动态抖动效果，很多站长用于自己的网站来点击跳转到活动入口，可以用来做自己的左侧悬挂效果，这是PC是悬浮挂件，手机自适应的，这个适应很多网站，不止是子比，我只是在这里分享子比的教程

子比主题 – 左边悬浮动态抢红包代码-繁星博客

代码部署

本文付费阅读内容 – 月度会员免费

css代码较长，建议单独新建css文件，随便文件名字，你要知道新建css的文件目录，这里我就不详说了，直接开始代码

CSS代码HTML代码素材

自己在自己的服务器新建一个CSS文件，放进去

@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(/tb.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(/tb.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;
}

我们可以看到下面的618.css那个就是你刚才新建的css文件目录，然后推广链接你自己随便填，输入你的活动链接即可

在子比主题->>全局-自定义代码->>自定义头部/底部HTML填写如下代码：

<!– 修改此处css地址 –>
<link rel=\”stylesheet\” href=\”/618.css\” type=\”text/css\” media=\”all\”>
<div class=\”tmall_tab\”>
<!– 修改此处为自己的推广链接 –>
<a href=\”自己的推广链接\” target=\”_blank\” class=\”mm_wf_d11_shake\”></a>
</div>

在这里分享两个素材，这两个素材，放在你刚才的CSS文件里面的代码，将素材上传到你的服务器，获取素材链接，放到CSS里面即可，素材下载方式：点击图片，右上角下载即可

素材一

子比主题 – 左边悬浮动态抢红包代码-繁星博客

素材二

子比主题 – 左边悬浮动态抢红包代码-繁星博客

文章版权声明 1 本网站名称： 繁星博客
2 本站永久网址：https://masetii.com

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
子比美化
喜欢就支持一下吧
点赞0 分享
masetii的头像-繁星博客钻石会员
在网站右上角悬挂年兽，给博客喜增新年气氛-繁星博客
在网站右上角悬挂年兽，给博客喜增新年气氛
在网站右上角悬挂年兽，给博客喜增新年气氛
6天前 5
子比主题 – 文章顶部添加文章信息v4.0插件版-繁星博客
子比主题 – 文章顶部添加文章信息v4.0插件版
子比主题 – 文章顶部添加文章信息v4.0插件版
6天前 5
网站邮件模板美化教程-繁星博客
网站邮件模板美化教程
网站邮件模板美化教程
6天前 5
子比主题聚合美化插件-全局,导航,局部,文章等功能（V3.2全开源版）-繁星博客
子比主题聚合美化插件-全局,导航,局部,文章等功能（V3.2全开源版）
子比主题聚合美化插件-全局,导航,局部,文章等功能（V3.2全开源版）
6天前 5
子比主题 – 文章列表上浮蓝色边框扫动样式-繁星博客
子比主题 – 文章列表上浮蓝色边框扫动样式
子比主题 – 文章列表上浮蓝色边框扫动样式
6天前 4
子比主题 – 自定义顶部导航栏默认用户头像图标-繁星博客
子比主题 – 自定义顶部导航栏默认用户头像图标
子比主题 – 自定义顶部导航栏默认用户头像图标
6天前 4
相关推荐
子比主题 – 左边悬浮动态抢红包代码-繁星博客
子比主题 – 左边悬浮动态抢红包代码
子比主题 – 左边悬浮动态抢红包代码
6天前 6
子比主题 – 文章顶部添加文章信息v4.0插件版-繁星博客
子比主题 – 文章顶部添加文章信息v4.0插件版
子比主题 – 文章顶部添加文章信息v4.0插件版
6天前 5
在网站右上角悬挂年兽，给博客喜增新年气氛-繁星博客
在网站右上角悬挂年兽，给博客喜增新年气氛
在网站右上角悬挂年兽，给博客喜增新年气氛
6天前 5
网站邮件模板美化教程-繁星博客
网站邮件模板美化教程
网站邮件模板美化教程
6天前 5
子比主题聚合美化插件-全局,导航,局部,文章等功能（V3.2全开源版）-繁星博客
子比主题聚合美化插件-全局,导航,局部,文章等功能（V3.2全开源版）
子比主题聚合美化插件-全局,导航,局部,文章等功能（V3.2全开源版）
6天前 5
子比主题 – 文章列表上浮蓝色边框扫动样式-繁星博客
子比主题 – 文章列表上浮蓝色边框扫动样式
子比主题 – 文章列表上浮蓝色边框扫动样式
6天前 4
评论 抢沙发

请登录后发表评论

    暂无评论内容