本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3制作图片获得焦点时的文字显示特效

本文介绍如何使用CSS 3的transition动画特性制作图片获得焦点时的文字显示特效。

HTML代码

本示例中所用到的一些HTML代码非常简单。首先创建一个存放图片及文字信息的容器(div元素),并且为该容器使用view样式类。

在view容器中,放入一个div元素,并且为该元素使用mask样式类。该样式类将负责执行我们的特效。在该div元素内,我们将放入一个标题文字,一段说明文字,及一个链接。

<div class="view">  
    <img src="images/html5.jpg" />  
    <div class="mask">  
        <h2>标题</h2>  
        <p>说明文字</p>  
        <a href="#" class="info">阅读全文</a>  
    </div>  
</div>

CSS样式代码

在HTML代码书写完毕后,我们开始书写我们的样式。我们首先为我们的各样式类书写合适的样式代码,稍后我们将添加一个特殊的样式类,用于实现各种特效。为了代码简洁起见,本文中全部省略浏览器供应商前缀的书写。

.view {
    width: 200px;
    height: 300px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 200px;
    height: 300px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}

示例1

实际运行结果

HTML 5与CSS 3权威指南(第2版 上册)

畅销书全新升级,第1版上市后已印刷近10次,累计销量超过50000册,是该领域公认的标杆之作,销量和口碑都极佳。

阅读全文

CSS 3样式代码

为view容器添加使用一个样式类view-first,我们将通过该样式类来完成这个特效。在下面所介绍的各种示例中,我们都将通过这种方法来完成各种特效(view-first,view-secong,view-third等等)。

<div class="view view-first"> 
    //内部代码略
</div> 

在第1个示例中,我们只使用一些基本transition动画来实现图片获取焦点时的文字显示特效。

.view-first img { 
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7); 
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p { 
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.view-first:hover img { 
    transform: scale(1.1);
} 
.view-first:hover .mask { 
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}

示例2

实际运行结果

HTML 5与CSS 3权威指南(第2版 上册)

畅销书全新升级,第1版上市后已印刷近10次,累计销量超过50000册,是该领域公认的标杆之作,销量和口碑都极佳。

阅读全文

CSS 3样式代码

在第2个示例中,我们结合使用变换与旋转变形来实现我们的特效。

.view-second img {   
    transition: all 0.2s ease-in; 
}
.view-second .mask { 
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
    transform: translate(460px, -100px) rotate(180deg);
    transition: all 0.2s 0.4s ease-in-out;
}
.view-second h2{
    transform: translateY(-100px);
    transition: all 0.2s ease-in-out;
}
.view-second p { 
    transform: translateX(300px) rotate(90deg);
    transition: all 0.2s ease-in-out;
}
.view-second a.info { 
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
} 
.view-second:hover .mask { 
    opacity:1; 
    transition-delay: 0s;                            
    transform: translate(0px, 0px);
}
.view-second:hover h2 { 
    transform: translateY(0px); 
    transition-delay: 0.5s; 
}
.view-second:hover p { 
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0.4s;
}
.view-second:hover a.info { 
    transform: translateY(0px);
    transition-delay: 0.3s;
}

示例3

实际运行结果

HTML 5与CSS 3权威指南(第2版 上册)

畅销书全新升级,第1版上市后已印刷近10次,累计销量超过50000册,是该领域公认的标杆之作。

阅读全文

CSS 3样式代码

在第3个示例中,我们在图片获取焦点时通过scale变形将图片缩小,将文字内容区域放大,同时使用一个旋转特效。

.view-third img { 
    transition: all 0.4s ease-in-out 0.2s;
    opacity: 1;
}
.view-third .mask { 
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    transition: all 0.4s ease-in;
    border-radius: 0px;
}
.view-third h2{
    opacity: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transition: all 0.5s ease-in-out;
}
.view-third p { 
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.view-third a.info { 
    opacity: 0;
    transition: all 0.5s ease-in-out;
} 
.view-third:hover .mask { 
    opacity: 1; 
    transform: scale(1) rotate(0deg);
    transition-delay: 0.2s;
}                                 
.view-third:hover img    { 
    transform: scale(0); 
    opacity: 0;
    transition-delay: 0s;
}                       
.view-third:hover h2,
.view-third:hover p,
.view-third:hover a.info{
    opacity: 1;
    transition-delay: 0.5s;
}

示例4

实际运行结果

HTML 5与CSS 3权威指南(第2版 上册)

畅销书全新升级,第1版上市后已印刷近10次,累计销量超过50000册,是该领域公认的标杆之作,销量和口碑都极佳。

阅读全文

CSS 3样式代码

在第4个示例中,我们使用变换特性,并且将transition动画的实现方式定义为ease-in-out,目的是将图片从左边向右边逐渐滑出。

.view-fourth img {
    transition: all 0.3s ease-in-out; 
}
.view-fourth .mask { 
    background-color: rgba(146,96,91,0.3);
    transform: translateX(-300px);
    opacity: 1;
    transition: all 0.4s ease-in-out; 
}
.view-fourth h2{
    background: rgba(255, 255, 255, 0.5);
    color: #000;
    box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fourth p{
    opacity: 0;
    color: #333;
    transition: all 0.2s linear;
}
.view-fourth:hover .mask { 
    transform: translateX(0px);
}                       
.view-fourth:hover img { 
    transform: translateX(300px);
    transition-delay: 0.1s;
}
.view-fourth:hover p{
    opacity: 1;
    transition-delay: 0.4s;
}

示例5

实际运行结果

HTML 5与CSS 3权威指南(第2版 上册)

畅销书全新升级,第1版上市后已印刷近10次,累计销量超过50000册,是该领域公认的标杆之作。

阅读全文

CSS 3样式代码

在这个示例中,我们通过scale属性将文字内容逐渐缩小到它的原始尺寸(放大因子从10缩小到1),在缩小的同时将其推入屏幕中,同时将“阅读全文”按钮从底部逐渐滑入。

.view-fifth img { 
    transition: all 0.4s ease-in-out 0.5s; 
}
.view-fifth .mask{ 
    background-color: rgba(146,96,91,0.5);
    opacity:0;
    transition: all 0.3s ease-in 0.4s;
}
.view-fifth h2{
    opacity:0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(10);
    transition: all 0.3s ease-in-out 0.1s;
}
.view-fifth p { 
    opacity:0;
    transform: scale(10);
    transition: all 0.3s ease-in-out 0.2s;
}
.view-fifth a.info { 
    opacity:0;
    transform: translateY(100px);
    transition: all 0.3s ease-in-out 0.1s;
}
.view-fifth:hover .mask {  
    opacity:1; 
    transition-delay: 0s;
}                                                                            
.view-fifth:hover img { 
    transition-delay: 0s; 
}
.view-fifth:hover h2 { 
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
}
.view-fifth:hover p { 
    opacity:1; 
    transform: scale(1);
    transition-delay: 0.2s;
}
.view-fifth:hover a.info { 
    opacity:1;
    transform: translateY(0px);
    transition-delay: 0.3s;
}

示例6

实际运行结果

HTML 5与CSS 3权威指南(第2版 上册)

畅销书全新升级,第1版上市后已印刷近10次,累计销量超过50000册,是该领域公认的标杆之作,销量和口碑都极佳。

阅读全文

CSS 3样式代码

在第6个示例中,我们一边旋转图像,一边将图像逐渐缩小,直至消失。然后将文字内容从上往下滑入屏幕。

.view-sixth img{
    transition: all 0.5s ease-out;
    opacity: 1;
}
.view-sixth .mask { 
    background-color: rgba(77,44,35,0.5);
    transform: rotate(0deg) scale(1);
    opacity: 0;
    transition: all 0.3s ease-out;
    transform: translateY(-200px) rotate(180deg);
}
.view-sixth h2{
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
}
.view-sixth p { 
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
}
.view-sixth a.info { 
    transform: translateY(-200px);
    transition:  all 0.2s ease-in-out;
} 

当图片获得焦点时,我们对文字内容的滑入添加一个延时。这使得我们可以首先看见图像进行旋转的效果,然后将文字内容滑入。当文字内容失去焦点时使其立刻消失,同时将图片旋转回原位。

.view-sixth:hover img{
    transform: rotate(720deg) scale(0);
    opacity: 0;
}
.view-sixth:hover .mask { 
    opacity: 1;  
    transform: translateY(0px) rotate(0deg);
    transition-delay: 0.4s;
}                                                                                       
.view-sixth:hover h2 { 
    transform: translateY(0px);
    transition-delay: 0.7s;
}
.view-sixth:hover p { 
    transform: translateY(0px);
    transition-delay: 0.6s;
}
.view-sixth:hover a.info { 
    transform: translateY(0px);
    transition-delay: 0.5s;
}

示例7

实际运行结果

HTML 5与CSS 3权威指南(第2版 上册)

畅销书全新升级,第1版上市后已印刷近10次,累计销量超过50000册,是该领域公认的标杆之作,销量和口碑都极佳。

阅读全文

CSS 3样式代码

在第7个示例中,我们将通过animation动画对文字内容创建一个“弹入”效果,我们将把文字内容从顶部“弹入”书籍展示区中。

.view-seventh .mask { 
    background-color: rgba(255, 255, 255, 0.7);
    top: -200px;
    opacity: 0;
    transition: all 0.3s ease-out 0.5s;
}
.view-seventh h2{
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out 0.1s;
}
.view-seventh p { 
    color: #333;
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out 0.2s;
}
.view-seventh a.info { 
    transform: translateY(-200px);
    transition:  all 0.2s ease-in-out 0.3s;
} 
.view-seventh:hover .mask { 
    opacity: 1; 
    top: 0px; 
    transition-delay: 0s; 
    animation: bounceY 0.9s linear;
}                                                                                       
.view-seventh:hover h2 { 
    transform: translateY(0px);
    transition-delay: 0.4s;
}
.view-seventh:hover p { 
    transform: translateY(0px);
    transition-delay: 0.2s;
}
.view-seventh:hover a.info { 
    transform: translateY(0px);
    transition-delay: 0s;
}

为了创建文字内容的“弹入”效果,我们使用translateY属性,并且创建一系列动画帧,以达到这个效果。

@keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}

示例8

实际运行结果

HTML 5与CSS 3权威指南(第2版 上册)

畅销书全新升级,第1版上市后已印刷近10次,累计销量超过50000册,是该领域公认的标杆之作。

阅读全文

CSS 3样式代码

在最后一个示例中,我们将图片边放大边使其淡出屏幕,同时将文字内容逐步放大到其原始尺寸。我们可以通过缩放变形与改变元素透明度的方法来实现这一特效。

.view-eighth img { 
    transform: scaleY(1);
    transition: all 0.7s ease-in-out;
}
.view-eighth .mask { 
    background-color: rgba(255, 231, 179, 0.3); 
    transition: all 0.5s linear;
    opacity: 0;
}   
.view-eighth h2{
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
}
.view-eighth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.view-eighth a.info { 
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}

当图片获得焦点时,我们简单放大图片,并且通过将其透明度修改为0的方法使其淡出。

.view-tenth:hover img { 
    transform: scale(10);
    opacity: 0;
}
.view-tenth:hover .mask { 
    opacity: 1;
}                                                                            
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{ 
    transform: scale(1);
    opacity: 1;
}