css实现悬浮封面翻书显示文字内容效果代码
代码语言:html
所属分类:悬停
代码描述:css实现悬浮封面翻书显示文字内容效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, :before, :after { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; } .image_container { margin-left: 5em; position: relative; transition: all 200ms linear; cursor: pointer; } .image_container::before { content: attr(data-content); position: absolute; padding: 1em; top: 0; left: 0; width: 100%; height: 95%; background-color: #f9f6ee; box-shadow: 0 4px 5px inset #edeade, 0 -4px 5px inset #edeade; transform-origin: left; } img { width: 200px; height: 350px; transform-origin: left; transform: perspective(1000px) rotateY(0deg); transition: all 600ms linear; } .image_container:hover { transform: perspective(1000px) rotate(-5deg); } .image_container:hover img { transform: perspective(1000px) rotateY(-105deg); } </style> </head> <body > <div class="image_container" data-content="To Kill a Mockingbird is a novel by the American author Harper Lee. The overall me.........完整代码请登录后点击上方下载按钮下载查看
网友评论0