棋牌牛牛

当前位置 : 棋牌牛牛 > 代码 > html5 css3 > css3实例 > css3卡片悬停图文切换特效

css3卡片悬停图文切换特效

CSS3 Clip-path属性制作卡片悬停动画,图片模糊放大遮罩显示文字标题效果。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<link rel="stylesheet" href="css/style.css">

2、body引入部分

<div class="wrapper">
	<div class="card">
		<img src="img/1.jpg">
		<div class="descriptions">
			<h1>逃亡</h1>
			<p>在枪杀了一名国际暗杀协会的高层成员后,传奇杀手约翰·威克发现自己被剥夺了该组织的保护性服务。现在,威克头上还拿着1400万美元的悬赏金,他必须在纽约街头奋力拼搏,成为世界上最残忍杀人犯的目标。</p>
			<button>查看更多>></button>
		</div>
	</div>
	<div class="card">
		<img src="img/2.jpg">
		<div class="descriptions">
			<h1>追凶</h1>
			<p>如果你有问题,没有其他地方可以转向,神秘而难以捉摸的罗伯特·麦考尔将为你寻求的治安法官提供帮助。然而,这一次,麦考尔的过去削减特别是在家附近,当暴徒杀死苏珊普卢默-他的最好的朋友和前同事。现在出去报仇,麦考尔必须带上一队训练有素的刺客,他们将不惜任何代价摧毁他。</p>
			<button>查看更多>></button>
		</div>
	</div>
</div>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
追光棋牌 欢乐棋牌 手机棋牌 荣耀棋牌 豪利棋牌 徐州棋牌 其乐棋牌 人人棋牌 电玩棋牌 黄金棋牌