css实现铆钉便签纸效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现铆钉便签纸效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet"> <style> :root { --paper-shadow: #c9bf8d; } body { display: flex; justify-content: center; padding: 10vmin; background-color: #c3cde8; font-family: "Caveat", cursive; font-size: 2rem; } .paper { --paper-dark: #e5c93d; --paper-color: #ffed87; position: relative; display: flex; justify-content: center; min-width: 325px; min-height: 175px; background: linear-gradient( 135deg, var(--paper-dark), 30%, var(--paper-color) ); box-shadow: 3px 3px 2px var(--paper-shadow); transform: rotate(10deg); transform-origin: top left; } .paper p { margin: auto; } .pin { --pin-color: #d02627; --pin-dark: #9e0608; --pin-light: #fc7e7d; position: absolute; left: 20px; width: 60px; height: 50px; } .shadow { position: absolute; top: 18px; left: -8px; width: 35px; height: 35px; border-radius: 50%; background: radial-gradient(var(--paper-shadow), 20%, rgba(201, 191, 141, 0)); } .metal { position: absolute; width: 5px; height: 20px; background: linear-gradient(to right, #808080, 40%, #eae8e8, 50%, #808080); border-radius: 0 0 30% 30%; transform: rotate(50deg); transform-origi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0