• 技术文章 >web前端 >js教程

    10个知道收藏的酷炫转场特效

    青灯夜游青灯夜游2021-09-14 11:02:31转载97

    本文将给大家介绍十个 「“酷炫"」 的转场特效,希望作者精心录制的十个 Gif 转场动画能让大家眼前一亮,当然更希望这些特效能给大家设计转场效果时带来一些新的 「”灵感“」

    加载动画页面转场特效

    示例说明:当页面加载完成后,会产生酷炫的转场特效。

    示例来源:Arsen Zbidniakov

    在线地址:https://codepen.io/ARS/pen/wavXgQ

    「静态效果图」

    2.png

    「Gif 动态效果图」

    2-2.gif

    3D 轮播分割特效

    示例说明:当用户切换至下一张轮播图的时候,会产生分割效果的 3D 转场特效。

    示例来源:Paul Noble

    在线地址:https://codepen.io/paulnoble/details/yVyQxv

    「静态效果图」

    3.png

    「Gif 动态效果图」

    3-2.gif

    3D 页面翻转特效

    示例说明:当用户切换至下一个页面时,会产生 3D 翻转转场特效。

    示例来源:Robert Bue

    在线地址:https://codepen.io/robbue/pen/ugByC

    「静态效果图」

    4.png

    「Gif 动态效果图」

    4-2.gif

    内容缩放转场特效

    示例说明:当点击菜单后,显示内容时会出现内容展开动画。

    示例来源:Tobias Glaus

    在线地址:https://codepen.io/tobiasglaus/pen/oZJdZY

    「静态效果图」

    5.png

    「Gif 动态效果图」

    5-2.gif

    缩略图到全屏转场特效

    示例说明:当用户点击缩略图时,会通过转场进入全屏模式并显示图片说明信息。

    示例来源:Steve Gardner

    在线地址:https://codepen.io/ste-vg/pen/NALWrj

    「静态效果图」

    6.png

    「Gif 动态效果图」

    6-2.gif

    卡片扩展页面转场特效

    示例说明:当点击卡片时,会产生卡片扩展页面转场特效。

    示例来源:Rachel Smith

    在线地址:https://codepen.io/rachsmith/pen/PWxoLN

    「静态效果图」

    7.png

    「Gif 动态效果图」

    7-2.gif

    单页滚动景深特效

    示例说明:当在页面中滚动鼠标滚轮时,会产生景深转场特效。

    示例来源:Nikolay Talanov

    在线地址:https://codepen.io/suez/pen/JoWKKX

    「静态效果图」

    8.png

    「Gif 动态效果图」

    8-2.gif

    单页滚动倾斜特效

    示例说明:当在页面中滚动鼠标滚轮时,会产生倾斜转场特效。

    示例来源:Nikolay Talanov

    在线地址:https://codepen.io/suez/pen/gadLre

    「静态效果图」

    9.png

    「Gif 动态效果图」

    9-2.gif

    六边形圆板过渡特效

    示例说明:当用户点击页面上的六边形时,会产生圆板过渡转场特效。

    示例来源:Ryan Mulligan

    在线地址:https://codepen.io/hexagoncircle/details/MKaVzM

    「静态效果图」

    10.png

    「Gif 动态效果图」

    10-2.gif

    粘性边缘特效

    示例说明:当用户切换至下一张图片的时候,会产生粘性边缘的转场特效。

    示例来源:Zoey Fan

    在线地址:https://codepen.io/zoeyfan/pen/ExVaXGK

    「静态效果图」

    1.png

    「Gif 动态效果图」

    1-2.gif

    原文地址:https://juejin.cn/post/6847009772672122894

    作者:阿宝哥

    更多编程相关知识,请访问:编程入门!!

    以上就是10个知道收藏的酷炫转场特效的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:前端 转场特效
    上一篇:一文快速了解Nodejs中的模块系统 下一篇:一招教你使用Node.js中iis部署运行node(附代码)
    线上培训班

    相关文章推荐

    • 10款好看且实用的文字动画特效,让你的页面更吸引人!• 精选8个菜单导航切换特效代码分享(免费下载)• 手把手教你使用CSS3实现按钮悬停闪烁动态特效• 纯CSS3创建边框阴影向外扩散的动画特效

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网