css实现文字线条聚光走光动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现文字线条聚光走光动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400" rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400italic" rel='stylesheet' type='text/css'> <style> body { background-color:#00187D; padding:0; maring:0; } #container { width:900px; height:auto; margin:0 auto; background-color:transparent; border:none; } .wort { width:500px; height:100px; margin:30px auto; border:none; box-sizing:border-box; padding:10px 10px 10px 15px; background-color:transparent; } .wort p { margin:0 auto; line-height:100px; float:left; font-family: 'Josefin Sans', sans-serif; font-style:normal; font-size:70px; font-weight:100; text-transform:uppercase; letter-spacing:10px; text-align:center; } #wort_1 { padding-left:185px; } #wort_2 p { font-size:80px; } #wort_3 { padding-left:100px; } #wort_4 { padding-left:70px; } #wort_5 { padding-left:280px; } #wort_5 p { font-size:50px; } #wort_6 { padding-left:20px; } #wort_7 { padding-left:170px; } #wort_8 { padding-left:60px; } #wort_9 { padding-left:260px; } #wort_10 { padding-left:90px; } #wort_11 { padding-left:200px; } #wort_11 p{ font-size:50px;} #wort_2 span { background: -webkit-linear-gradient(top, #bfcaff 6%,#00187d 30%,#00187d 70%,#bfcaff 97%); -webkit-background-clip: text; -webkit-animation: wort_2 14s infinite; -webkit-animation-timing-function: ease_out; -webkit-text-fill-color: transparent; background-clip: text; animation: wort_2 14s infinite; animation-timing-function: ease_out; } @keyframes wort_2 { 0% { background-position:0% 0%; } 50% { background-position: 0% 180px ; } 100% { background-position:0% 0%; } } @-webkit-keyframes wort_2 { 0% { background-position:0% 0%; } 50% { background-position: 0% 180px ; } 100% { background-position:0% 0%; } } #wort_6 span { background: -webkit-linear-gradient(top, #bfcaff 6%,#00187d 30%,#00187d 70%,#bfcaff 97%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: wort_6 14s infinite; -webkit-animation-timing-function: ease_in; background-clip: text; animation: wort_6 14s infinite; animation-timing-function: ease_in; } @keyframes wort_6 { 0% { background-position:0% 0%; } 50% { background-position:0% 180px ; } 100% { background-position:0% 0%; } } @-webkit-keyframes wort_6 { 0% { background-position:0% 0%; } 50% { background-position:0% 180px ; } 100% { background-position:0% 0%; } } .letter1 { background: -webkit-linear-gradient(top, #bfcaff 0%,#00187d 73%,#00187d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .letter2 { background: -webkit-linear-gradient(left, #bfcaff 0%,#00187d 73%,#00187d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .letter3 { background: -webkit-linear-gradient(right, #bfcaff 0%,#00187d 73%,#00187d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .letter4 { background: -webkit-linear-gradient(bottom, #bfcaff 0%,#00187d 73%,#00187d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } </style> </head> <body > <div id="container"> <div class="wort" id="wort_1"> <p class="letter4" id="letter_1">m</p> &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0