css的has属性示例用法合集
代码语言:html
所属分类:布局界面
代码描述:css的has属性示例用法合集
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..700&display=swap"); .cards .a { background-color: hsl(var(--hue), 60%, 80%, 0.5); } .cards:has(.a:hover) .a:not(:hover) { background-color: #EBEBE3; opacity: 0.4; } .cards .a:hover { background-color: #FFE681; } .siblings .a:hover { background-color: #EE7762; color: #F9F6EF; } .siblings .a:hover + .a, .siblings .a:has(+ .a:hover) { background-color: #F3D060; } .siblings .a:hover + .a + .a, .siblings .a:has(+ .a + .a:hover) { background-color: #FFE681; } body { --hue: 30; --bg: hsl(var(--hue) 70% 90%); background-color: var(--bg); } body:has(#cb1:checked) { --hue: 60; } body:has(#cb2:checked) { --hue: 90; } body:has(#cb3:checked) { --hue: 120; } body:has(#cb4:checked) { --hue: 150; } body:has(#cb5:checked) { --hue: 180; } body:has(#cb6:checked) { --hue: 210; } body:has(#cb7:checked) { --hue: 240; } body:has(#cb8:checked) { --hue: 270; } body:has(#cb9:checked) { --hue: 300; } body:has(#cb10:checked) { --hue: 330; } nav label { background-size: 100% 100%; } nav label:before, nav label:after { rotate: 0deg; translate: 0; background-color: #fff; } nav:has(#menu:checked) { width: 30vw; } nav:has(#menu:checked) h2, nav:has(#menu:checked) ul { translate: 0; } nav #menu:checked + label { background-size: 0% 100%; } nav #menu:checked + label:before, nav #menu:checked + label:after { background-color: hsl(calc(var(--hue) + 180), 80%, 50%); } nav #menu:checked + label:before { rotate: 45deg; translate: 0.3em calc(-.5em + 1px); } nav #menu:checked + label:after { rotate: -45deg; translate: 0.3em 0; } body { font-family: "Montserrat", sans-serif; font-size: 1rem; display: grid; gap: 1em; transition: 1s linear; } body > * { width: min(70ch, 100% - 6em); margin: 0 auto; } h1 { font-weight: 100; font-size: 3rem; margin: 0; } .notes, h2 { grid-column: 1/-1; } h2 { font-weight: 300; margin: 0; padding-bottom: 0; line-height: 0.8; } .cards, .siblings, .color-me { padding: 1em; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10ch, 100%), 1fr)); transition: 0.3s ease; gap: 2em; } .cards .a, .siblings .a, .color-me .a { container-type: inline-size; aspect-ratio: 1; display: grid; place-content: center; border: 1px solid #0001; border-radius: 0.3em; box-shadow: 3.4rem 3.4rem 0 -3rem #0001, -3.4em 3.4em 0 -3em #0001, 3.4em -3.4em 0 -3em #0001, -3.4em -3.4em 0 -3em #0001; transition: 0.5s ease; } .siblings, .color-me { grid-template-columns: repeat(10, 1fr); gap: 0.1em; row-gap: 1em; } h2 a { font-size: 0.8rem; text-decoration: none; position: relative; color: hsl(calc(var(--hue) - 60), 70%, 40%); } h2 a:after { content: "ℹ"; border-radius: 50%; border: 1px solid hsl(var(--hue), 80%, 10%); width: 1em; aspect-ratio: 1; display: inline-grid; place-content: center; position: absolute; } .form-element input { display: none; } .form-element label { display: block; text-align: center; border: 1px solid #0002; cursor: pointer; } .form-element [type=radio]:checked + label { color: #efefef; background-color: hsl(var(--hue), 70%, 20%); } nav { display: relative; position: fixed; top: 0; left: 0; height: 100vh; background-color: hsl(var(--hue), 70%, 20%); color: #efefefd0; overflow-x: clip; box-shadow: 1em 0 1em -0.5em hsl(var(--hue), 70%, 30%, 0.3); } nav h2 { font-size: 1.4rem; background-color: hsl(var(--hue), 70%, 50%); color: hsl(var(--hue), 70%, 20%); text-shadow: 1px 1px 0 hsl(var(--hue), 70%, 80%), -1px 1px 0 hsl(var(--hue), 70%, 80%), 1px -1px 0 hsl(var(--hue), 70%, 80%), -1px -1px 0 hsl(var(--hue), 70%, 80%); padding: 1em; } nav ul { padding: 0; } nav ul li { list-style-type: none; display: block; padding: 1em; } nav ul li + li { border-top: 1px solid hsl(var(--hue), 70%, 25%); } nav ul li:last-of-type { border-bottom: 1px solid hsl(var(--hue), 70%, 25%); } nav #menu { display: none; } nav label { display: block; position: absolute; top: 0.3em; right: 0.3em; width: 2em; aspect-ratio: 1; background-image.........完整代码请登录后点击上方下载按钮下载查看
网友评论0