svg+css实现爱心旋转舞台动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现爱心旋转舞台动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .display{ --width: 20rem; --color: hsl(333 66% 75%); --skew: 1rem; --animation-duration: 10s; aspect-ratio: 1/.5; width: var(--width); border-top-left-radius: 50% var(--skew); border-top-right-radius: 50% var(--skew); background: radial-gradient( 100% 100%, var(--color) calc(50% - 1px), #0000 calc(50% + 1px) ) top center / 100% calc(var(--skew) * 2) no-repeat, linear-gradient( 90deg, color-mix(in oklch, var(--color), hsl(0 0% 100% / .75)), #0000 40% 60%, color-mix(in oklch, var(--color), hsl(0 0% 0% / .5)) ), radial-gradient( 100% 100%, color-mix(in oklch, var(--color), hsl(0 0% 20%)) calc(50% - 1px), #0000 calc(50% + 1px) ) top center / 100% calc(var(--skew) * 2 + 7.5%) no-repeat, repeating-linear-gradient(90deg, #0000 0 1.25%, hsl(0 0% 0% / .125) 1.25% 2.5% ) center left / 200% 100%, var(--color); box-shadow: calc(var(--width) * .125) calc(var(--width) * .125) calc(var(--width) * .25) color-mix(in oklch, var(--color), hsl(0 0%.........完整代码请登录后点击上方下载按钮下载查看
网友评论0