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

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

代码语言：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-i.........完整代码请登录后点击上方下载按钮下载查看