css实现标签书签悬浮阴影待办事项效果代码
代码语言:html
所属分类:悬停
代码描述:css实现标签书签悬浮阴影待办事项效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Grape+Nuts&family=Norican&display=swap"); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } ul, ol { list-style: none; font-family: "Grape Nuts", cursive; font-size: 2.4rem; color: midnightblue; } html { font-size: 62.5%; } @media only screen and (max-width: 624px) { html { font-size: 50%; } } html body { font-size: 1.6rem; min-height: 100vh; display: flex; flex-direction: column; align-items: center; background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)), url(https://assets.codepen.io/2509128/paper.jpeg); } h1 { margin-top: 2rem; font-family: "Norican", cursive; color: saddlebrown; position: relative; display: flex; align-items: center; font-size: 4rem; } h1::before, h1::after { content: ""; display: block; width: 5rem; height: 2px; background-color: currentColor; margin: 0 1rem; } ul:not(ul ul) { padding: 2rem; padding-bottom: 4rem; display: grid; grid-template-columns: max-content; z-index: 1; position: relative; perspective: 50vw; transform-style: preserve-3d; } ul:not(ul ul) .done { text-decoration: line-through; } ul:not(ul ul) > li { --levitate: 0; padding: 1.2rem 2rem; background-color: pink; position: relative; transform-style: preserve-3d; cursor: pointer; position: relative; transition: transform 0.3s; } ul:not(ul ul) > li::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.1; transition: opacity 0.3s; z-index: 1; background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); } ul:not(ul ul) > li:hover { --levitate: 1; } ul:not(ul ul) > li:hover::before { transform: translate3d(6rem, 1rem, -1px) scale(calc(1 - var(--levitate) * 0.1)) rotate(1.5deg); filter: blur(8px); } ul:not(ul ul) > li:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0