css实现打击乐器cymbal铙钹摇动动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现打击乐器cymbal铙钹摇动动画效果代码
代码标签: css 打击 乐器 cymbal 铙钹 摇动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { height: 100vh; margin: 0; display: grid; place-items: center; background: #5ec96b; background: linear-gradient(0deg, #6693c9 0%, #e9e9e9 100%); --gold-dark2: rgb(87, 66, 36); --gold-dark: rgb(136, 93, 44); --gold: rgb(194, 160, 80); --gold-light: rgb(248, 203, 83); --gold-light2: rgb(244, 212, 134); --conic-gradient-start: 0deg; } .cymbal { position: absolute; width: 500px; height: 200px; top: calc(50% - 100px); left: calc(50% - 250px); border-radius: 100%; background-color: var(--gold); background: conic-gradient(from 0deg at var(--x) var(--y), var(--gold), var(--gold-light), var(--gold-light2), var(--gold-light), var(--gold), var(--gold-light), var(--gold-dark), var(--gold), var(--gold-light), var(--gold)); box-shadow: 0px 1px 1px 0 var(--gold-light) inset, 0px 1px 1px 0 var(--gold-light); animation: swing 333ms infinite alternate cubic-bezier(0.33, -0.85, 0.33, 1); --x: 50%; --y: 33%; } .cymbal:before { --h: 33%; --w: 33%; content: ""; position: absolute; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0