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