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