无div纯css实现铅笔画圆动画效果代码
代码语言:html
所属分类:动画
代码描述:无div纯css实现铅笔画圆动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { box-sizing: border-box; --black : black; --white : white; --pink : #eca3a2 ; --gray : #c7d5e1 ; --d-yellow : #f7c457 ; --m-yellow : #fbcb66 ; --yellow : #fbd878 ; --cream : #f9eee1 ; } html *, html * ::before, html * ::after{ box-sizing: inherit ; } body{ margin: 0 ; height: 100vh ; display: flex ; font-size: 1.3vw ; overflow: hidden ; position: relative ; align-items: center ; justify-content: center ; background-color: var(--white) ; animation: draw 7s infinite linear ; } @keyframes draw { 100%{ transform: rotate(360deg) ; } } body::before{ content: "" ; position: absolute ; width: 27em ; height: 27em ; border-radius: 50% ; border: .5em solid ; border-color: var(--black) var(--black) transparent transparent ; transform: rotate(45.5deg) ; } body::after{ content: "" ; width: 5.2em ; height: 28.7em ; position: absolute ; left: calc(50% - 2.7em) ; border-radius: 1em 1em 0 0 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0