div+css实现操作成功文字提示页卡片折叠展开效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现操作成功文字提示页卡片折叠展开效果代码
代码标签: div css 操作成功 文字 提示 页 卡片 折叠 展开
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");body { display: grid; place-items: center; height: 100vh; background-size: 24px 24px; background-image: linear-gradient(to right,#e7e9e7 1px,transparent 1px),linear-gradient(to bottom,#e7e9e7 1px,transparent 1px); background-color: #eff1ef; font-family: "Inter"; color: #1d211c; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } body::before { content: ""; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-size: 96px 96px; background-image: linear-gradient(to right,#dfe2df 1px,transparent 1px),linear-gradient(to bottom,#dfe2df 1px,transparent 1px) } #texture { bottom: 0; height: 100%; left: 0; opacity: .08; pointer-events: none; position: fixed; width: 100%; z-index: 100; filter: contrast(200%) } #signature { position: fixed; bottom: 1rem; right: 1rem; font-family: Georgia; font-style: italic; font-size: 12px; color: #60655f; text-decoration: none; transition: color 100ms cubic-bezier(0.645,0.045,0.355,1) } #signature:hover { color: #1d211c } h1,p { animation: translate-y-100 300ms cubic-bezier(0.165,0.84,0.44,1.2) forwards; opacity: 0 } h1 { margin-top: 0; margin-bottom: .5rem; font-size: 24px; animation-delay: 1100ms } p { margin-top: 0; font-size: 13px; color: #60655f; animation-delay: 1150ms } .cta-row { display: flex; justify-content: space-between; gap: 12px; width: 100%; animation: translate-y-100 600ms 2200ms cubic-bezier(0.19,1,0.22,1) forwards; opacity: 0 } button { position: relative; height: 32px; width: 100%; border: 0; border-radius: 5px; line-height: 1; display: flex; justify-content: center; align-items: center; background: #46a758; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset,0 1px 3px 0 rgba(24,25,22,0.1),0 1px 2px -1px rgba(24,25,22,0.1); border: 1px solid #2a7e3b; color: #fff; font-size: 13px; font-weight: 500; padding: .5rem 1rem; transition: transform 200ms cubic-bezier(0.165,-0.84,0.44,2),opacity 200ms ease,background-color 100ms ease; cursor: pointer } button:hover { background: #2a7e3b } button:active { transform: scale(0.98); box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset } button:active:before { opacity: .4 } button.secondary { color: #181916; background: white; box-shadow: var(--box-shadow); border: 1px solid #d9d9d6 } button.secondary:hover { background: #f8f8f6 } button.secondary:active { box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset } .card { position: relative; display: flex; flex-direction: column; align-items: center; width: 448px; padding: 32px; background-color: #fff; border-radius: 5px; box-sizing: border-box } .card:before { content: ""; position: absolute; left: 0; top: 0; w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0