这篇文章介绍了一个在博客网站右上角添加悬挂年兽的方法。通过在CSS代码中插入相应的素材链接,可以实现在网站右上角挂上一个龙的效果。对于自定义主题的网站,可以将相关的CSS和HTML代码添加到自定义头部中。对于全屏网站,建议在CSS代码的16行左右插入一行代码以实现相应效果。
简介-教程
换新颜新气象,给网站右上角挂一个龙,吸吸龙气
css第6行放入下面素材链接(本站开了防盗所以给你也无用就放下面了)
如果你的主题是自定义,那就是主题设置自定义里面
自定义css
@media screen and (min-width: 850px){
.NewYear {
width: 260px;
height: 300px;
display: inline-block;
background: url(图片地址) no-repeat 50%/100%;
vertical-align: middle;
position: fixed;
left: 85.8%;
top: 55px;
z-index: 50;
cursor: pointer;
animation: new-year 1.2s ease-in-out 0s infinite alternate;
margin-left: -1px;
transform-origin: 50% 0;
pointer-events: none;
}
}
@keyframes new-year{
0% {
transform: rotate(10deg);
}
100%{
transform: rotate(-10deg);
}
}
html放到你的自定义头部html即可!!
<div class="NewYear"></div>
注意:如果你的是全屏网站建议在pointer-events: none;下面加一行
即css代码16行左右哪里加
z-index: 999;
演示图
素材下载
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容