css实现文字多色彩渐变倾斜效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现文字多色彩渐变倾斜效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box } :root { --color-1: #186cb8; --color-2: #2a9a9f; --color-3: #f1b211; --color-4: #e83611; --color-5: #f9002f; } .wrapper { background: #000; line-height: 1; min-height: 100%; display: grid; place-items: center; min-height: calc(100vh - 16px); } h1 { font-family: "Exo", sans-serif; font-size: 15vw; font-weight: 900; width: -webkit-min-content; width: -moz-min-content; width: min-content; margin: auto; text-transform: uppercase; background: linear-gradient(219deg, var(--color-1) 19%, transparent 19%,transparent 20%, var(--color-2) 20%, var(--color-2) 39%, transparent 39%,transparent 40%, var(--color-3) 40%,var(--color-3) 59% , transparent 59%,transparent 60%, var(--color-4) 60%, var(--color-4) 79%, transparent 79%, transparent 80%, var(--color-5) 80%); background-clip: text; -webkit-backg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0