龙空技术网

CSS3炫酷效果-动态展示图片简介

前端潮时代 634

前言:

目前咱们对“css动态图”大体比较关怀,你们都需要剖析一些“css动态图”的相关资讯。那么小编也在网络上汇集了一些对于“css动态图””的相关知识,希望各位老铁们能喜欢,小伙伴们快快来了解一下吧!

今天来给大家继续分享CSS动态效果,完成下图效果,我们需要掌握几个基本目标:

CSS3动态展示图片

熟练掌握HTML+CSS知识布局和美化网页

熟练掌握CSS3中的Opacity透明兼容

熟练掌握多余文字用省略号展示知识

熟练掌握transform和transition的使用

熟练使用浏览器私有前缀(-moz、-ms、-webkit、-o)

具体实现代码:

HTML部分

<div class="view">

<img src="images/1.jpg">

<div class="mask">

<h2>标题</h2>

<p>这是地下大裂谷的金碧辉煌的效果这是地下大裂谷的金碧辉煌的效果这是地下大裂谷的金碧辉煌的效果</p>

<a href="#">更多</a>

</div>

</div>

CSS部分

.view{ position: relative;width: 300px;height: 200px; border: 5px solid #eee; border-radius: 3px; cursor: pointer; text-align: center;overflow:hidden;}

.view img{width: 300px;height: 200px;}

.view h2{margin-top:25px; background: #000; color: #fff; font:normal 16px/35px 微软雅黑;

-webkit-transform:translateY(-100px);}

.view p{

width:270px;text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:10px;font:normal 14px/25px 微软雅黑; color: #fff;-webkit-transform:translateY(110px);}

.view a{ display: inline-block;width: 75px;height: 30px; color: #fff; background: #000;font:normal 14px/30px 微软雅黑; text-decoration: none;-webkit-transform:translateY(100px);}

.view .mask{ position: absolute;left: 0;top: 0;width: 300px;height: 200px; background: #9acd32; overflow:hidden;

/*CSS3中的opacity多浏览器透明度兼容性*/

filter:alpha(opacity=0);/*IE*/

-moz-opacity:0; /*老版本Mozilla*/

-khtml-opacity:0;/*老版本的safari*/

opacity:0;/*支持opacity的浏览器*/

}

.view img{-webkit-transition:all 0.3s linear;}

.view:hover img{-webkit-transform:scale(1.1);}

.view:hover .mask{opacity:0.7;-webkit-transition:all 0.3s ease-in-out;}

.view:hover .mask h2,.view:hover .mask p,.view:hover .mask a{

-webkit-transform:translateY(10px);

}

.view:hover .mask h2{-webkit-transition:all 0.3s ease-in-out;}

.view:hover .mask p,.view:hover .mask a{-webkit-transition:all 0.2s linear;}

以上代码仅此以webkit私有属性为例,详细讲解请观看视频:

视频加载中...

更多动画效果会随时更新,有兴趣的话欢迎大家加群142991222一起讨论交流学习

标签: #css动态图