jquery+css模仿apple tv炫酷多层背景视觉差异交互效果代码
代码语言:html
所属分类:视觉差异
代码描述:jquery+css模仿apple tv炫酷多层背景视觉差异交互效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html, body { min-height: 100%; } body { font-family: Helvetica, sans-serif; font-size: 18px; line-height: 1.5; color: #999; background: -webkit-linear-gradient(290deg, #333, #222) #242424; background: linear-gradient(160deg, #333, #222) #242424; } a { color: #56b2ff; text-decoration: none; } .wrapper { position: relative; height: 800px; -webkit-perspective: 800; perspective: 800; } .layer { position: absolute; will-change: transform; } .ad { position: absolute; left: 50%; top: 50%; width: 840px; height: 500px; margin-left: -420px; margin-top: -250px; background: black; overflow: hidden; border-radius: 3px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform; box-shadow: 0 60px 100px rgba(0, 0, 0, 0.5); } .layer-1, .layer-2, .layer-3 { top: 50%; left: 50%; margin-left: -630px; margin-top: -375px; width: 1260px; height: 750px; -webkit-transform: scale(0.7); transform: scale(0.7); } .light { top: 50%; left: 50%; margin-left: -840px; margin-top: -800px; width: 1680px; height: 1000px; background: -webkit-radial-gradient(ellipse closest-side at center, #6c6c6c, #000000); background: radial-gradient(ellipse closest-side at center, #6c6c6c, #000000); mix-blend-mode: color-dodge; opacity: .6; z-index: 3; } .light-2 { z-index: 4; background: -webkit-radial-gradient(ellipse closest-side at center, #ffffff, #000000); background: radial-gradient(ellipse closest-side at center, #ffffff, #000000); mix-blend-mode: screen; opacity: .3; } .layer-1 { background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/breaking-bad-layer-1.jpg); background-position: 100%; } .layer-2 { background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/breaking-bad-layer-2.png); } .layer-3 { background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/breaking-bad-layer-3.png); } header{ text-align: center; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0