css+js实现倾斜视觉差异效果代码
代码语言:html
所属分类:视觉差异
代码描述:css+js实现倾斜视觉差异效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800"); html, body { height: 100%; } body { align-items: center; background: #642B73; background: linear-gradient(to bottom, #C6426E, #642B73); font-family: 'Open Sans', sans; justify-content: center; -webkit-perspective: 1800px; perspective: 1800px; text-align: center; margin: 0 20px; } h1 { color: #3e3e42; font-size: 32px; font-weight: 800; letter-spacing: -1px; margin-bottom: 30px; -webkit-transform: translateZ(35px); transform: translateZ(35px); } h3 { color: #eb285d; font-size: 16px; margin-bottom: 6px; -webkit-transform: translateZ(25px); transform: translateZ(25px); } .cards { background: #fff; border-radius: 15px; box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17); display: inline-block; padding: 30px 35px; -webkit-perspective: 1800px; perspective: 1800px; text-align: left; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(11deg) rotateY(16.5deg); transform: rotateX(11deg) rotateY(16.5deg); min-width: 595px; } .card { border-radius: 15px; box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.6); display: inline-block; height: 250px; overflow: hidden; -webkit-perspective: 1200px; perspective: 1200px; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translatez(35px); transform: translatez(35px); transition: -webkit-transform 200ms ease-out; transition: transform 200ms ease-out; transition: transform 200ms ease-out, -webkit-transform 200ms ease-out; width: 175px; text-align: center; } .card:not(:last-child) { margin-right: 30px; } .card__img { position: relative; height: 100%; } .card__bg { bottom: -50px; left: -50px; position: absolute; right: -50px; top: -50px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translateZ(-50px); transform: translateZ(-50px); z-index: 0; } .card__one .card__img { top: 14px; right: -10px; height: 110%; } .card__one .card__bg { background: url("//repo.bfw.wiki/bfwrepo/image/5eaa0f4300406.png") center/cover no-repeat; } .card__two .card__img { top: 25px; } .card__two .card__bg { background: url("//repo.bfw.wiki/bfwrepo/image/5eaa0f4300406.png") center/cover no-repeat; } .card__three .card__img { top: 5px; left: -4px; height: 110%; } .card__three .card__bg { background: url("//repo.bfw.wiki/bfwrepo/image/5eaa0f4300406.png") center/cover no-repeat; } .card__text { align-items: center; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%); bottom: 0; display: flex; flex-direction: column; height: 70px; justify-content: center; position: absolute; width: 100%; z-index: 2; } .card__title { color: #fff; font-size: 18px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0