css布局实现三维立体书本书籍效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现三维立体书本书籍效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: url(//repo.bfw.wiki/bfwrepo/image/5e15dae696d11.png); background-attachment: fixed; background-size: cover; } .book { position: relative; top: 0; width: 400px; height: 600px; background: #fff; transform: rotate(-37.5deg) skewX(10deg); box-shadow: -35px 35px 50px rgba(0, 0, 0, 1); transition: 0.5s; } .book:hover { transform: rotate(-37.5deg) skewX(10deg) translate(20px, -20px); box-shadow: -50px 50px 100px rgba(0, 0, 0, 1); } .book:before { content: ''; width: 30px; height: 100%; background: url(//repo.bfw.wiki/bfwrepo/image/5e9cee0993c79.png); position: absolute; top: 0; left: 0; transform: skewY(-45deg) translate(-30px, -15px); box-shadow: inset -10px 0 20px rgba(0, 0, 0, 0.2); } .book:after { content: ''; width: 100%; height: 30px; background: #ccc; position: absolute; bott.........完整代码请登录后点击上方下载按钮下载查看
网友评论0