html+css实现常见的网页特效

0. 效果预览

1. 文字遮罩

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;
}

2. 图片放大

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);
}

3. 盒子阴影

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);
}

4. CSS动画

html

<li class="more-grid">
    <a href="">
        <p>查看更多</p>
        <p>深度旅行产品</p>
        <span class="iconfont">&#xe619;</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;
}

5. 完整代码

点击前往代码仓库。