新年了!纯代码给网站装饰一对动态红灯笼

前言:

在B站上看到一个老哥做的新年红灯笼,感觉挺不错的,在他的基础上拿来修改一下!

有兴趣可以看看这个老哥制作的全过程:

https://www.bilibili.com/video/BV1mD4y1H7wv

修改:

我主要修改了以下内容:

  • 增加手机端适配,在PC端的基础上将灯笼的大小缩小为原来的0.66倍来适配PC端
  • 增加了点击灯笼显示还有多少天过年
  • 手机端透明度为PC端的0.5倍,防止遮挡视野
  • 将位置设置成absolute绝对定位,当然你也可以弄成fixed固定

PC端效果图:

图片[1]-新年了!纯代码给网站装饰一对动态红灯笼-懒人Blog(资源素材网)

手机端效果图:

图片[2]-新年了!纯代码给网站装饰一对动态红灯笼-懒人Blog(资源素材网)

代码:

自定义头部HTML代码

<div class="left-lantern lantern">
      <!-- 顶部绳索 -->
      <div class="lantern-rope lantern-top-rope "></div>
      <!-- 提手 -->
      <div class="lantern-handle lantern-top-handle"></div>
      <!-- 中间部分 -->
      <div class="lantern-center">新年</div>
      <!-- 下提手 -->
      <div class="lantern-handle lantern-bottom-handle"></div>
      <!-- 绳 -->
      <div class="lantern-bottom">
        <div class="lantern-rope lantern-bottom-rope"></div>
        <!-- 灯穗 -->
        <div class="lantern-panicle"></div>
      </div>
    </div>
    <div class="right-lantern lantern">
      <!-- 顶部绳索 -->
      <div class="lantern-rope lantern-top-rope "></div>
      <!-- 提手 -->
      <div class="lantern-handle lantern-top-handle"></div>
      <!-- 中间部分 -->
      <div class="lantern-center">快乐</div>
      <!-- 下提手 -->
      <div class="lantern-handle lantern-bottom-handle"></div>
      <!-- 绳 -->
      <div class="lantern-bottom">
        <div class="lantern-rope lantern-bottom-rope"></div>
        <!-- 灯穗 -->
        <div class="lantern-panicle"></div>
      </div>
    </div>

回复获取:

—来源于倦意博客


👋 感谢您的观看,对您有用就分享出去吧 !

如您有好的资源/素材,可参与创作者激励计划享投稿分成。分成介绍
投稿成功收录,即可获得 1-10元/篇奖励。(重复内容无奖励)
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
© 版权声明
THE END
文章不错?点个赞呗
点赞5赞赏 分享
评论 共1条

请登录后发表评论

随机看看好帖需要善于发现
热门圈子总有聊不完的话题