- 打字成果
阐明:
通过 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%;
}