标签:3D动画

WEB前端

HTML5 3D地球仪 可按经纬坐标定位

1

爱前端网 - Yang 发布于 2021-11-09

今天要给大家分享一个基于HTML5的3D地球仪动画,地球仪不仅可以自动自西向东旋转,而且还可以旋转到指定经纬度坐标。另外,还有一个控制面板,可以控制地球是否自转、光晕是否显示,以及地理缩放。你也可以通过拖拽鼠标来改变地球仪的视角,可以将它移至南北极的视角,也可以移至赤道的视角,非...

阅读(67)评论(0)赞 (2)

WEB前端

HTML5 3D 陨石火球动画

1

爱前端网 - Yang 发布于 2021-11-09

今天要分享的又是一个基于HTML5 Canvas的炫酷动画,这是一个3D的陨石火球动画。从外观上看,这就像一颗正在坠落的陨石火球,还拖着一条长长的火焰尾巴。同时,我们可以通过拖拽鼠标从不同的视角来看这颗火球,并且可以通过鼠标滚轮来放大缩小火球,这便让人产生了不错的3D视觉效果。另...

阅读(51)评论(0)赞 (1)

WEB前端

纯 CSS3 3D 卡片翻转动画

1

爱前端网 - Yang 发布于 2021-11-09

今天分享的是一个基于纯CSS3的价格表卡片翻转动画,点击切换按钮时,卡片就会以翻转的动画效果进行切换,同时卡片上的装饰物也会以淡入淡出和飞入飞出的动画进行切换。这款卡片切换动画呈现的3D效果是通过纯CSS3实现的,整体看上去清新自然,也十分美观,如果你的网站或者App上需要类似的...

阅读(41)评论(0)赞 (2)

WEB前端

HTML5 3D 神秘游戏场景动画

1

爱前端网 - Yang 发布于 2021-11-09

今天分享的是一个基于Three.js的HTML5 3D动画,这个动画模拟了游戏中的一个炫酷的3D场景,支持360度视角查看,也支持鼠标滚轮进行缩放。画面中主要展现了一个游戏中传送门的效果,同时还有路两边的围栏、灯笼、石头,以及星光闪闪的萤火虫,整个画面显得十分神秘。不得不说,th...

阅读(54)评论(0)赞 (2)

WEB前端

CSS3卡片3D翻转动画 卡片带3D按钮

1

爱前端网 - Yang 发布于 2019-08-09

很多现代网站现在都喜欢用卡片式的风格,即在首页中将文章标题、内容和主题图片制作成卡片展示。今天这款就是基于CSS3的卡片动画,卡片中的元素可以是任意HTML元素,这里比较特别的是在文字下方显示一个3D按钮,同时当我们将鼠标滑过卡片时,卡片会呈现3D的翻转动画。 在线演示 源码下载

阅读(2655)评论(0)赞 (18)

WEB前端

基于Three.js和HTML5 Canvas的3D水晶球体

1

爱前端网 - Yang 发布于 2019-08-09

今天给大家分享一个很酷的HTML5 Canvas 3D动画,它同样是一个基于Three.js制作的动画特效。在Canvas上有一个用许多长度各异的水晶柱形组成的球体,我们还可以用鼠标拖拽球体来从不同角度观察球面,还可以用鼠标滚轮来缩放球面。还有一个特性就是,双击球面可以改变水晶面...

阅读(1441)评论(0)赞 (3)