css实现一个可编辑输入的日记本待办事项记事本效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现一个可编辑输入的日记本待办事项记事本效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700"); @import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap"); body { background-color: gainsboro; margin: 0; } h1 { text-align: center; font-family: "Roboto", sans-serif; } .paper { font-family: "Patrick Hand", cursive; position: relative; line-height: 25px; box-sizing: content-box; width: 425px; height: 550px; background-color: white; margin: 0 auto; box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2); transition: transform 0.3s, margin 0.3s; } .paper:before { content: ""; position: absolute; height: 100%; width: 2px; background: rgba(255, 0, 0, 0.3); margin-left: 48px; z-index: 2; } .paper .lines { top: 50px; position: relative; box-sizing: content-box; height: calc(550px - 50px); padding-right: 8px; padding-left: 56px; background-image: repeating-linear-gradient(white 0px, white 23.5px, steelblue 25px); } .paper .lines ul { margin: 0; } .paper .holes { position: absolute; height: 100%; width: 48px; margin-top: 1px; margin-bottom: 1px; top: 0; left: 0; } .paper .holes .hole { position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: gainsboro; left: 12.5px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2) inset; } .paper .holes .hole:nth-child(1) { top: 50px; } .paper .holes .hole:nth-child(2) { top: 262.5px; } .paper .holes .hole:nth-child(3) { top: 475px; } [contenteditable] { border: 0; outline: 0; } @media only screen and (max-width: 600px) { h1 { font-size: 1.8em; } .paper { margin-top: -55px; -webkit-transform: scale(0.8); -webkit-transform-origin: 50% 50%; -webkit-transition: 0.3s; transform-origin: 50% 50%; transform: scale(0.8); transition: transform 0.3s, margin 0.3s; } } @media only screen and (max-width: 450px) { h1 { font-size: 1.5em; } .paper { margin-top: -82.5px; -webkit-transform: scale(0.7); -webkit-transform-origin: 50% 50%; -webkit-transition: 0.3s; transform-origin: 50% 50%; transform: scale(0.7); transition: transform 0.3s, margin 0.3s; } } @media only screen and (max-height: 600px) { body { overflow: hidden; } .paper { margin-top: -110px; -webkit-transform: scale(0.6); -webkit-transform-origin: 50% 50%; -webkit-transition: 0.3s; transform-origin: 50% 50%; transform: scale(0.6); transition: transform 0.3s, margin 0.3s; } } @media only scr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0