您的位置:首页> 日志> 前端技术 正文
DTOP

CSS3制作图文切换效果图

chenke | 2015年09月18日 |

>>收藏本文 已有 0条评论

效果如下:

 

 

css代码:

<style>
*{
    padding:0;
    margin:0;font-family:"宋体";
    box-sizing: content-box;
    -webkit-box-sizing: content-box;}
.wrap {
    position: relative;
    width: 300px;
    height:200px;
    margin: 0 auto;
}
.box {
   width: 300px;
   height:200px;
   margin: 10px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
   cursor: default;
}

.box img {
   width:300px;
   height:200px;
   display: block;
   position: relative;
   max-width:100%;
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.box .mask {
   overflow:hidden;
   position:absolute;
   background-color:#960;
   left:0px;top:0px;width:300px; height:200px;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}

.box p {
   font-size:12px;
   line-height:30px;
   position: relative;   
   padding: 10px 20px 20px;
   text-align: left;
   color: #333;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}

.box:hover img {
   width:300px; height:200px;
   -webkit-transform: scale(2);
   -moz-transform: scale(2);
   -o-transform: scale(2);
   -ms-transform: scale(2);
   transform: scale(2);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.box:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

.box:hover p
 { color:#fff;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}    
</style>

 

html代码:

<div class="wrap">
    <div class="box">
        <img src="images/pic.jpg">
        <div class="mask">
            <p>2014年末北京市常住人口2151.6万人,比2013年末增加36.8万人。其中,常住外来人口818.7万人,占常住人口的比重为38.1%。常住人口中,城镇人口1859万人,占常住人口的比重为86.4%。常住人口出生率9.75‰,死亡率4.92‰,自然增长率4.83‰。常住人口密度为每平方千米</p>
        </div>
    </div>    
</div>