A Long Story

凡哥 · 发表于 2024-9-7 11:00

本帖最后由凡哥于 2024-9-7 20:06 编辑

凡哥 · 发表于 2024-9-7 11:05

帖子代码（375楼）：http://43.159.199.78/forum.php?m ... 2691&pid=526706

本帖小播的拖曳功能采用另一种方式实现，是通过监听 mouse* 系列事件来驱动小播的移动。帖子在全屏/常规模式切换时可能会出现小播回归初始的位置，期间小播运行轨迹可见。

凡哥 · 发表于 2024-9-7 11:08

小播样式使用 CSS+HTML 绘制而成，具体实现方法是，两个伪元素通过 border* 属性数值外加 box-shadow和旋转一定角度等方式构建，最后再给出 filter 滤镜阴影。

凡哥 · 发表于 2024-9-7 11:12

帖子背景图片网格化效果来源于原图，原图是 avif 格式的图片，由于担心一些浏览器尚未支持，转成了 webp 格式。

扬帆 · 发表于 2024-9-7 15:41

太厉害了！
又一种方式实现小播的拖曳功能
谢谢老师经典分享

花简静 · 发表于 2024-9-7 16:48

这个漂亮的小播已成实例了。。
贴子色彩柔和的很，有点点低饱合，低调不张扬。。

花简静 · 发表于 2024-9-7 16:48

这个漂亮的小播已成实例了。。
贴子色彩柔和的很，有点点低饱合，低调不张扬。。

花简静 · 发表于 2024-9-7 16:49

小播花瓣居然还有一圈镂空边框，更好看了。。
加了阴影后很有立体感。。
且这个黑色的阴影无论把小播拖动到浅色背景还是深色立体感都存在。
刚才跟贴的时候试着换了别的颜色，都不合适，最终还是换回黑色。。

花简静 · 发表于 2024-9-7 16:51

凡哥发表于 2024-9-7 11:05
帖子代码（375楼）：http://43.159.199.78/forum.php?mod=redirect&goto=findpost&ptid=12691&pid=526706

...

拖曳有不同的实现方式，太精彩了。。

花简静 · 发表于 2024-9-7 16:53

凡哥发表于 2024-9-7 11:08
小播样式使用 CSS+HTML 绘制而成，具体实现方法是，两个伪元素通过 border* 属性数值外加 box-shadow和旋转 ...

这个 border* 属性数值可以画画，且很形象生动，加上阴影的立体感，更是好看。。

[特效] A Long Story