css实现10种不同风格的图片悬浮文字层显示动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：css实现10种不同风格的图片悬浮文字层显示动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">

    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        @import url(css.css);@import url(css1.css);@import url(css2.css);body{ 	background-color:#e5e9ec;}h1,h2,h3,h4,h5,h6,div,input,p,a{	font-family: "Open Sans";  	margin:0px; }a,a:hover,a:focus{	color:inherit;	text-decoration:none;}.container-fluid,.container { 	max-width: 1200px;	margin:auto;}section{	padding:20px 0px;}section h1{	font-size:25px;	margin-bottom:25px;}.card-desription-container{	padding: 50px;}.card-desription-container p{	padding:15px 0px;	color:rgba(0,0,0,0.8);}button{	border:none;	padding:13px 20px;	font-weight:bold;	background-color:transparent;}.card{	position:relative;	overflow:hidden;	border-radius:5px;	cursor:pointer;	box-shadow:0px 0px 20px rgba(0,0,0,0.1);	margin:25px auto;	max-width:300px;}.card img{	width:100%;}.card-name{	position:absolute;}.card-icons{	position:absolute;}footer{	padding:15px 0px;	font-size:13px;	text-align:center;	background-color:rgba(0,0,0,0.2);	font-weight:bold;}.card-1 img{	transition:all 0.25s ease-in-out;}.card-1 .card-name{	top:-100px;	right:0px;	position:absolute;	color:#FFF;	font-size:17px;	font-weight:bold;	padding:30px 50px;	z-index:100;	transition:all ease-in-out 0.25s;}.card-1 .card-name::before{	content:"";	position:absolute;	width:300px;	height:300px;	background-color:#002643;	transform:rotate(-3deg) skew(55deg);	left:-700px;	top:-200px;	z-index:-1;	box-shadow:-35px -10px 0px 10px rgba(0,0,0,0.1);	transition:all ease-in-out 0.25s;	transition-delay:0.2s;}.card-1 .card-name::after{	content:"";	position:absolute;	width:300px;	height:100px;	background-color:#9ad75e;	left:-200px;	top:-150px;	z-index:-2;	transform:rotate(-20deg);	box-shadow:10px 0px 0px 10px rgba(0,0,0,0.1);	transition:all ease-in-out 0.25s;	transition-delay:0.4s;}.card-1 .card-icons{	position:absolute;	bottom:-100px;	left:0px;	color:#FFF;	padding:10px 20px;	z-index:2;	transition:all ease-in-out 0.25s;}.card-1 .card-icons .fa{	margin:0px 5px;}.card-1 .card-icons::before{	content:"";	position:absolute;	width:250px;	height:200px;	background-color:#032a47;	z-index:-1;	transform:rotate(15deg) skew(-25deg);	top:100px;	left:-40px;	box-shadow:-30px 20px 0px 10px rgba(0,0,0,0.1);	transition:all ease-in-out 0.25s;	transition-delay:0.2s;	}.card-1 .card-icons::after{	content:"";	position:absolute;	width:350px;	height:200px;	background-color:#0093a7;	z-index:-2;	top:100px;	left:0px;	border-top:10px solid rgba(255,255,255,1);	transform:rotate(-10deg);	transition:all ease-in-out 0.25s;	transition-delay:0.4s;}.card-1 .card-icons .fa:hover{	color:#9ad75e;}.card-1:hover img{	filter:brightness(75%);	transform:scale(1.1,1.1) rotate(-5deg);}.card-1:hover .card-name{	top:10px;}.card-1:hover .card-name::before{	left:-150px;}.card-1:hover .card-name::after{	top:-50px;}.card-1:hover .card-icons{	bottom:0px;}.card-1:hover .card-icons::before{	top:-10px;}.card-1:hover .card-icons::after{	top:0px;	transform:rotate(-15deg)}.card-2 img{	transition:all 0.25s ease-in-out;}.card-2 .card-name{	position:absolute;	bottom:30px;	left:0px;	font-size:20px;	font-weight:bold;	padding:10px 30px;	z-index:2;	color:#FFF;	transition:all ease-in-out 0.25s;	opacity:0;}.card-2 .card-name::before{	content:"";	position:absolute;	background-color:#1a797f;	opacity:0.8;	z-index:-1;	left:-500px;	top:-10px;	bottom:-10px;	right:250px;	transform:skew(-40deg);	box-shadow:20px 25px 0px 10px rgba(0,0,0,0.5);	transition:all ease-in-out 0.25s;	transition-delay:0.2s;}.card-2 .card-name::after{	content:"";	position:absolute;	background-color:rgba(255,255,255,1);	z-index:-2;	top:-50px;	right:-550px;	width:300px;	height:200px;	transform:rotate(-45deg);	transition:all ease-in-out 0.25s;	transition-delay:0.4s;}.card-2 .card-icons{	top:0px;	right:-100px;	background-color:#2c3441;	color:#FFF;	padding:5px 0px;	z-index:2;	transition:all ease-in-out 0.25s;	transition-delay:0.2s;}.card-2 .card-icons .fa{	display:block;	margin:15px;	text-align:center;}.card-2 .card-icons::before{	content:"";	position:absolute;	width:100px;	top:-5px;	left:-7px;	bottom:0px;	background-color:#2c3441;	z-index:-1;	transition:all ease-in-out 0.25s;	transition-delay:0.4s;}.card-2 .card-icons .fa:hover{	color:#1a797f;}.card-2:hover img{	filter:brightness(75%);	transform:scale(1.1,1.1) rotate(5deg);}.card-2:hover .card-name{	opacity:1;}.card-2:hover .card-name::before{	left:-40px;	right:-25px;}.card-2:hover .card-name::after{	right:-250px;}.card-2:hover .card-icons{	right:0px;}.card-2:hover .card-icons::before{		transform:rotate(-5deg)}.card-3 img{	transition:all 0.25s ease-in-out;	z-index:0;}.card-3::before{	content:"";	position:absolute;	width:10px;	background-color:rgba(255,255,255,1);	border-right:30px solid #e29f1a;	top:0px;	bottom:calc(50%);	transform:skew(-25deg);	left:-300px;	width:200px;	box-shadow:10px -20px 0px 20px rgba(0,0,0,0.5);	transition:all 0.25s ease-in-out;}.card-3::after{	content:"";	position:absolute;	background-color:rgba(255,255,255,1);	width:10px;	border-right:30px solid #e29f1a;	bottom:0px;	top:calc(50%);	transform:skew(25deg);	left:-300px;	width:200px;	box-shadow:10px 20px 0px 20px rgba(0,0,0,0.5);	transition:all 0.25s ease-in-out;}.card-3 .card-name{	bottom:0px;	right:-200px;	left:calc(100%);	padding:25px;	background-color:#001219;	color:#e29f1a;	font-weight:bold;	text-align:right;	transition:all 0.25s ease-in-out;	transition-delay:0.2s;}.card-3 .card-name:before{	content:"";	position:absolute;	height:100%;	width:50px;	background-color:#001219.........完整代码请登录后点击上方下载按钮下载查看