纯CSS3实现8组超炫酷鼠标滑过图片动画

时间：2021-05-08

这是一款效果超酷的纯CSS3鼠标滑过图片动画效果，它共分为8组不同的效果，它们分别在鼠标滑过图片时，以不同的方式显示遮罩层和图片标题。每一组效果又分为3种不同的鼠标滑过图片效果。

这些鼠标滑过图片时的动画效果都是使用CSS3来完成的，分别有：滑动效果，倾斜效果，翻转效果，旋转效果等等，下面是一张GIF的预览图片。

在线预览源码下载

使用方法

在页面中引入hover-effects.css文件。

CSS Code复制内容到剪贴板
  • <linkrel="stylesheet"href="css/hover-effects.css"/>

    • HTML结构

    以其中一种鼠标滑过图片动画效果为例，它的HTML结构如下：

    XML/HTML Code复制内容到剪贴板
  • <divclass="effect-1">
  • <divclass="image-box">
  • <imgsrc="img-2.jpg"alt="Image-3">
  • </div>
  • <divclass="text-desc">
  • <h3>YourTitle</h3>
  • <p>......</p>
  • <ahref="#"class="btn">Learnmore</a>
  • </div>
  • </div>

    • CSS样式

    CSS Code复制内容到剪贴板
  • .effect-1{
  • float:left;
  • width:340px;
  • position:relative;
  • overflow:hidden;
  • text-align:center;
  • border:4pxsolidrgba(255,255,255,0.9);
  • overflow:visible;
  • }
  • .effect-1img{
  • transition:0.5s;
  • }
  • .effect-1:hoverimg{
  • transform:scale(0.3)translateY(-110%);
  • position:relative;
  • z-index:9;
  • }.effect-1.text-desc{
  • transform:translateY(100%);
  • opacity:0;
  • padding:85px20px10px;
  • transition:0.5s;
  • }.effect-1:hover.text-desc{
  • transform:translateY(0px);
  • opacity:1;
  • }

  • 以上就是本文的全部内容，希望对大家的学习有所帮助。

    原文：http://www.cnblogs.com/w2bc/p/5279180.html

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章