/bilibili-banner

B站每个季节的头部banner仿写，持续更新

Primary LanguageVue

bilibili 四季 banner仿写 春夏秋冬头部动画仿写 持续更新

图片随着鼠标的位移呈现不同位置的移动以及模糊变换 由于我写的时候已经是21年夏天了，20年季节的banner多为网上仿写学习而来

我发现本地是不允许加载bilibili上的链接的，所以部分只能下载在本地调用，后面要研究一下

注意要通过require获取图片资源，有的有CDN资源，有的是本地获取。例如：require('./2-bi.png')

鼠标移入banner

记录鼠标切入点。

鼠标在banner中移动

通过与鼠标初始未知的差计算偏移量，进行模糊和位移操作。

鼠标移出banner

鼠标移出时缓慢恢复到初始状态方法

  • 使用setInterval每16ms操作一次
  • 使用requestAnimationFrame
  • 直接用CSS3 transition过渡效果

2020秋眨眼效果

应该要判断图片是否加载完成，再进行动画。动画效果可以使用requestAnimationFrame代替setTimeout试试。

  1. 2020秋冬
  2. 2021春
  3. 2021夏 2021年夏季是多组短视频，天台两位小姐姐的一天，打开网页默认是晴天的视频 白天、黄昏、晚上显示不同且随机天气的视频，因此需要读取此刻时间进行操作,在该时段内随机取一个天气 Math.floor(Math.random()*this.summer_daytime.length) 其实里面有很多天气因素，大风下雨什么的，也许可以获取位置信息，再查询当地天气去适应。 鼠标移移出画面复原使用transition过渡效果，在鼠标在banner中关闭transition，防止影响位移。

加粗 倾斜 加粗倾斜

//代码块