纯css实现铅笔划线loading加载效果
代码语言:html
所属分类:加载滚动
代码描述:纯css实现铅笔划线loading加载效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: #010001; color: white; font-size: 1.5rem; } .pencil { position: relative; width: 300px; height: 40px; transform-origin: center; transform: rotate(135deg); animation: pencil-animation 10s infinite; } @keyframes pencil-animation { 0% { transform: rotate(135deg); } 20% { transform: rotate(315deg); } 45% { transform: translateX(300px) rotate(315deg); } 55% { transform: translateX(300px) rotate(495deg); } 100% { transform: rotate(495deg); } } .pencil__ball-point { position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #09d56e; height: 10px; width: 10px; border-radius: 50px; } .pencil__cap { position: absolute; left: 0px; top: 50%; transform: translateY(-50%); clip-path: polygon(20% 40%, 100% 0%, 100% 100%, 20% 60%); background: #232123; width: 12%; height: 100%; } .pencil__cap-base { position: absolute; left: 12%; top: 0; height: 100%; width: 20px; background: #232123; } .pencil__middle { position:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0