css3 鼠标经过图片放大-30种眼花缭乱的html5键盘浏览图片标题显示疗效

bendan520 css3

2023-08-26 0 3,249 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

此插件集合了30种html5不同效果的键盘标题传递图片时的动画效果。

该插件使用 css 3D 变换和伪元素来制作动画效果。请确保您的浏览器支持此 css3 功能。另外，Firefox 在文本上使用 css 过渡时存在一些小错误（文本看起来不太平滑）

插件中的精美图片来自Unsplash。

超文本标记语言


  
    
    
      Nice Lily
      Lily likes to play with crayons and pencils
      View more

css3 鼠标经过图片放大-30种眼花缭乱的html5键盘浏览图片标题显示疗效

CSS

css3 鼠标经过图片放大-30种眼花缭乱的html5键盘浏览图片标题显示疗效

下面列出了“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 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  color: #484c61;
  transition: transform 0.35s, color 0.35s;
  transform: translate3d(0,-50%,0);
}
figure.effect-sadie figcaption::before,
figure.effect-sadie p {
  transition: opacity 0.35s, transform 0.35s;
}
figure.effect-sadie p {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2em;
  width: 100%;
  opacity: 0;
  transform: translate3d(0,10px,0);
}
figure.effect-sadie:hover h2 {
  color: #fff;
  transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}
figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
  opacity: 1;
  transform: translate3d(0,0,0);
}

其他精美疗效请参考下载的源文件。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!