css实现弹力弹簧圈圈伸缩动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现弹力弹簧圈圈伸缩动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*,
*:after,
*:before {
box-sizing: border-box;
transform-style: preserve-3d;
transition: all 0.2s;
}
@property --x {
syntax: '<length-percentage>';
inherits: false;
initial-value: 0%;
}
@property --sx {
syntax: '<length-percentage>';
inherits: false;
initial-value: 0%;
}
@property --sz {
syntax: '<length>';
inherits: false;
initial-value: 0;
}
@property --z {
syntax: '<length>';
inherits: true;
initial-value: 0;
}
@property --r {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
@property --rs {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
@property --opacity {
syntax: '<number>';
inherits: false;
initial-value: 0;
}
@property --speed {
syntax: '<time>';
inherits: true;
initial-value: 1.75s;
}
:root {
--border-width: 2vmin;
--depth: 26vmin;
--stack-height: 10vmin;
--scene-size: 26vmin;
--ring-size: calc(var(--scene-size) * 0.8);
--plane: radial-gradient(rgba(0,0,0,0.1) 50%, transparent 65%);
--ring-shadow: rgba(0,0,0,0.5);
--hue-one: 210;
--hue-two: 320;
--blur: 6px;
--bg: #fafafa;
--ring-filter: brightness(1) drop-shadow(0 0 0 var(--accent));
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #262626;
--ring-shadow: hsla(var(--hue-one), 90%, 40%, 1);
--plane: radial-gradient(hsla(var(--hue-one), 90%, 60%, 0.1) 50%, transparent 65%);
--ring-filter: brightness(1.75) drop-shadow(0 0 1vmin var(--accent));
}
}
body {
background: var(--bg);
min-height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
}
.scene {
height: var(--scene-size);
width: var(--scene-size);
transform: translate3d(var(--sx), 0, var(--sz));
-webkit-animation: step-down var(--speed) infinite linear;
animation: step-down var(--speed) infinite linear;
}
.scene__shadow {
position: absolute;
top: 0;
left: 100%;
height: 100%;
width: 100%;
opacity: var(--opacity);
-webkit-animation: fade-in var(--speed) infinite linear;
animation: fade-in var(--speed) infinite linear;
background: var(--plane);
transform: scale(1.25);
filter: blur(var(--blur));
}
.plane {
height: 100%;
width: 100%;
transform: translate3d(0, 0, var(--depth));
position: relative;
}
.plane__shadow {
content: '';
height: 100%;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
background: var(--plane);
filter: blur(var(--blur));
transform: translate(-50%, -50%) scale(1.25);
opacity: var(--opacity);
-webkit-animation: fade-out var(--speed) infinite linear;
animation: fade-out var(--speed) infinite linear;
}
.scene__shadow:after,
.plane__shadow:after {
content: '';
height: var(--ring-size);
width: var(--ring-size);
position: a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0