四角高亮边框
<div class="item7">四角闪烁边框</div>
<div class="item9"><span>title</span> 四角高亮边框</div>
<div class="item10">
<p>四角高亮圆角边框</p>
</div>
四角闪烁边框
.item7 {
height: 300px;
width: 400px;
margin: 0 auto;
border: 4px solid #ffff66;
-webkit-animation: twinkling 1s infinite ease-in-out;
line-height: 100px;
text-align: center;
}
@-webkit-keyframes twinkling {
0% {
border-color: #ffff66;
box-shadow: 0 0 10px rgba(0, 255, 0, 0.2),
inset 0 0 10px rgba(0, 255, 0, 0.1), 0 1px 0 #393;
}
100% {
border-color: #6f6;
box-shadow: 0 0 25px rgba(0, 255, 0, 0.6),
inset 0 0 15px rgba(125, 231, 125, 0.4), 0 1px 0 #6f6;
}
}
四角高亮边框
.item9 {
width: 400px;
height: 200px;
margin: 50px auto;
text-align: center;
background: linear-gradient(to left, #2cd5ff, #2cd5ff) left top
no-repeat,
linear-gradient(to bottom, #2cd5ff, #2cd5ff) left top no-repeat,
linear-gradient(to left, #2cd5ff, #2cd5ff) right top no-repeat,
linear-gradient(to bottom, #2cd5ff, #2cd5ff) right top no-repeat,
linear-gradient(to left, #2cd5ff, #2cd5ff) left bottom no-repeat,
linear-gradient(to bottom, #2cd5ff, #2cd5ff) left bottom no-repeat,
linear-gradient(to left, #2cd5ff, #2cd5ff) right bottom no-repeat,
linear-gradient(to left, #2cd5ff, #2cd5ff) right bottom no-repeat;
background-size: 4px 20px, 20px 4px, 4px 20px, 20px 4px;
border: 1px solid #073f97;
position: relative;
padding-top: 100px;
}
.item9 span {
display: inline-block;
width: 35%;
background: #05286c;
font-size: 14px;
position: absolute;
top: 0;
left: 32%;
padding: 4px 0px;
color: #19e8fe;
border-radius: 0 0 10px 10px;
}
四角高亮圆角边框
.item10 {
position: relative;
margin: 50px auto;
width: 400px;
height: 300px;
background: rgba(1, 19, 67, 0.8);
border: 2px solid #00a1ff;
border-radius: 8px;
}
.item10::before {
position: absolute;
top: -2px;
bottom: -2px;
left: 30px;
width: calc(100% - 60px);
content: "";
border-top: 2px solid #016886;
border-bottom: 2px solid #016886;
z-index: 0;
}
.item10::after {
position: absolute;
top: 30px;
right: -2px;
left: -2px;
height: calc(100% - 60px);
content: "";
border-right: 2px solid #016886;
border-left: 2px solid #016886;
z-index: 0;
}
.item10 p {
line-height: 100px;
text-align: center;
color: #00a1ff;
}
加载动画合集
…加载
<div class="dott">
加载中
<div class="dot">...</div>
</div>
<style>
@supports (display: none) {
div.dot {
display: inline-block;
width: 3ch;
text-indent: -1ch;
vertical-align: bottom;
overflow: hidden;
animation: dot 3s infinite step-start both;
font-family: Consolas, Monaco, monospace;
}
}
@keyframes dot {
33% {
text-indent: 0;
}
66% {
text-indent: -2ch;
}
}
</style>
条形加载
<ul class="strip-loading">
<li style="--line-index: 1;"></li>
<li style="--line-index: 2;"></li>
<li style="--line-index: 3;"></li>
<li style="--line-index: 4;"></li>
<li style="--line-index: 5;"></li>
<li style="--line-index: 6;"></li>
</ul>
<style>
.strip-loading {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
}
.strip-loading li {
--time: calc((var(--line-index) - 1) * 200ms);
border-radius: 3px;
width: 6px;
height: 30px;
background-color: #33cc99;
animation: beat 1.5s ease-in-out var(--time) infinite;
list-style-type: none;
}
li + li {
margin-left: 5px;
}
@keyframes beat {
0%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.5);
}
}
</style>
圆环加载
<div class="rotate-animate"></div>
<style>
.rotate-animate {
border: 12px solid #e8e8e8;
border-radius: 50%;
border-top: 12px solid #28d8cf;
width: 100px;
height: 100px;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
圆圈扩散加载
<div class="loader">
<div></div>
</div>
<style>
@supports (display: none) {
.loader {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 8px;
}
.loader div {
width: 60px;
height: 60px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: #66cdaa;
border-radius: 50%;
}
.loader div:before,
.loader div:after {
content: "";
width: 60px;
height: 60px;
position: absolute;
border-radius: 50%;
}
.loader div:before {
background-color: #e8e8e8;
animation: scale-1 2400ms linear infinite;
}
.loader div:after {
background-color: #66cdaa;
animation: scale-2 2400ms linear infinite;
}
}
@keyframes scale-1 {
0% {
transform: scale(0);
z-index: 2;
}
50%,
100% {
transform: scale(1);
}
}
@keyframes scale-2 {
0%,
50% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
</style>
悬浮球进度加载
<div id="ball" class="state-ball" style="--offset: 0;">
<div class="wave"></div>
<div class="progress"></div>
</div>
<style>
.state-ball {
overflow: hidden;
position: relative;
padding: 5px;
border: 3px solid #3c9;
border-radius: 100%;
width: 150px;
height: 150px;
background-color: #fff;
}
.state-ball::before,
.state-ball::after {
position: absolute;
left: 50%;
bottom: 5px;
z-index: 9;
margin-left: -100px;
width: 200px;
height: 200px;
content: "";
}
.state-ball::before {
margin-bottom: calc(var(--offset) * 1.5px);
border-radius: 45%;
background-color: #ffffff80;
animation: rotate 10s linear -5s infinite;
}
.state-ball::after {
margin-bottom: calc(var(--offset) * 1.5px + 10px);
border-radius: 40%;
background-color: #fffc;
animation: rotate 15s infinite;
}
.state-ball .wave {
position: relative;
border-radius: 100%;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, #af8 13%, #3c9 91%);
}
.state-ball .progress::after {
display: flex;
position: absolute;
left: 0;
top: 0;
z-index: 99;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-weight: bold;
font-size: 16px;
color: #09f;
content: counter(progress) "%";
counter-reset: progress var(--offset);
}
@keyframes rotate {
to {
transform: rotate(1turn);
}
}
</style>
多行文本展开收起
<div class="content">
<input type="checkbox" id="exp" />
<div class="text">
<label class="btn" for="exp"></label>
<span>
但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头
长腿，通体黑毛，奔到近处，群雄眼前一亮，金光闪闪，却见每匹马的蹄铁竟然
是黄金打就。来者一共是一十九骑，人数虽不甚多，气势之壮，却似有如千军万
马一般，前面一十八骑奔到近处，拉马向两旁一分，最后一骑从中驰出</span>
</div>
</div>
<style>
.content {
display: flex;
}
.text {
width: 475px;
color: #333;
font-size: 14px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.text::before {
content: "";
float: right;
height: 100%;
margin-bottom: -20px;
}
.btn {
float: right;
clear: both;
margin-right: 8px;
color: dodgerblue;
cursor: pointer;
}
.btn::after {
content: "展开";
}
#exp:checked + .text .btn::after {
content: "收起";
}
#exp {
visibility: hidden;
}
#exp:checked + .text {
-webkit-line-clamp: 999;
}
</style>
毛玻璃效果
<main>
<blockquote>
"少年贪玩，青年迷恋爱情，壮年汲汲于成名成家，暮年自安于自欺欺人。人寿几何，顽铁能炼成的精金，能有多少？但不同程度的锻炼，必有不同程度的成绩；不同程度的纵欲放肆，必积下不同程度的顽劣。
<br />
<br />
"上苍不会让所有幸福集中到某个人身上，得到爱情未必拥有金钱；拥有金钱未必得到快乐；得到快乐未必拥有健康；拥有健康未必一切都会如愿以偿。保持知足常乐的心态才是淬炼心智、净化心灵的最佳途径。一切快乐的享受都属于精神，这种快乐把忍受变为享受，是精神对于物质的胜利，这便是人生哲学。"
<footer>
——
<cite>杨绛</cite>
</footer>
</blockquote>
</main>
<style>
body,
main::before {
background: url("http://www.17sucai.com/preview/242158/2015-01-10/%E7%99%BB%E5%BD%95/images/cloud.jpg")
0 / cover fixed;
}
main {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 800px;
height: 500px;
line-height: 2;
margin: auto;
border-radius: 5px;
background: rgba(255, 255, 255, 0.3);
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
main::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
filter: blur(20px);
z-index: -1;
margin: -30px;
}
</style>
391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
