纯css实现立春花朵盛开动画效果代码
代码语言：html
所属分类：动画
代码描述：纯css实现立春花朵盛开动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@charset "UTF-8";
html {
--zoom: 120;
--animation-speed: 100;
--animation-delay: 500ms;
--leaf-duration: 1s;
--leafs-start-from: 100deg;
--leaf-1-delay: 500ms;
--leaf-2-delay: 580ms;
--leaf-3-delay: 600ms;
--leaf-timing-func: cubic-bezier(0.18, 0.89, 0.32, 1.28);
--petal-duration: 1s;
--petals-start-from: 50deg;
--petal-1-delay: 0ms;
--petal-2-delay: 100ms;
--petal-3-delay: 200ms;
--petal-timing-func: cubic-bezier(0.68, -0.55, 0.27, 1.55);
--color-leaf: hsl(175, 30%, 31%);
--color-leaf-root: hsl(113, 21%, 51%);
--scene-drop-shadow: drop-shadow(11em 17em 27em rgba(0, 0, 0, 0.37));
--petals-offset: 36em;
--petals-large-radius: 204em;
--petals-mid-radius: 136em;
--petals-small-radius: 82em;
filter: var(--scene-drop-shadow);
}
:root {
--unit: 1vmin;
--available-screen-min: 665;
--px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
}
html,
body,
head {
height: 100%;
position: relative;
padding: 0;
margin: 0;
font-size: calc(1 * var(--px));
background-color: transparent;
}
head {
width: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
}
head::before,
head::after,
body::before,
body::after,
html::before,
html::after {
content: "";
position: absolute;
background-repeat: no-repeat;
filter: blur(0);
}
head::before,
head::after,
html::before {
transform-origin: right top;
background-size: 100% 100%;
background-color: var(--color-leaf);
box-shadow: inset 0 0 12em 10em var(--color-leaf);
}
head::before {
left: calc(50% - 65em);
top: calc(50% + 109em);
transform: translate(-50%, -50%) scale(0) rotate(var(--leafs-start-from)) rotate(80deg) skewX(6deg) skewY(-30deg);
width: 83em;
height: 128em;
border-radius: 50% 9% 32% 4%;
background-image: linear-gradient(2deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(2deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(2deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(92deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(92deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(92deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(130deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%);
background-position: -56em 30em, -34em 3em, -14em -22em, -16em 96em, 6em 68em, 27em 43em, 0 15em;
}
head::after {
left: calc(50% - 94em);
top: calc(50% + 98em);
transform: translate(-50%, -50%) scale(0) rotate(var(--leafs-start-from)) rotate(-44deg) skewY(-30deg);
width: 83em;
height: 96em;
border-radius: 25% 9% 32% 4%;
background-image: linear-gradient(-93deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-93deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-93deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-1deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-1deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-1deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(130deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%);
background-position: -12em 64em, 7em 41em, 28em 16em, -56em 16em, -36em -8em, -15em -32em, 0 0;
}
html::before {
left: calc(50% - 120em);
top: calc(50% + 123em);
transform: translate(-50%, -50%) scale(0) rotate(var(--leafs-start-from)) skewX(-15deg) skewY(-18deg);
width: 113em;
height: 121em;
border-radius: 24% 9% 27% 7%;
background-image: linear-gradient(-90deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-90deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-90deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(2deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(1deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(0deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(133deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%);
background-position: -19em 79em, 9em 50.4em, 35em 21.4em, -21em -41.6em, -49em -11em, -74em 18em, 0 0;
}
body::before,
body::after,
html::after {
transform: translate(-50%, -50%) rotate(var(--petals-start-from)) scale(0);
left: calc(50% + var(--petals-offset));
top: calc(50% - var(--petals-offset));
}
body::before {
padding: var(--petals-large-radius);
--pointer-size: 73em;
--pointer-ratio: 46%;
--hand-size: 104em;
--hand-ratio: 39.3%;
--fill-size: 220em;
--shine-size: 325em;
--shine-color: rgba(255, 255, 255, 0.29);
--fill: linear-gradient(#ffcc3b 0 0) no-repeat scroll 50% 50% /
var(--fill-size) var(--fill-size);
--shine: radial-gradient(
circle at center,
var(--shine-color) 50%,
transparent 72%
)
no-repeat 50% 50% / var(--shine-size) var(--shine-size);
filter: drop-shadow(-25em 10em 7em rgba(254, 136, 10, 0.1));
background: var(--shine), var(--fill), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(0.7853981634rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.7071067812) calc(50% + var(--hand-ratio) * 0.7071067812)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(1.308996939rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.2588190451) calc(50% + var(--hand-ratio) * 0.9659258263)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(1.8325957146rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.2588190451) calc(50% + var(--hand-ratio) * 0.9659258263)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(2.3561944902rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.7071067812) calc(50% + var(--hand-ratio) * 0.7071067812)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(2.8797932658rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.9659258263) calc(50% + var(--hand-ratio) * 0.2588190451)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(3.4033920414rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.9659258263) calc(50% + var(--hand-ratio) * -0.2588190451)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(3.926990817rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.7071067812) calc(50% + var(--hand-ratio) * -0.7071067812)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(4.4505895926rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.2588190451) calc(50% + var(--hand-ratio) * -0.9659258263)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(4.9741883682rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.2588190451) calc(50% + var(--hand-ratio) * -0.9659258263)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(5.4977871438rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.7071067812) calc(50% + var(--hand-ratio) * -0.7071067812)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(6.0213859194rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.9659258263) calc(50% + var(--hand-ratio) * -0.2588190451)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(6.544984695rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.9659258263) calc(50% + var(--hand-ratio) * 0.2588190451)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(0.7853981634rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.7071067812) calc(50% + var(--pointer-ratio) * 0.7071067812)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(1.308996939rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.2588190451) calc(50% + var(--pointer-ratio) * 0.9659258263)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(1.8325957146rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.2588190451) calc(50% + var(--pointer-ratio) * 0.9659258263)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(2.3561944902rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.7071067812) calc(50% + var(--pointer-ratio) * 0.7071067812)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(2.8797932658rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.9659258263) calc(50% + var(--pointer-ratio) * 0.2588190451)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(3.4033920414rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.9659258263) calc(50% + var(--pointer-ratio) * -0.2588190451)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(3.926990817rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.7071067812) calc(50% + var(--pointer-ratio) * -0.7071067812)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(4.4505895926rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.2588190451) calc(50% + var(--pointer-ratio) * -0.9659258263)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(4.9741883682rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.2588190451) calc(50% + var(--pointer-ratio) * -0.9659258263)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(5.4977871438rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.7071067812) calc(50% + var(--pointer-ratio) * -0.7071067812)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(6.0213859194rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.9659258263) calc(50% + var(--pointer-ratio) * -0.2588190451)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(6.544984695rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.9659258263) calc(50% + var(--pointer-ratio) * 0.2588190451)/var(--pointer-size) var(--pointer-size);
}
body::after {
padding: var(--petals-mid-radius);
--pointer-size: 56em;
--pointer-ratio: 49%;
--hand-size: 77em;
--hand-ratio: 40.3%;
--fill-size: 107em;
--fill: linear-gradient(#ff8f2c 0 0) no-repeat 50% 50% /
var(--fill-size) var(--fill-size);
background: var(--fill), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(0.5235987756rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.8660254038) calc(50% + var(--pointer-ratio) * 0.5)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(1.0471975512rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.5) calc(50% + var(--pointer-ratio) * 0.8660254038)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(1.5707963268rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0) calc(50% + var(--pointer-ratio) * 1)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(2.0943951024rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.5) calc(50% + var(--pointer-ratio) * 0.8660254038)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(2.617993878rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.8660254038) calc(50% + var(--pointer-ratio) * 0.5)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(3.1415926536rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -1) calc(50% + var(--pointer-ratio) * 0)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(45deg) rotate(3.6651914292rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.8660254038) calc(50% + var(--pointer-ratio) * -0.5)/var(--pointer-size) var(--pointer-size), url("data:image/svg+xml,%3Csvg view.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0