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-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; left:20px; top:0px; transform:skew(-30deg); transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-3 .card-icons{ top:10px; left:-30px; transition:all 0.25s ease-in-out; transition-delay:0.4s; }.card-3 .card-icons .fa{ display:block; padding:5px; width:24px; text-align:center; z-index:5;}.card-3 .card-icons .fa:hover{ color:#e29f1a;}.card-3:hover img{ margin-left:50px; }.card-3:hover::before,.card-3:hover::after{ left:-100px;}.card-3:hover .card-name{ left:0px; right:0px;}.card-3:hover .card-name:before{ left:-20px;}.card-3:hover .card-icons{ left:10px;}.card-4 img{ transition:all 0.25s ease-in-out;}.card-4::before{ position:absolute; content:""; width:150px; left:-250px; height:25px; background-color:#0b8dcb; transform:skew(30deg); box-shadow:-50px 10px 0px 10px rgba(0,0,0,0.5); z-index:4; transition:all 0.25s ease-in-out; }.card-4::after{ position:absolute; content:""; right:-300px; bottom:20px; padding:30px; width:250px; background-color:#0b8dcb; opacity:0.9; transform:skew(30deg); box-shadow:-25px 40px 0px 20px rgba(0,0,0,0.5); transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-4 .card-name{ top:calc(40%); left:0px; right:0px; text-align:center; color:#FFF; font-weight:bold; font-size:21px; padding:10px 0px; background-color:rgba(0,0,0,0.2); transform:scale(0,0); transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-4 .card-icons{ bottom:40px; right:20px; z-index:7; transform:scale(0,0); transition:all 0.25s ease-in-out; transition-delay:0.4s;}.card-4 .card-icons .fa{ margin:0px 10px; color:#fff;}.card-4:hover img{ filter:blur(2px) brightness(70%); transform:scale(1.1,1.1);}.card-4:hover::before{ left:-20px; }.card-4:hover::after{ right:-50px;}.card-4:hover .card-name{ transform:scale(1,1);}.card-4:hover .card-icons{ transform:scale(1,1); }.card-5 img{ transition:all 0.25s ease-in-out;}.card-5::before{ content:""; position:absolute; top:calc(150%); left:-200px; right:-200px; bottom:-100px; background-color:#263751; transform:rotate(30deg); box-shadow:10px -10px 0px 10px rgba(0,0,0,0.2); transition:all 0.25s ease-in-out;}.card-5::after{ content:""; position:absolute; background-color:#fccc3a; height:calc(50%); bottom:0px; left:calc(150%); right:-100px; transform:rotate(-30deg) skew(30deg); transition:all 0.25s ease-in-out; transition-delay:0.2s; }.card-5 .card-name{ left:-200px; bottom:50px; color:#FFF; font-size:17px; font-weight:bold; transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-5 .card-name span{ color:#fccc3a;}.card-5 .card-icons{ bottom:20px; left:-200px; color:#FFF; transition:all 0.25s ease-in-out; transition-delay:0.4s;}.card-5 .card-icons .fa{ margin-right:10px;}.card-5 .card-icons .fa:hover{ color:#fccc3a;}.card-5:hover img{ }.card-5:hover::before{ top:calc(75%);}.card-5:hover::after{ left:calc(85%);}.card-5:hover .card-name{ left:20px;}.card-5:hover .card-icons{ left:20px;}.card-6 img{ transition:all 0.25s ease-in-out; z-index:-2;}.card-6::before{ content:""; position:absolute; background-color:#1793b9; opacity:0.9; bottom:110px; left:-125px; height:25px; width:100px; z-index:1; transform:skew(-45deg); transition:all 0.25s ease-in-out; transition-delay:0.4s;}.card-6::after{ content:""; position:absolute; bottom:-100px; height:100px; background-color:#FFF; left:0px; right:0px; transition:all 0.25s ease-in-out;}.card-6 .card-name{ left:-250px; bottom:30px; padding:25px; color:#FFF; z-index:5; font-weight:bold; font-size:18px; transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-6 .card-name::before{ content:""; position:absolute; left:-500px; width:200px; height:100px; background-color:#004c8c; z-index:-1; top:0px; transform:skew(-45deg); box-shadow:10px 10px 0px 10px rgba(0,0,0,0.2); transition:all 0.25s ease-in-out;}.card-6 .card-name::after{ content:""; position:absolute; left:-150px; width:120px; height:60px; background-color:#004c8c; z-index:-2; top:-20px; transform:skew(-45deg); box-shadow:10px 10px 0px 10px rgba(0,0,0,0.2); transition:all 0.25s ease-in-out; transition-delay:0.6s;}.card-6 .card-icons{ bottom:-50px; right:10px; z-index:3; transition:all 0.25s ease-in-out; transition-delay:0.4s;}.card-6 .card-icons .fa{ margin-left:5px; color:#1793b9;}.card-6 .card-icons .fa:hover{ color:#004c8c;}.card-6:hover img{ filter:brightness(50%);}.card-6:hover::after{ bottom:0px;}.card-6:hover::before{ left:25px;}.card-6:hover .card-name{ left:10px;}.card-6:hover .card-name::before{ left:-50px;}.card-6:hover .card-icons{ bottom:10px;}.card-6:hover .card-name::after{ left:100px;}.card-7 img{ transition:all 0.25s ease-in-out; z-index:1;}.card-7::before{ content:""; position:absolute; bottom:-100px; left:0px; right:0px; height:100px; background: linear-gradient(30deg, #49515c, #232c35); z-index:2; transition:all 0.25s ease-in-out;}.card-7::after{ content:""; position:absolute; height:25px; background-color:#e85a23; bottom:90px; left:calc(150%); right:-100px; z-index:3; transform:skew(-45deg); box-shadow:-10px 10px 0px 5px rgba(0,0,0,0.2); transition:all 0.25s ease-in-out; transition-delay:0.1s;}.card-7 .card-name{ bottom:40px; left:-300px; z-index:3; color:#FFF; font-weight:bold; transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-7 .card-name::before{ content:""; position:absolute; left:-50px; bottom:-10px; right:-30px; top:-10px; background-color:rgba(0,0,0,0.2); z-index:1; transform:skew(-45deg);}.card-7 .card-icons{ bottom:-30px; right:10px; z-index:3; transition:all 0.25s ease-in-out; transition-delay:0.3s;}.card-7 .card-icons .fa{ padding:5px; background-color:rgba(255,255,255,0.2); color:#e85a23; color:#FFF; width:24px; text-align:center; margin-left:5px; border-radius:50%;}.card-7:hover img{ filter:brightness(80%); margin-bottom:50px; margin-top:-50px;}.card-7:hover::before{ bottom:0px;}.card-7:hover::after{ left:calc(50%);}.card-7:hover .card-name{ left:20px;}.card-7:hover .card-icons{ bottom:10px;}.card-8 img{ transition:all 0.25s ease-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0