统计
  • 文章总数:248 篇
  • 评论总数:624 条
  • 分类总数:7 个
  • 最后更新:4月2日

右上角添加悬挂年兽喜增龙年喜气

本文阅读 1 分钟
首页 建站项目 正文
这段代码是用于创建一个新年挂件,适用于屏幕宽度大于850px的情况。挂件包括图片背景,固定在屏幕右上角,具有动画效果。通过CSS设置挂件的样式,包括尺寸、位置、动画等属性。HTML代码中包含一个具有NewYear类的div元素用于展示挂件。通过以上代码,实现了一个飘逸的新年特效挂件,为页面添加了一丝节日氛围。
摘要由智能技术生成

自定义css,填写如下代码

  1. @media screen and (min-width: 850px){
  2. .NewYear {
  3. width: 260px;
  4. height: 300px;
  5. display: inline-block;
  6. background: url(图片地址) no-repeat 50%/100%;
  7. vertical-align: middle;
  8. position: fixed;
  9. left: 85.8%;
  10. top: 55px;
  11. z-index: 50;
  12. cursor: pointer;
  13. animation: new-year 1.2s ease-in-out 0s infinite alternate;
  14. margin-left: -1px;
  15. transform-origin: 50% 0;
  16. pointer-events: none;
  17. }
  18. }
  19. @keyframes new-year{
  20. 0% {
  21. transform: rotate(10deg);
  22. }
  23. 100%{
  24. transform: rotate(-10deg);
  25. }
  26. }

自定义html代码,填写如下代码

  1. `<div class="NewYear"></div>`

CSS代码放到自定义css文件里面,html放到你的自定义头部html即可!!

注意:如果你的是全屏网站建议在pointer-events: none;下面加一行

即css代码16行左右哪里加

z-index: 999;

要不然会被文章的上浮遮挡!!

下载附件

来源:城通网盘 | 提取码:8188

效果图

Test

本文来自投稿,不代表本站立场,如若转载,请注明出处:
-- 展开阅读全文 --
简洁的可变透明度返回顶部按钮
« 上一篇 07-13
使用U盘搭建Web本地服务器
下一篇 » 02-16

发表评论

  • 泡泡
  • 阿呆
  • 阿鲁
  • 蛆音娘

行为验证™ 安全组件加载中...

发表评论
AI
AI在线
以确保在用户需要帮助时能够及时提供解答和技术支持
您好,这里是「乙未极客」,请问有什么能帮到您?