这款插件集合和30种html5不同效果的鼠标滑过图片时标题动画效果。
这个插件使用css 3D transforms和伪元素来制作动画效果。请确保你的浏览器支持这些css3特性。另外,在文本上使用css transitions时,火狐浏览器存在一些小bug(文本看起来不是十分的平滑)
插件中精美的图片来自于Unsplash。
HTML
Nice Lily
Lily likes to play with crayons and pencils
View more
CSS
下面列出了“Sadie”效果的css代码,我们将在伪元素上使用线性渐变来制作标题动画效果。
figure.effect-sadie figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
transform: translate3d(0,50%,0);
}
figure.effect-sadie h2 {