js实现滚动图片聚焦显示文字效果代码
代码语言：html
所属分类：加载滚动
代码描述：js实现滚动图片聚焦显示文字效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<style>
html,
body {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-moz-box-pack: start;
-o-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding: 25vh 0;
background: #484848;
}
.card-container {
display: block;
position: relative;
width: 70%;
height: 50vh;
-webkit-perspective: 3000px;
-moz-perspective: 3000px;
-ms-perspective: 3000px;
perspective: 3000px;
}
.card-container>.card {
display: block;
position: relative;
width: 100%;
height: 100%;
padding: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-o-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.3);
box-shadow: 0 0 50px rgba(0,0,0,0.3);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transition: opacity 0.15s;
-moz-transition: opacity 0.15s;
-o-transition: opacity 0.15s;
-ms-transition: opacity 0.15s;
transition: opacity 0.15s;
overflow: hidden;
z-index: 100;
}
.card-container>.card.upper {
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-o-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
}
.card-container>.card.lower {
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-o-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
}
.card-container>.card>a {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 50vh;
font-size: 4em;
font-family: 'Lato', Verdana, sans-serif;
color: #fff;
text-decoration: none;
text-shadow: 0 0 50px rgba(0,0,0,0.8);
z-index: 300;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.card-container>.card::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 8em;
-webkit-transform: translate(-50%, -50%) scaleX(0);
-moz-transform: translate(-50%, -50%) scaleX(0);
-o-transform: translate(-50%, -50%) scaleX(0);
-ms-transform: translate(-50%, -50%) scaleX(0);
transform: translate(-50%, -50%) scaleX(0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid #fff;
border-left: none;
border-right: none;
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-ms-transition: -ms-transform 0.6s;
transition: transform 0.6s;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
z-index: 300;
}
.card-container>.card::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: opacity 0.8s;
-moz-transition: opacity 0.8s;
-o-transition: opacity 0.8s;
-ms-transition: opacity 0.8s;
transition: opacity 0.8s;
}
.card-container>.card.center::before {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-transform: translate(-50%, -50%) scaleX(1);
-moz-transform: translate(-50%, -50%) scaleX(1);
-o-transform: translate(-50%, -50%) scaleX(1);
-ms-transform: translate(-50%, -50%) scaleX(1);
transform: translate(-50%, -50%) scaleX(1);
}
.card-container>.card.center::after {
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
z-index: 200;
}
.card-container:nth-child(0)>.card::after {
background: -webkit-linear-gradient(top left, #4caf50, #607d8b);
background: -moz-linear-gradient(top left, #4caf50, #607d8b);
background: -o-linear-gradient(top left, #4caf50, #607d8b);
background: -ms-linear-gradient(top left, #4caf50, #607d8b);
background: linear-gradient(to bottom right, #4caf50, #607d8b);
}
.card-container:nth-child(1)>.card::after {
background: -webkit-linear-gradient(top left, #4caf50, #607d8b);
background: -moz-linear-gradient(top left, #4caf50, #607d8b);
background: -o-linear-gradient(top left, #4caf50, #607d8b);
background: -ms-linear-gradient(top left, #4caf50, #607d8b);
background: linear-gradient(to bottom right, #4caf50, #607d8b);
}
.card-container:nth-child(2)>.card::after {
background: -webkit-linear-gradient(top left, #ffa000, #e91e63);
background: -moz-linear-gradient(top left, #ffa000, #e91e63);
background: -o-linear-gradient(top left, #ffa000, #e91e63);
background: -ms-linear-gradient(top left, #ffa000, #e91e63);
background: linear-gradient(to bottom right, #ffa000, #e91e63);
}
.card-container:nth-child(3)>.card::after {
background: -webkit-linear-gradient(top left, #9c27b0, #2196f3);
background: -moz-linear-gradient(top left, #9c27b0, #2196f3);
background: -o-linear-gradient(top left, #9c27b0, #2196f3);
background: -ms-linear-gradient(top left, #9c27b0, #2196f3);
background: linear-gradient(to bottom right, #9c27b0, #2196f3);
}
.card-container:nth-child(4)>.card::after {
background: -webkit-linear-gradient(top left, #e91e63, #ff5722);
background: -moz-linear-gradient(top left, #e91e63, #ff5722);
background: -o-linear-gradient(top left, #e91e63, #ff5722);
background: -ms-linear-gradient(top left, #e91e63, #ff5722);
background: linear-gradient(to bottom right, #e91e63, #ff5722);
}
.card-container:nth-child(5)>.card::after {
background: -webkit-linear-gradient(top left, #673ab7, #4caf50);
background: -moz-linear-gradient(top left, #673ab7, #4caf50);
background: -o-linear-gradient(top left, #673ab7, #4caf50);
background: -ms-linear-gradient(top left, #673ab7, #4caf50);
background: linear-gradient(to bottom right, #673ab7, #4caf50);
}
.card-container:nth-child(6)>.card::after {
background: -webkit-linear-gradient(top left, #f44336, #9c27b0);
background: -moz-linear-gradient(top left, #f44336, #9c27b0);
background: -o-linear-gradient(top left, #f44336, #9c27b0);
background: -ms-linear-gradient(top left, #f44336, #9c27b0);
background: linear-gradient(to bottom right, #f44336, #9c27b0);
}
.card-container:nth-child(7)>.card::after {
background: -webkit-linear-gradient(top left, #673ab7, #4caf50);
background: -moz-linear-gradient(top left, #673ab7, #4caf50);
background: -o-linear-gradient(top left, #673ab7, #4caf50);
background: -ms-linear-gradient(top left, #673ab7, #4caf50);
background: linear-gradient(to bottom right, #673ab7, #4caf50);
}
.card-container:nth-child(8)>.card::after {
backgr.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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