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