前端那些好看的视觉效果集合

雨点打透心脏的1/2处 2023-03-02 10:26 154阅读 0赞

**说明：该合集均来自网络收集，笔者仅做学习之用，每一个效果页面都会附带来源，代码均托管在笔者的gitee仓库`https://gitee.com/suiboyu/front_page_effect_collection`**

# 1. 视觉滚动差 #

###### https://www.bilibili.com/video/BV1Yt4y127Ds ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]

# 2. 滑动图片 #

###### https://www.bilibili.com/video/BV1cA411t7sF ######

![在这里插入图片描述][20200729212351156.gif_pic_center]

# 3. 书本翻动特效 #

###### https://www.bilibili.com/video/BV127411v7bo ######

![在这里插入图片描述][20200910204020452.gif_pic_center]

# 4. Input 输入框聚焦变宽 #

![在这里插入图片描述][20200919154436651.gif_pic_center]

###### https://www.cnblogs.com/jr1993/p/4743914.html ######

# 5. 切换效果1 #

![在这里插入图片描述][2020111020553117.gif_pic_center]

###### https://codepen.io/andrejsharapov/pen/jJXEGq ######

# 6. 切换效果2 #

![在这里插入图片描述][20201110210300741.gif_pic_center]

###### https://codepen.io/0guzhan/pen/YvNmwJ ######

# 7. 切换效果3 #

![在这里插入图片描述][20201110211109884.gif_pic_center]

###### https://codepen.io/tylerfowle/pen/vEqXMV ######

# 8. 切换效果4 #

![在这里插入图片描述][20201110211405641.gif_pic_center]

# 9. 翻转Card #

###### https://codepen.io/AbubakerSaeed/pen/EJrRvY ######

![在这里插入图片描述][20201209090952510.gif_pic_center]

# 10. 米老鼠时钟 #

###### https://codepen.io/jaysalvat/pen/ogQbKB ######

![在这里插入图片描述][2020120909112693.gif_pic_center]

###### https://codepen.io/siseer/pen/MBameP ######

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/25dbe1069f954a179ddf3c80f2437380.png
[20200729212351156.gif_pic_center]: /images/20230208/247dd94bc2a641baaabb6c60f2e9635e.png
[20200910204020452.gif_pic_center]: /images/20230208/42068ee01d2f46e4a09f90b66da88f3f.png
[20200919154436651.gif_pic_center]: /images/20230208/12d07101162c472ba3421443cc30164c.png
[2020111020553117.gif_pic_center]: /images/20230208/922ee9e403f44800ac63f1dc0cc9cb3b.png
[20201110210300741.gif_pic_center]: /images/20230208/f76796d1950e4a5d82ed703deb4299cb.png
[20201110211109884.gif_pic_center]: /images/20230208/8e7cfba63d004b7b9f10b658b6768df4.png
[20201110211405641.gif_pic_center]: /images/20230208/66364bf8acd0477ab59990ee2ae42c63.png
[20201209090952510.gif_pic_center]: /images/20230208/1cfca6a708e44b5dada39dc8fd3fc4da.png
[2020120909112693.gif_pic_center]: /images/20230208/2424a7c207c647f69fcaf069d2217678.png