div+css实现炫酷翻滚圈圈loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现炫酷翻滚圈圈loading加载动画效果代码
代码标签: div css 炫酷 翻滚 圈圈 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),90%,95%);
--fg: hsl(var(--hue),90%,5%);
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
background-color: var(--bg);
color: var(--fg);
font: 1em/1.5 sans-serif;
height: 100vh;
display: grid;
place-items: center;
transition: background-color 0.3s;
}
main {
padding: 1.5em 0;
}
.sp {
display: block;
width: 8em;
height: 8em;
}
.sp__ring {
stroke: hsla(var(--hue),90%,5%,0.1);
transition: stroke 0.3s;
}
.sp__worm1,
.sp__worm2,
.sp__worm2-1 {
animation: worm1 5s ease-in infinite;
}
.sp__worm1 {
transform-origin: 64px 64px;
}
.sp__worm2,
.sp__worm2-1 {
transform-origin: 22px 22px;
}
.sp__worm2 {
animation-name: worm2;
animation-timing-function: linear;
}
.sp__worm2-1 {
animation-name: worm2-1;
stroke-dashoffset: 175.92;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),90%,5%);
--fg: hsl(var(--hue),90%,95%);
}
.sp__ring {
stroke: hsla(var(--hue),90%,95%,0.1);
}
}
/* Animations */
@keyframes worm1 {
from,
to {
stroke-dashoffset: 0
}
12.5% {
animation-timing-function: ease-out;
stroke-dashoffset: -175.91;
}
25% {
animation-timing-function: cubic-bezier(0,0,0.43,1);
stroke-dashoffset: -307.88;
}
50% {
animation-timing-function: ease-in;
stroke-dashoffset: -483.8;
}
62.5% {
animation-timing-function: ease-out;
stroke-dashoffset: -307.88;
}
75% {
animation-timing-function: cubic-bezier(0,0,0.43,1);
stroke-dashoffset: -175.91;
}
}
@keyframes worm2 {
from,
12.5%,
75%,
to {
transform: rotate(0) translate(-42px,0);
}
25%,
62.5% {
t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0