今天给大家盘一盘优秀的动态网页设计。这些网页通常当用户和网页进行交互行为时，触发动态视觉效果以提升用户体验。我们将从交互方式和动画视觉效果进行分类解析。
01—悬停效果通过鼠标hover或点击时进行视觉内容变幻，这是最常规的设计，通常用于导航处来提供更多信息给用户做访问判断。基础属性变化blimp艺术网站，艺术项目以卡片形式呈现，hover卡片浅色底变深色，并且伴有卡片外框频闪的效果。这个网站很多导航块hover都有频闪效果，是网站的艺术观察主旨的视觉化。
?https://www.blimp.gr/
thehungryfamily餐厅网站，菜单以类齿轮卡片形式出现，hover卡片被放大，并且继续滚动浏览卡片像小齿轮开始旋转，也是结合滚动视差设计的网站。?https://thehungryfamily.com/bon-bouquet-cafe/
pierrelavigne音乐网站，hover每张专辑封面，封面从方形变成圆形并旋转，既区别于未播放的，同时动画也映射了唱片播放，很是有趣。?https://www.pierrelavigne.com/
元素结合/替换bruut工作室的能力介绍导航模块，hover时则结合视频对该模块内容进行预告。?https://bruut.media/amici餐馆网站的介绍菜单项，hover右侧出现对应图片内容。
kkapustin设计师个人网站，在hover作品内容块时，会切换作品图方便进行快速预览。?https://kkapustin.com/
文字动效文本块悬停也可以做很多动态效果，在此找了一些动效可以作为文字导航的灵感参考。
02—指针样式纯视觉kkapustin设计师个人网站，在hover不同内容会配合不同指针样式，和整体网站活泼风格一致。?https://kkapustin.com/Drive Capital的活动页以车为主视觉，鼠标指针也配合设计为方向盘，很是有趣。barleysgville美食网站，hover啤酒产品的详情说明的问号图标时，鼠标指针也做了相应改变。
还有collastudio网站指针，在划过导航链接时进行内容反色处理，凸显指针所处内容区域。
功能性GoodWebDesign优秀网站设计案例，每个案例以图文展示，当鼠标hover在网址上时，指针图标会变成打开，提示点击即可跳转至该网站。
?https://good-web-design.com
kitchen154一家西班牙餐厅网站，当点开预定窗口后，hover弹窗外部光标都是「✖️」提醒点击即可关闭弹窗。
?https://kitchen154.com/
03—悬停移动视差悬停视差是将视觉元素分层，通过鼠标悬停触发元素变化或利用移动速度的不同造成元素间视觉差异，产生更有趣的动画体验。移动视差和滚动视差则只是鼠标触发交互不同而已。动画效果这次简单从元素移动、变形两种分析举例。元素移动intrapan面包网站，首屏面包会随鼠标移动产生轻微位移，有伪3D体验。配合滚动视差让网站浏览体验完全不会枯燥。
?https://intrapan.it/
amici餐馆网站就把小小视差做到极致。首屏的文字介绍，移动鼠标就会出现餐馆的各种宣传图，根据移动速度不同图片出现速度也不同。继续滚动可以看见前后景元素移动速度不一致而有不同视觉体验。
?https://restaurant-amici.com/
davidwhyte诗人作品网站，当鼠标滑过时画面“水雾”消散，背景图变清晰，网站风格也因此更写意。
?https://davidwhyte.com/experience/
元素变形Hello Monday 设计案例网站，将设计案例以瀑布流形式排列，当鼠标经过时图片像液体一样被推开，产生水波流动的效果，和整体内容瀑布流体验一致。
?https://hellomonday.com/
Nodcording编程训练营网站设计也很Q弹，所有hover效果都Q到一致。
?https://nodcoding.com/
还有透视故障悬停效果，hover时将图片进行透视形变，再加上加入伪影、波浪、信号和发散等故障艺术效果，色彩鲜明风格强烈。
复杂动画Dtampe网站滑动到网站底部后有一堆表情卡片，鼠标hover表情卡片就会进行无序弹射。
?https://www.dtampe.com/
Alice的个人网站中应用了诸多悬停、移动和滚动视差设计，网站有趣酷炫。
?https://www.chromatique.studio/
04—滚动视差
元素移动fluttuo购物网站是基础典型的滚动视差设计案例。前景元素随着滚动移动，背景层不移动并在前景遮挡后替换背景图片。
?https://www.fluttuo.com/#home
cyclemon网站视觉效果和fluttuo类似。当用户向下滚动网页的时候，会有不同的背景图和自行车切换出来。
?https://www.cyclemon.com/
ie-tsukuru建筑设计公司网站，在承接工作范围模块以图纸形式展示，随着鼠标滚动叠加出现，背景不动，像桌面一张一张堆叠的设计图纸。
?https://ie-tsukuru.com/
元素变形synchronized设计工作室网站，设计案例以杂志封面形式竖直排列，根据鼠标滚动速度形成波浪式形态变化，滑动快就是大波浪，慢则是小波浪。利用动画能增强用户体验，并且展示工作室设计能力。
?https://synchronized.studio/
复杂动画ShopifyPlus案例网站，一款瓶装胶囊产品随着用户滚动而被打开，最后滚出胶囊，视觉动效聚焦目标产品。利用动画进行产品展示。?https://shopify.sunnysideup.work/#product
下面这个网站是记录江户时代清酒历史的网站，前景船不动，背景是变动的海浪，营造了一种由远及近的视觉效果，结合其他元素动画像是一个娓娓道来的故事。
?https://ito-goshi.com/storytelling/
MEW加密货币，网站故事背景设定为猫猫踏入进入狗狗统治的核心世界，整体网站风格一致，动态的猫猫元素拉满。
?https://mew.xyz/
05—3D互动通过WebGL 技术可以实现一些超酷的3D 图形，结合多样的鼠标交互行为可以达到类游戏的互动体验。3D效果Banzai泡面官网将线上商店还原成3D店铺模型，店里不同顾客小人食用不同口味，鼠标hover小人会转身并显示泡面口味，点击进入该口味泡面详情页。详情页的泡面3D模型也会跟随鼠标转动进行3D展示。
?https://www.nudolsbanzai.it/
Adobe旗下3D工具Adobe Substance 3D的演示项目，探讨了3D艺术技术。随着鼠标滚动进入“艺术大厅”，集合了不同领域，点击可以查看具体领域。视觉上有三维效果，但交互上还是限制在点击查看，体验一般。
?https://takingshape.adobe.com/
裸眼3D移动设备触屏交互有别于鼠标，但基于设备硬件陀螺仪、重力感应等传感器，也可以实现丰富的3D互动体验。
蚂蚁森林通过左右晃动陀螺仪就能拓展森林场景地图。
好好住个人页转动手机能使徽章来回晃动。
emmo的登录注册页上也设置了重力感应，表情球会会跟随手机摇摆方向进行滚动。