返回
数据
分类

在鼠标滑过图片时制作遮罩层和图片标题动画效果,该CSS3鼠标滑过图片遮罩层动画特效的基本HTML结构如下

日期: 2019-11-19 00:17 浏览次数 : 170

必赢手机登录网址 ,简单的CSS3鼠标滑过图片标题和遮罩层动画特效,css3遮罩

这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特效。该鼠标滑过特效通过 CSS3transitions 和 transform 属性,在鼠标滑过图片时制作遮罩层和图片标题动画效果。

必赢手机登录网址 1

在线预览    源码下载

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效,炫酷css3

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效。这组特效共有12种不同的鼠标滑过图片效果,分为滑动、旋转和翻转3大类。它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作。

必赢手机登录网址 2

在线预览    源码下载

炫酷CSS3鼠标滑过图片标题文字动画特效,炫酷css3

这是一款使用CSS3制作的鼠标滑过图片标题文字动画特效。该特效在鼠标滑过图片的时候,会展现遮罩层,并在遮罩层上以旋转的方式使图片描述文字逐一展现。

必赢手机登录网址 3

在线预览    源码下载

 使用方法

 使用方法

使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件。

<link rel="stylesheet" href="css/sass-compiled.css" type="text/css" />
或者:
<link rel="stylesheet" href="css/less-compiled.css" type="text/css" />        

 使用方法

 HTML结构

该鼠标滑过图片特效的HTML结构非常简单:使用一个<div>元素作为图片遮罩层,在里面放置图片的描述信息。

1 2 3 4 5 6 7 8 <img src="img/01.jpg" alt=""> <div class="caption">   <div class="blur"></div>   <div class="caption-text">     <h1>图片标题</h1>     <p>描述信息</p>   </div> </div>       
 HTML结构

该CSS3鼠标滑过图片遮罩层动画特效的基本HTML结构如下:

<div class="pic">
    <img src="img/01.jpg" class="pic-image" alt="Pic"/>

        <h1 class="pic-title">Pic Title</h1>
        <p>图片描述文本</p>

</div>        

.bottom-to-top是遮罩层的动画效果类。

 HTML结构

DEMO中使用bootstrap的网格系统来进行布局。整个图片放置在一个.box容器中,它里面的.box-content在鼠标滑过图片时制作遮罩层和图片标题动画效果,该CSS3鼠标滑过图片遮罩层动画特效的基本HTML结构如下。是图片的描述文本层。

<div class="box">
    <img src="img/1.jpg" alt="必赢手机登录网址 4"/>
    <div class="box-content">
        <h3 class="title">Kristiana</h3>
        Earl Grey
        <p class="description">
            Lorem ipsum dolor sit amet......
        </p>
        <a href="#" class="read">read more</a>
    </div>
</div>
 CSS样式

第一个DEMO使用透明度opacity属性来制作遮罩层的导入效果,并通过transition来制作平滑过渡动画。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 .caption-style-1 li{   float: left;   padding: 0px;   position: relative;   overflow: hidden; }   .caption-style-1 li:hover .caption{   opacity: 1;   } .caption-style-1 img{   margin: 0px;   padding: 0px;   float: left;   z-index: 4; }     .caption-style-1 .caption{   cursor: pointer;   position: absolute;   opacity: 0;   -webkit-transition:all 0.45s ease-in-out;   -moz-transition:all 0.45s ease-in-out;   -o-transition:all 0.45s ease-in-out;   -ms-transition:all 0.45s ease-in-out;   transition:all 0.45s ease-in-out;   } .caption-style-1 .blur{   background-color: rgba(0,0,0,0.65);   height: 300px;   width: 400px;   z-index: 5;   position: absolute; }   .caption-style-1 .caption-text h1{   text-transform: uppercase;   font-size: 24px; } .caption-style-1 .caption-text{   z-index: 10;   color: #fff;   position: absolute;   width: 400px;   height: 300px;   text-align: center;   top:100px; }         

其它效果的制作也非常简单,具体请参考下载的源文件。

在线预览    源码下载

从事前端的加微信:1652703422,共同交流进步!

这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特效。该鼠标滑过特...

 可用的动画效果

该CSS3鼠标滑过图片遮罩层动画特效有以下12种可用的CSS3动画效果。

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效。这组特效共有12种不...

 CSS样式

容器.box的定位方式为相对定位,它里面的图片宽度为父容器的100%宽度。

.box{
    border: 1px solid #333;
    position: relative;
    overflow: hidden;
}
.box img{
    width: 100%;
    height: auto;
}

.box-content用于制作遮罩层。颜色为60%的黑色,定位方式为绝对定位,并使用transform属性将它逆时针旋转了90度,旋转的中心点位于左上角位置。最后为所有的动画属性设置0.5秒ease效果的过渡动画。

.box .box-content{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    text-align: center;
    padding: 20% 20px;
    background: rgba(0,0,0,0.6);
    transform: rotate(-90deg);
    transform-origin: left top 0;
    transition: all 0.50s ease 0s;
}                  

.title是标题,初始状态它旋转了180度,旋转的中心点为右上角。并设置0.3秒的ease-in-out效果过渡动画,动画的延迟时间为0.2秒。

.box .title{
    display: inline-block;
    font-size: 22px;
    color: #fff;
    margin: 0 0 15px 0;
    position: relative;
    transform: rotate(180deg);
    transform-origin: right top 0;
    transition: all .3s ease-in-out 0.2s;
}                  

.post是子标题,初始状态它旋转了180度,旋转的中心点为右上角。并设置0.3秒的ease-in-out效果过渡动画,动画的延迟时间为0.4秒。

.box .post{
    display: block;
    font-size: 18px;
    margin-bottom: 15px;
    transform: rotate(180deg);
    transform-origin: right top 0;
    transition: all .3s ease-in-out 0.4s;
}

.description是描述文本,初始状态它旋转了180度,旋转的中心点为右上角。并设置0.3秒的ease-in-out效果过渡动画,动画的延迟时间为0.6秒。

.box .description{
    font-size: 15px;
    margin-bottom: 20px;
    padding: 0 20px;
    transform: rotate(180deg);
    transform-origin: right top 0;
    transition: all .3s ease-in-out 0.6s;
}

.read是Read More文字,初始状态它旋转了180度,旋转的中心点为右上角。并设置0.3秒的ease-in-out效果过渡动画,动画的延迟时间为0.8秒。

.box .read{
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    display: block;
    letter-spacing:2px;
    text-transform: uppercase;
    transform: rotate(180deg);
    transform-origin: right top 0;
    transition: all 0.3s ease-in-out 0.8s;
}

在鼠标滑过图片时,将上面所有元素的旋转角度变为0度,由于各个元素上都设置了多会过渡延迟时间,所以各个元素会逐一的旋转会0度位置。

.box .read:hover{
    color: #e8802e;
    text-decoration: none;
}
.box:hover .box-content,
.box:hover .title,
.box:hover .post,
.box:hover .description,
.box:hover .read {
    transform:rotate(0deg);
}

在线预览    源码下载

加入前端爱好者QQ群(123235875) 点击加群,共同交流进度!

这是一款使用CSS3制作的鼠标滑过图片标题文字动画特效。该特效在鼠标滑过图片的时候,...