dot 动画样式
最佳实现
html代码
html
<div className='dot-a'>...</div>css代码
css
.dot-a {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25ex;
overflow: hidden;
}
.dot-a::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot1 0.3s infinite step-start both;
}
@keyframes dot1 {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}content动画实现
html代码
html
正在加载中<dot-b></dot-b>css代码
css
dot-b::before {
content: '...';
position: absolute;
animation: dot2 3s infinite step-start both;
}
dot-b:after {
content: '...';
color: transparent;
}
@keyframes dot2 {
33% { content: '.'; }
66% { content: '..'; }
}ch尺寸控制
html代码
html
正在加载中<dot-c>...</dot-b>css代码
css
dot-c {
display: inline-block;
width: 3ch;
text-indent: -1ch;
vertical-align: -.25ex;
overflow: hidden;
animation: dot3 3s infinite step-start both;
font-family: Consolas, Monaco, monospace;
}
@keyframes dot3 {
33% { text-indent: 0; }
66% { text-indent: -2ch; }
}box-shadow模拟
html代码
html
正在加载中<dot-d></dot-d>css代码
css
dot-d::before {
content: '';
position: absolute;
width: 2px; height: 2px;
background-color: currentColor;
box-shadow: 4px 0, 8px 0;
animation: dot4 3s infinite step-start both;
margin-top: 1em;
}
dot-d::after {
content: '...';
color: transparent;
}
@keyframes dot4 {
33% { box-shadow: none; }
66% { box-shadow: 4px 0; }
}border和background模拟
html代码
html
正在加载中<dot-e></dot-e>css代码
css
dot-e::before {
content: '';
position: absolute;
width: 10px; height: 2px;
padding: 0 2px;
border-left: 2px solid; border-right: 2px solid;
background-color: currentColor;
background-clip: content-box;
box-sizing: border-box;
animation: dot5 3s infinite step-start both;
margin-top: 1em;
}
dot-e::after {
content: '...';
color: transparent;
}
@keyframes dot5 {
33% { border-right-color: transparent; background-color: transparent; }
66% { border-right-color: transparent; }
}饼图 动画
静态效果
HTML代码：
html
<div class="pie-item">
<p>10%大小</p>
<div class="pie-simple" style="--percent: 10;">
<div class="pie-left"></div>
<div class="pie-right"></div>
</div>
</div>
<div class="pie-item">
<p>40%大小</p>
<div class="pie-simple" style="--percent: 40;">
<div class="pie-left"></div>
<div class="pie-right"></div>
</div>
</div>
<div class="pie-item">
<p>80%大小</p>
<div class="pie-simple" style="--percent: 80;">
<div class="pie-left"></div>
<div class="pie-right"></div>
</div>
</div>
<div class="pie-item">
<p>99%大小</p>
<div class="pie-simple" style="--percent: 99;">
<div class="pie-left"></div>
<div class="pie-right"></div>
</div>
</div>css代码
css
.pie-simple {
width: 128px; height: 128px;
background-color: white;
border-radius: 50%;
overflow: hidden;
}
.pie-left,
.pie-right {
width: 50%; height: 100%;
float: left;
position: relative;
overflow: hidden;
}
.pie-left::before,
.pie-right::before,
.pie-right::after {
content: '';
position: absolute;
width: 100%; height: 100%;
background-color: teal;
}
.pie-left::before {
left: 100%;
transform-origin: left;
transform: rotate(calc(3.6deg * (var(--percent) - 50)));
opacity: calc(99999 * (var(--percent) - 50));
}
.pie-right::before {
right: 100%;
transform-origin: right;
transform: rotate(calc(3.6deg * var(--percent)));
}
.pie-right::after {
opacity: calc(99999 * (var(--percent) - 50));
}动画效果（单循环-左，交替循环-右）
HTML代码（单循环）：
html
<div class="pie-spin">
<div class="pie-spin-left"></div>
<div class="pie-spin-right"></div>
</div>CSS代码（单循环）：
css
.pie-spin {
width: 128px; height: 128px;
background-color: white;
border-radius: 50%;
overflow: hidden;
}
.pie-spin-left,
.pie-spin-right {
width: 50%; height: 100%;
float: left;
position: relative;
overflow: hidden;
}
.pie-spin-left::before,
.pie-spin-right::before,
.pie-spin-left::after,
.pie-spin-right::after {
content: '';
position: absolute;
width: 100%; height: 100%;
background-color: teal;
}
.pie-spin-left {
opacity: 1;
animation: second-half-show 1.6s steps(1, end) infinite;
}
.pie-spin-left::before {
left: 100%;
transform-origin: left;
animation: spin 1.6s .8s infinite linear;
}
.pie-spin-right::before {
right: 100%;
transform-origin: right;
animation: spin 1.6s infinite linear;
}
.pie-spin-right::after {
animation: second-half-show 1.6s steps(1, end) infinite;
opacity: 1;
}
.pie-spin-left::after {
animation: second-half-hide 1.6s steps(1, end) infinite;
opacity: 0;
}
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
@keyframes second-half-hide {
0% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@keyframes second-half-show {
0% { opacity: 0; }
50%, 100% { opacity: 1; }
}HTML代码（交替循环）：
html
<div class="pie-spin2">
<div class="pie-spin2-left"></div>
<div class="pie-spin2-right"></div>
</div>CSS代码（交替循环）：
css
.pie-spin2 {
width: 128px; height: 128px;
background-color: white;
border-radius: 50%;
overflow: hidden;
}
.pie-spin2-left,
.pie-spin2-right {
width: 50%; height: 100%;
float: left;
position: relative;
overflow: hidden;
}
.pie-spin2-left::before,
.pie-spin2-right::before {
content: '';
position: absolute;
width: 100%; height: 100%;
background-color: teal;
}
.pie-spin2-left::before {
left: 100%;
transform-origin: left;
animation: spinWait2 3.2s infinite linear;
}
.pie-spin2-right::before {
right: 100%;
transform-origin: right;
animation: spinWait1 3.2s infinite linear;
}
@keyframes spinWait1 {
0% { transform: rotate(0deg); }
25%, 50% { transform: rotate(180deg); }
75%, 100% { transform: rotate(360deg); }
}
@keyframes spinWait2 {
0%, 25% { transform: rotate(0deg); }
50%, 75% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}视觉错觉与流动动画
色彩的流动
HTML代码：
html
<div class="flow-colorful"></div>CSS代码：
css
.flow-colorful {
max-width: 600px;
height: 150px;
background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
animation: hue 6s linear infinite;
}
@keyframes hue {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}文字动效
HTML代码：
html
<h2 class="flow-slogon">第五届CSS大会</h2>CSS代码：
css
.flow-slogon {
font-size: 120px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia);
animation: hue 6s linear infinite;
}移动的错觉
HTML代码：
html
<div class="flow-twill"></div>CSS代码：
css
.flow-twill {
padding-right: 30%;
height: calc(1.4142 * 20px);
background: repeating-linear-gradient(45deg, teal, teal 10px, transparent 11px, transparent 19px, teal 20px);
background-clip: content-box;
animation: twill 1s linear infinite;
position: relative;
}
.flow-twill::before {
content: '';
position: absolute;
width: 100%; height: 100%;
background: linear-gradient(rgba(0,0,0,.5), hsla(0,0%,100%,.5), rgba(0,0,0,.5));
}
@keyframes twill {
from {
background-position: 0 0;
}
to {
background-position: 0 calc(-1 * 1.4142 * 40px);
}
}视差滚动
HTML代码：
html
<div class="scroll">
<div class="box">
<img src="./mobile_1_iphone.jpg" class="iphone">
<i class="smile"></i>
<i class="flower"></i>
<i class="music"></i>
<i class="pdf"></i>
</div>
</div>CSS代码：
css
.scroll {
height: 600px;
perspective: 1px;
position: relative;
background-color: #fff;
/* for Firefox */
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
overflow: auto;
}
.box {
height: 1280px;
transform-style: preserve-3d;
transform: translateZ(-1px);
position: relative;
}
.iphone {
position: absolute; left: 50%;
transform: translate3d(-50%, -120px, -1px) scale(2);
}
.smile, .flower, .music, .pdf {
/* 见页面源代码... */
}滚动指示器
HTML代码：
html
<!-- 在<body>标签内插入指示器元素 -->
<div class="indicator"></div>CSS代码：
css
body {
position: relative;
}
.indicator {
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
background: linear-gradient(to right top, teal 50%, transparent 50%) no-repeat;
background-size: 100% calc(100% - 100vh);
z-index: 1;
pointer-events: none;
mix-blend-mode: darken;
}
.indicator::after {
content: '';
position: fixed;
top: 5px; bottom: 0; right: 0; left: 0;
background: #fff;
z-index: 1;
}