(附源码)抖音超火圣诞树教程(适配手机,附线上demo)

文章目录

  • 前言
  • 问题
    • 1.运行报错
    • 2.自适应问题
  • 效果图
  • 源码
  • 总结


前言

网上超火的圣诞树教程。
在原有基础上增加了改进,添加了雪花,飘雪,以及光晕效果。
个人还是比较喜欢钻研琢磨,有更好看的欢迎留言!!
直接上干货!!!!


博主是学vue比较多,所以把代码集成了vue组件。

问题

1.运行报错

由于代码中用到了with代码块,但是在vue脚手架的严格模式下会无法运行导致报错!!
而且会影响代码的上传。
不过!!
解决也十分简单!!
禁用严格模式即可!!
(附源码)抖音超火圣诞树教程(适配手机,附线上demo)_第1张图片

(附源码)抖音超火圣诞树教程(适配手机,附线上demo)_第2张图片

2.自适应问题

在不同显示屏下的显示问题,由于装逼很多人都会用手机打开!!
so!!
做了一个简单的自适应问题!!
使用css的media自媒体查询实现手机情况下的自适应问题!!
(附源码)抖音超火圣诞树教程(适配手机,附线上demo)_第3张图片

效果图

圣诞树会转!!会转!!会转!!

话不多说上代码!!!

源码

github地址:https://github.com/a1755252380/shengdanshu
线上demo:http://www.linan996.xyz:8001/

总结

(附源码)抖音超火圣诞树教程(适配手机,附线上demo)_第4张图片

逼格必须拉满!!!不用感谢 !我要开始装逼了!
代码不会用的话!!还有线上demo直接发给她就完了!!

你可能感兴趣的:(vue,vue.js,javascript,前端)