8个CSS和JavaScript代码片段用于创建逼真的动画我们一直在说，因为这是事实。CSS和JavaScript能够完

我们一直在说，因为这是事实。CSS和JavaScript能够完成一些惊人的壮举。基于网络的动画就是一个典型的例子。

不久前，网络上的动画还有点简陋--除了像Flash这样的附加技术。这些动作是基本的，而且经常趋向于卡通化。这不一定是件坏事，只是不适合每个项目。

如果你正在寻找更真实的东西--几乎是电影般的质量呢？如今，CSS和正确的JavaScript库可以帮助你达到这个目的。

为了证明这一点，我们找到了一些漂亮的代码片段，它们为网页动画带来了逼真的元素。它们的范围很广，从完全的重现到使用真实世界的效果的例子。请欣赏

你可能也会喜欢我们的创建新形态UI的片段集。

开启电源

拨动开关已经成为网页设计的一个主要部分--但这个片段将事情提升到另一个层次。通过添加一个逼真的表面和抖动的背光，这个纯CSS动画看起来就像属于一台机器。点击开关也会产生令人满意的开/关效果。

请看Yoav Kadosh的《钢笔逼真的红色开关（纯CSS）》。

波光粼粼的海洋。海豚嬉戏跳跃。所有这些都是用......JavaScript制作的？是的。这里的特效实在是令人惊叹。在温柔的海浪上跳舞的光线，自然的运动，以及令人印象深刻的阴影，都是由代码驱动的。

这里有一个独特的视差滚动的例子。一座城市的大型鸟瞰照片本身就很吸引人眼球。但移动你的光标，视角就会发生变化，就像你站在一栋大楼的顶部，向下看下面的世界。这是很微妙的，但也是非常酷的。

请看莎尔纳-侯赛因（@sharnajh）的《笔下的鸟瞰视差》。

这个片段将事情进一步带入平流层，提供了一个由Three.js提供的互动式地球视角。任由它自己旋转，而背景是一片星空，地球缓慢地旋转着。但还有更多的内容!点击并拖动屏幕来改变行星的位置，以适应你的喜好。提示：有一个月亮隐藏在某处。

查看布莱恩-琼斯的《钢笔3D地球

这个游戏设备动画采取了一种不同的，也许是更经典的方法。一个新变形的任天堂开关充当了流行游戏《动物之森》的视频的容器*。新地平线*。把它们放在一起，看起来就像游戏正在你面前进行。

这个片段的魅力在于它的微妙性。主人公区域利用了一个引人注意的火山照片背景。缓慢移动的一缕缕烟雾（由CSS驱动）提供了一个完美的点缀。这表明，小细节可以带来大不同。

请看笔者用CSS剪裁的动画英雄形象，作者：Mihael Tomić

驾车穿越山脉可以令人振奋。这个动画将把这种体验的一部分带到你的屏幕上。真正令人印象深刻的是灯光效果。当太阳升起和落下时，看看它的强度、阴影和运动。你几乎可以感觉到热度!

我们这些在20世纪80年代和90年代长大的人都会记得这些数字手表。似乎每个孩子都有一个。这个片段不仅重现了经典卡西欧的外观，而且还具有互动性。点击左上方的 "灯光 "按钮，可以看到屏幕的夜景。啊，这些记忆。

上面的例子有趣地提醒我们，当把伟大的工具和创造力结合起来时，会有什么可能。随着语言、框架和硬件的发展，现实的动画效果变得更加容易实现。

试想一下：在21世纪初，类似的逼真程度对开发者和用户来说都需要一些相当强大的软件。现在，不需要大量投资或错误的浏览器插件就可以建立和观看。

我们希望这些片段能激励你提高你的网络动画项目的水平。想看更多吗？请查看我们的CodePen系列以获得更多的想法。