城市
CityWalk
赞
踩
html
<li class="big-grid havehover"> <a href=""> <div class="mask"> </div> <div class="circle"> <p> 城市 </p> <p> CityWalk </p> </div> <div class="word"> 【City Walk】大阪浪花の城——美食、动漫和不为人知的大阪人辛秘生活 </div> <img src="images/yh.png" alt=""> </a> </li>
css
.common-part .center-wrap .content .big-grid{ position: relative; width: 560px; height: 270px; } .common-part .content .havehover{ overflow: hidden; } .common-part .content .havehover .mask{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .53); opacity: 0; transition: opacity .5s ease 0s; } .common-part .content .havehover .mask:hover{ opacity: 1; } .common-part .content .havehover .circle{ position: absolute; width: 106px; height: 106px; left: 50%; margin-left: -53px; top: -106px; font-size: 18px; text-align: center; box-sizing: border-box; padding-top: 25px; color: #FFFFFF; border: 1px solid #FFFFFF; border-radius: 50%; transition: top .5s ease 0s; } .common-part .content .havehover:hover .circle{ top: 50px; } .common-part .content .havehover .word{ position: absolute; width: 508px; height: 22px; font-size: 14px; color: #FFFFFF; line-height: 22px; text-align: center; bottom: -60px; transition: bottom .5s ease 0s; } .common-part .content .havehover:hover .word{ bottom: 30px; }
html
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/zsj2.png" alt="">
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票(赠送旅游意外险…
</div>
</a>
</li>
css
.content-part .center-wrap .content>ul>li{ float: left; width: 264px; height: 270px; margin-right: 32px; margin-bottom: 32px; } .content-part .center-wrap .content>ul>li .picbox{ width: 264px; height: 184px; overflow: hidden; } .content-part .center-wrap .content>ul>li .wordbox{ background: #FFFFFF; color: #1C1F21; font-size: 14px; line-height: 22px; padding: 22px 14px; } .content-part .center-wrap .content>ul>li .picbox img{ transition: transform .5s ease 0s; } .content-part .center-wrap .content>ul>li .picbox img:hover{ transform: scale(1.1); }
html
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/zsj2.png" alt="">
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票(赠送旅游意外险…
</div>
</a>
</li>
css
.content-part .center-wrap .content>ul>li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
html
<li class="more-grid">
<a href="">
<p>查看更多</p>
<p>深度旅行产品</p>
<span class="iconfont"></span>
<ul>
<li>日游</li>
<li>周末</li>
<li>亲子</li>
<li>长线</li>
</ul>
</a>
</li>
css
@keyframes ud{ from { transform: translateY(-10px); } to { transform: translateY(10px); } } .content-part .center-wrap .more-grid .iconfont{ display: block; font-size: 48px; margin: 28px 0 36px 0; } .content-part .center-wrap .content .iconfont:hover{ animation: ud .4s ease 0s infinite alternate; }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。