笔记本日记悬浮打开动画效果代码
代码语言:html
所属分类:悬停
代码描述:笔记本日记悬浮打开动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap"); body { background-image: linear-gradient(toright top, #c7ebe9, #b2f1e2, #a7f5cf, #adf7b2, #c1f690); color: black; font-family: "Syne Mono", monospace; } .wrapper { display: flex; justify-content: center; text-align: center; text-transform: uppercase; overflow: hidden; margin: 0 auto; } .notebook { height: 350px; width: 250px; margin: 112px; position: relative; transition: 0.5s ease-in-out; border-radius: 6px 17px 17px 6px; display: inline-block; perspective: 1200px; } .notebook:hover { transform: rotateZ(-20deg); } .notebook:hover .notebook-front { transform: rotateY(-60deg); z-index: 999; box-shadow: 3px 3px 3px black; } .notebook-front { height: 350px; width: 250px; background: #30C2E0; position: absolute; border-radius: 6px 17px 17px 6px; transition: 0.6s linear; transform-style: preserve-3d; transform-origin: left center 0px; z-index: 1; } .notebook-front:before { background: black; top: -1px; content: ""; position: absolute; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0