css实现@starting样式实现图片列表插入和删除元素动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现@starting样式实现图片列表插入和删除元素动画效果代码
代码标签: css @starting 样式 图片 列表 插入 删除 元素 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import 'normalize.css'; :root { --width: 140px; --aspect-ratio: 2.12 / 2.62; } * { box-sizing: border-box; } html { color-scheme: light only; } @media (prefers-color-scheme: dark) { html { color-scheme: dark only; } } [data-theme='light'] { color-scheme: light only; } [data-theme='dark'] { color-scheme: dark only; } body { display: grid; place-items: center; min-height: 100vh; overflow-x: hidden; background: color-mix(in lch, canvas, canvasText 10%); } body::before { --size: 45px; --line: color-mix(in lch, canvasText, transparent 85%); content: ''; height: 100vh; width: 100vw; position: fixed; background: linear-gradient( 90deg, var(--line) 1px, transparent 1px var(--size) ) 50% 50% / var(--size) var(--size), linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size); -webkit-mask: linear-gradient(-25deg, transparent 30%, white); mask: linear-gradient(-25deg, transparent 30%, white); top: 0; transform-style: flat; pointer-events: none; z-index: -1; } ul { list-style-type: none; margin: 0; padding: 0; } li { width: var(--width); aspect-ratio: var(--aspect-ratio); } ul { display: flex; } .bear-link { color: canvasText; position: fixed; top: 1rem; left: 1rem; width: 48px; aspect-ratio: 1; display: grid; place-items: center; opacity: 0.8; } :where(.x-link, .bear-link):is(:hover, :focus-visible) { opacity: 1; } .bear-link svg { width: 75%; } /* Polaroid styling */ .polaroid__wrapper { position: relative; width: var(--width); aspect-ratio: var(--aspect-ratio); transform: rotate(var(--rotation, 6deg)) scale(var(--scale, 1)); } .polaroid { --spread: 6px; --dot: hsl(74 29% 92%); width: calc(100% - 1rem); height: calc(100% - 1rem); background: radial-gradient(var(--dot) 1px, transparent 1px), radial-gradient(var(--dot) 1px, transparent 1px), hsl(74 29% 100%); background-size: var(--spread) var(--spread); background-position: 0 0, calc(var(--spread) * 0.5) calc(var(--spread) * 0.5); padding: calc((0.2 / 3.5) * var(--width)); overflow: hidden; display: flex; flex-direct.........完整代码请登录后点击上方下载按钮下载查看
网友评论0