单个div+css实现背景旋转文字缩放动画效果代码
代码语言:html
所属分类:动画
代码描述:单个div+css实现背景旋转文字缩放动画效果代码
代码标签: 单个 div css 背景 旋转 文字 缩放 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @font-face { font-family: "POP"; font-weight: bold; src: url("https://assets.codepen.io/1480814/MiriamLibre-Bold.ttf") } .pop { display: grid; position: fixed; inset: -200vmax; place-content: center; background: repeating-conic-gradient(at 50% 50%,#006f8d 0 18deg,#0000 0 36deg); animation: a 1.6s infinite linear; } .pop::before, .pop::after { content: attr(class); grid-area: 1/1; font-size: 200px; font-family: "POP", monospace; font-weight: bold; text-transform: uppercase; color: #0000; background: radial-gradient(#fba41a 42%,#fef210 44%) 0 0/12px 12px; -webkit-background-clip: text; background-clip: text; transform: rotate(0deg) skewY(-8deg); animation: b 1.6s infinite linear; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0