这段代码是用于创建一个新年挂件,适用于屏幕宽度大于850px的情况。挂件包括图片背景,固定在屏幕右上角,具有动画效果。通过CSS设置挂件的样式,包括尺寸、位置、动画等属性。HTML代码中包含一个具有NewYear类的div元素用于展示挂件。通过以上代码,实现了一个飘逸的新年特效挂件,为页面添加了一丝节日氛围。
自定义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代码,填写如下代码
`<div class="NewYear"></div>`
CSS代码放到自定义css文件里面,html放到你的自定义头部html即可!!
注意:如果你的是全屏网站建议在pointer-events: none;下面加一行
即css代码16行左右哪里加
z-index: 999;
要不然会被文章的上浮遮挡!!
下载附件
效果图
本文来自投稿,不代表本站立场,如若转载,请注明出处: