首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

如何用原生 JS 复刻 Bilibili 首页头图的视差交互效果

,我也沉浸在这片“海洋”中疯狂摸鱼:尝试只使用原生 JS 来复刻它,最终实现了非常还原的效果:图片可点击图片进入 码上掘金 中体验完整效果。...我们打开控制台观察B站首页头图对应的 DOM 结构,会看到处理的对应变换包括了:平移(translate)、旋转(rotate)、缩放(scale)等,此外还有透明度可能也会随之改变。...matrix(2,0,0,1.5,0,0);即等价于:transform: scale(2, 1.5)学会了如上这一基础变换,后面我们实现等比缩放的操作就非常简单了,往这两个系数乘上一个缩放倍数(假设为...这种方式虽然没什么问题,但需要额外利用 CSS 才能实现,能不能只用 JS 来做呢,我们先分析下 transition 中两个主要的参数:持续时间动画函数其实只要搞懂这两个参数,我们就可以用 JS 来实现...加餐本来到这里就该结束了,但正好在文章写完那天,我登录B站时发现首页头图更新了。。那敢情好啊,我就把新出的效果也复刻一下吧!不过上面的代码是一行也不用改动的,只需要换一套数据就行了。

22960

Django 博客首页视图

比如你访问了我的博客主页 http://zmrenwu.com/,服务器接收到这个请求后就知道用户访问的是首页首页显示的是全部文章列表,于是它从数据库里把文章数据取出来,生成一个写着这些数据的 HTML...views.py from django.http import HttpResponse def index(request): return HttpResponse("欢迎访问我的博客首页...浏览器接收到这个响应后就会在页面上显示出我们传递的内容 :欢迎访问我的博客首页!...欢迎访问我的博客首页! 使用 Django 模板系统 这基本上就上 Django 的开发流程了,写好处理 HTTP 请求和返回 HTTP 响应的视图函数,然后把视图函数绑定到相应的 URL 上。...', 'welcome': '欢迎访问我的博客首页' }) 这里我们不再是直接把字符串传给 HttpResponse 了

1.1K50

首页文章卡片修改

2022-03-31:内测版v0.07 发布预览截图 编写开发思路 吐槽贰猹 参考方向 教程原贴 本帖的卡片原设为贰猹提供 贰猹の小窝 Flex布局参数解释 Flex 布局教程:语法篇 - 阮一峰的网络日志...CSS伪类实现三角形绘制 纯CSS 实现绘制各种三角形(各种角度) - saucxs - 博客园 思路讲解 在很久很久以前,到底有多久呢,我查了下聊天记录, image.png 贰猹和我交流了下他对主题首页卡片的设计想法...所以,通过调整盒子四条边的border,同时把内部元素的长宽都设为0,就可以拼出三角形。缺点则是border没法设置background-image,没法直接把拼出的三角形当成相框来用。...侧栏的 SAO 卡片效果要改,直接画出好看的边框,首页的文章卡片要改,反正不能再搞不靠谱的三角形伪类拼接。还有以前写的 SAO 血条,啊,那个项目我是打算废弃了。

91920
领券