前端那些好看的视觉效果集合 雨点打透心脏的1/2处 2023-03-02 10:26 64阅读 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
还没有评论,来说两句吧...