纯css实现闸门关闭开放动画效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现闸门关闭开放动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div, span { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; } div { transform: rotate(calc(var(--i) * 60deg)); } span { background: radial-gradient(circle, hsl(143, 100%, 56%), hsl(203, 100%, 56%)); --clip-path: polygon(50% 49.9%, 79.5% 100%, 20.5% 100%); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); transform-origin: 20% 80%; animation: open 6000ms infinite alternate ease-in-out; } @keyframes open { 100% { transform: rotate(90deg); } } @keyframes gear { 100% { transform: rotate(-60deg); } } main { position: relative; margin: auto; width: 80vmin; height: 80vmin; overflow: hidden; border: 5vmin double hsl(253, 100%, 20%); border-radius: 50%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0