- 打字成果
阐明：
通过 steps() 属性来实现宰割文本的成果。首先，你必须指定 step() 中传入的数量，在这个例子中就是文本的长度。
接着，第二步，咱们应用 @keyframes 去申明什么时候开始执行动画
<div class="typing"> <div class="typing-effect">Typing effect for text</div></div>.typing { height: 80vh; display: flex; align-items: center; justify-content: center;}.typing-effect { width: 22ch; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em; animation: typing 2s steps(22), effect .5s step-end infinite alternate;}@keyframes typing { from { width: 0; }}@keyframes effect { 50% { border-color: transparent; }}- 通明图片暗影成果
阐明：
应用：drop-shadow
drop-shadow 的工作形式是，其遵循给给定图片的 Alpha 通道。因而暗影是基于图片的外部形态，而不是显示在图片里面。
<div class="transparent-shadow"> <div class="margin-right"> <div class="margin-bottom align-center"> box-shadow </div> <img class="box-shadow" src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png" alt="box-shadow example (transparent)"> </div> <div> <div class="margin-bottom align-center"> drop-shadow </div> <img class="drop-shadow" src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png" alt="drop-shadow example (transparent)"> </div></div>.transparent-shadow { height: 80vh; display: flex; align-items: center; justify-content: center;}.margin-right { margin-right: 2em;}.margin-bottom { margin-bottom: 1em;}.align-center { text-align: center;}.box-shadow { box-shadow: 2px 4px 8px #3723a1;}.drop-shadow { filter: drop-shadow(2px 4px 8px #3723a1);}- 自定义 Cursor
<div class="custom-cursor"> <div class="card"> Default </div> <div class="card card-image-cursor"> Image </div> <div class="card card-emoji-cursor"> Emoji </div></div>.custom-cursor { display: flex; height: 80vh; align-items: center; justify-content: center; background: #f3f3f3; padding: 0 10px;}.card { width: 200px; height: 200px;display: flex; align-items: center; justify-content: center; background-color: #D29A5A; margin-right: 10px;color: #fff; font-size: 1.4em; text-align: center; }.card-image-cursor { background-color: #D11A5A; cursor: url("https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ac1d8cb2b1b46a384e986a7461df26a~tplv-k3u1fbpfcp-watermark.image?"), auto;}.card-emoji-cursor { background-color: #D29B22; cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'></text></svg>"), auto;}- 应用 attr() 展现 tooltip
<h1> HTML/CSS tooltip</h1><p> Hover <span class="tooltip" tooltip-data="Tooltip Content">Here</span> to see the tooltip.</p><p> You can also hover <span class="tooltip" tooltip-data="This is another Tooltip Content">here</span> to see another example.</p>.tooltip { position: relative; border-bottom: 1px dotted black;}.tooltip:before { content: attr(tooltip-data); position: absolute; width: 250px; background-color: #efba93; color: #fff; text-align: center; padding: 15px; line-height: 1.1; border-radius: 5px; z-index: 1; opacity: 0; transition: opacity .5s; bottom: 125%; left: 50%; margin-left: -60px; font-size: 0.70em; visibility: hidden;}.tooltip:after { content: ""; position: absolute; bottom: 75%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; opacity: 0; transition: opacity .5s; border-color: #000 transparent transparent transparent; visibility: hidden;}.tooltip:hover:before, .tooltip:hover:after { opacity: 1; visibility: visible;}- 纯 CSS 实现核算清单
<div class="checklist"> <h2>Item Checklist with CSS</h2> <label> <input type="checkbox" name="" id="" /> <i></i> <span>Item #1</span> </label> <label> <input type="checkbox" name="" id="" /> <i></i> <span>Item #2</span> </label> <label> <input type="checkbox" name="" id="" /> <i></i> <span>Item #3</span> </label></div>.checklist { padding: 50px; position: relative; background: #043b3e; border-top: 50px solid #03a2f4;}.checklist h2 { color: #f3f3f3; font-size: 25px; padding: 10px 0; margin-left: 10px; display: inline-block; border-bottom: 4px solid #f3f3f3;}.checklist label { position: relative; display: block; margin: 40px 0; color: #fff; font-size: 24px; cursor: pointer;}.checklist input[type="checkbox"] { -webkit-appearance: none;}.checklist i { position: absolute; top: 2px; display: inline-block; width: 25px; height: 25px; border: 2px solid #fff;}.checklist input[type="checkbox"]:checked ~ i { top: 1px; height: 15px; width: 25px; border-top: none; border-right: none; transform: rotate(-45deg);}.checklist span { position: relative; left: 40px; transition: 0.5s;}.checklist span:before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #fff; transform: translateY(-50%) scaleX(0); transform-origin: left; transition: transform 0.5s;}.checklist input[type="checkbox"]:checked ~ span:before { transform: translateY(-50%) scaleX(1); transform-origin: right; transition: transform 0.5s;}.checklist input[type="checkbox"]:checked ~ span { color: #154e6b;}- 应用 :is() 和 :where() 增加元素款式
<h2 class="content-title">Header 2 <b>content title</span></h2>:where(h2,h3,h4) > b { color: blue;}:is(h2):where(.content-title) { text-transform: uppercase;}- 应用关键帧实现手风琴下拉成果
<main> <details open> <summary>Accordion Tab #1</summary> <div class="tab-content"> <p>your text goes here</p> </div> </details> <details> <summary>Accordion Tab #2</summary> <div class="tab-content"> <p>your text goes here</p> </div> </details> <details> <summary>Accordion Tab #3</summary> <div class="tab-content"> <p>your text goes here</p> </div> </details></main>main { max-width: 400px; margin: 0 auto;}p { text-align: justify; font-family: monospace; font-size: 13px;}summary { font-size: 1rem; font-weight: 600; background-color: #f3f3f3; color: #000; padding: 1rem; margin-bottom: 1rem; outline: none; border-radius: 0.25rem; cursor: pointer; position: relative;}details[open] summary ~ * { animation: sweep .5s ease-in-out;}@keyframes sweep { 0% {opacity: 0; margin-top: -10px} 100% {opacity: 1; margin-top: 0px}}details > summary::after { position: absolute; content: "+"; right: 20px;}details[open] > summary::after { position: absolute; content: "-"; right: 20px;}details > summary::-webkit-details-marker { display: none;}- 侧边栏的 Hover 成果
<div class="css-dynamic-sidebar"> <nav> <a class="" href="#">Menu #1</a> <a class="" href="#">Menu #2</a> <a class="" href="#">Menu #3</a> </nav> <div class="site-content"> <p>Hover over the sidebar</p> <p>Also work with Tab selector (for accessibility)</p></div></div>.css-dynamic-sidebar { overflow: hidden; position: relative; height: 15em; max-width: 15em; margin: auto;}.site-content { margin: auto;}nav { display: flex; flex-direction: column; position: absolute; right: 100%; padding: 1em; background-color: #f3f3f3; transform: translateX(1em); transition: 0.2s transform;}nav:hover,nav:focus-within { transform: translateX(100%);}a { white-space: pre; color: black;}p { font-size: 2em; font-family: monospace; text-align: center;}- 应用 first-letter 实现首字母大写
<div class="content-section"> <p>here we target the wrapper and select the p element. then append first-of-type and target first-letter specifically. you can then reuse the same option in other parts of your design by changing the wrapper variable</p></div>.content-section p:first-of-type::first-letter { color: #f3f3f3; float: left; font-size: 4rem; line-height: 4vw; padding-right: 8px; /* border: 0.25em double; */}- 应用 ::before 增加按钮的图标
<div class="card"> <div class="card-body"> <a href="" target="_blank" class="btn btn-docu" rel="noopener">Documentation</a> </div></div>.card .card-body .btn { display: block; width: 200px; height: 48px; line-height: 48px; background-color: blue; border-radius: 4px; text-align: center; color: #fff; font-weight: 700;}.card .card-body .btn-docu:before { content:"\0000a0"; display:inline-flex; height:24px; width:24px; line-height:24px; margin:0px 10px 0px 0px; position:relative; top:0px; left:0px; background:url(https://stackdiary.com/docu.svg) no-repeat left center transparent; background-size:100% 100%;}