css实现书本三维倾斜走光立体效果代码
代码语言:html
所属分类:三维
代码描述:css实现书本三维倾斜走光立体效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-size: 62.5%; } @media (max-width: 900px) { html, body { font-size: 50%; } } body { overflow: hidden; background: -webkit-gradient(linear, left top, left bottom, from(#F7F7FF), to(#BDD6DD)); background: linear-gradient(#F7F7FF, #BDD6DD); } .demo { position: absolute; left: 50%; top: 50%; width: 40.5rem; height: 60rem; margin-left: -20.25rem; margin-top: -30rem; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: rotateReverse 2s infinite linear; animation: rotateReverse 2s infinite linear; } .demo__content { position: relative; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: rotate 2s infinite linear; animation: rotate 2s infinite linear; -webkit-transform: rotateX(10deg) rotateZ(0); transform: rotateX(10deg) rotateZ(0); background: #fff; } .demo__content:before { content: ""; z-index: -1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-shadow: 0 5rem 10rem rgba(0, 0, 0, 0.4); } .demo__img { overflow: hidden; position: absolute; left: -0.55rem; top: 3.15rem; width: 41.6rem; height: 53.7rem; -webkit-transform: translateZ(5rem) scale(0.95); transform: translateZ(5rem) scale(0.95); } .demo__img:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url("//repo.bfw.wiki/bfwrepo/image/5fc1b34194054.png"); background-size: cover; } .demo__img:after { content: ""; z-index: 2; overflow: hidden; position: absolute; left: -20%; top: 0; width: 80%; padding-bottom: 80%; border-radius: 50%; background: radi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0