HTML5 分类
好玩的蹦床效果 日常翻译六
By hiluluke on
今天分享一个有趣的小动画。主要的想法是在切换导航(navigating)图片时模拟蹦床的弹性效果。其中的图片拖拽效果我们使用的是Elastic STack。而svg的动画,我们使用了snap.svg。当然我们在整个过程中会使用css 的transitions属性。
demo中的图片使用得是Leonard Nimoy,是为了向他致敬,其上周逝去了。(外国程序员好有情怀)
如何创建一个平铺背景滑动效果 日常翻译五
By hiluluke on
今天我们将看看如何实现像Serge Thoroval’s Atelier中的全屏背景滑动特效。
demo和原来译文
标签
为了达到这个滚动效果,我们需要一个能让我们构造4个不同“瓷砖”效果的特别标签结构,它们将使用同一张图片的不同部分。因为我们这是一个全屏滚动效果,所以我们需要确保让所有元素都延伸至全屏。为了使得我们能制定那个图片被可见,我们需要定义一个简单的初始结构并构建我们“瓷砖”的重复结构。初始结构就像这样:
1 | <div id="boxgallery" class="boxgallery" data-effect="effect-1"> |
为了去将一张图片分成4个小瓷砖,我们为每个面板构建如下的重复结构:
1 | <div id="boxgallery" class="boxgallery" data-effect="effect-1"> |
使用伪元素创建图片堆叠特效 日常翻译四
By hiluluke on
今天我们将尝试去将在html中单独的一张图片利用css变换出堆叠的效果。关键的地方就是伪元素。
同时我们将看到,在我们实现的过程中,我们将会很快遇到一些混乱的代码,然后我们将使用一些方法使得代码变得整洁。
CSS盒阴影效果 日常翻译三
By hiluluke on
在这个教程中,我们将只使css用创建几种不同的盒阴影效果。下面这个图片是在photoshop下创建的,并具有不同的盒阴影。过去要创建这么棒的效果只能使用photoshop,但是现在我们可以使用CSS3来实现了。
使用SVG 日常翻译二
By hiluluke on