svg文字动画特效
代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Orange & Blue</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: grid;
place-items: center;
background: #fff5c7 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHUlEQVQYV2NkwAIY8Qr+Pxr0n9F6HVgRfpXIxgAAz/gEBriW/JMAAAAASUVORK5CYII=') repeat;
font-family: 'Montserrat', sans-serif;
padding: 2em;
position: relative;
}
svg {
width: 100%;
height: 100%;
}
.byline {
position: absolute;
left: 50%;
top: 48%;
transform: translate(-50%, -48%);
}
.byline h1 {
font-weight: 800;
color: #FF6600;
font-size: 2.5rem;
opacity: 0;
transform: translateX(-50px);
animation: subtext .7s ease-out forwards;
}
#orangeO, #orangeR, #orangeA,
#orangeN, #orangeG, #orangeE {
clip-path: circle(0% at 80% 1%);
animation: circleGrow 1s ease-out forwards;
}
#orangeWord, #blueWord {
fill: #fff5c7;
}
#blueB, #blueL, #blueU, #blueE {
clip-path: circle(0% at 1% 1%);
animation: circleGrow .7s ease-out forwards;
}
#orangeO {
animation-delay: 0s;
}
#orangeR {
animation-delay: 0.3s;
}
#orangeA {
animation-delay: 0.6s;
}
#orangeN {
animation-delay: 1s;
}
#orangeG {
animation-delay: 1.3s;
}
#orangeE {
animation-delay: 1.6s;
}
.byline h1 {
animation-delay: 2.3s;
}
#blueB {
animation-delay: 3s;
}
#blueL {
animation-delay: 3.3s;
}
#blueU {
animation-delay: 3.6s;
}
#blueE {
animation-delay: 4s;
}
@keyframes circleGrow {
100% {
clip-path: circle(100%)
}
}
@keyframes subtext {
100% {
opacity: 1;
transform: translateX(0);
}
}
@media only screen and (max-width: 600px) {
.byline h1 {
font-size: 1.5rem;
}
}
</style>
</head>
<body translate="no">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.554 184.484">
<defs>
<clipPath id="shadowMask">
<circle id="circ" cx="0" cy="0" r="40" fill="#FFF" stroke="none" />
</clipPath>
<clipPath id="shadowMask2">
<circle id="circ2" cx="100" cy="-100" r="40" fill="#FFF" stroke="none" />
</clipPath>
</defs>
<g>
<path id="blueB" style="line-height:1.25" d="M25.321 102.51v23.707h.004v.004h.007v.007h.01v.01h.013v.013h.016v.015h.019v.02h.022v.02h.024v.025h.027v.028h.03v.03h.034v.033h.036v.036h.039v.039h.041v.042h.045v.045h.048v.047h.05v.05h.054v.054h.055v.056h.06v.06h.062v.06h.064v.066h.068v.068h.07v.07h.074v.074h.077v.076h.079v.08h.082v.082h.085v.084h.088v.088h.09v.091h.094v.094h.097v.096h.099v.1h.102v.102h.106v.105h.108v.108h.11v.111h.114v.114h.117v.117h.12v.12h.122v.122h.126v.125h.128v.128h.131v.131h.134v.135h.137v.136h.14v.14h.142v.143h.146v.145h.148v.149h.152v.151h.154v.154h.157v.157h.16v.16H30v.163h.166v.166h.168v.168h.172v.172h.174v.174h.177v.177h.18v.18h.184v.183h.186v.186h.188v.189h.192v.192h.194v.194h.198v.197h.2v.2h.203v.204h.206v.206h.21v.208h.21v.212h.216v.215h.217v.218h.22v.22h.224v.223h.226v.227h.23v.229h.231v.232h.235v.235h.238v.237h.24v.24h.244v.245h.246v.246h.25v.25h.252v.251h.254v.255h.258v.258h.261v.26h.264v.264h.266v.267h.27v.27h.272v.272h.275v.275h.279v.278h.28v.28h.284v.285h.287v.286h.29v.29h.292v.293h.296v.295h.298v.298h.3v.301h.305v.304h.306v.307h.31v.31h.313v.313h.316v.315h.318v.318h.321v.322h.325v.324h.327v.327h.33v.33h.332v.333h.336v.335h.339v.34h.341v.34h.344v.345h.348v.347h.35v.35h.353v.353h.355v.356h.359v.359h.362v.361h.365v.365h.367v.367h.37v.37h.373v.374h.376v.376h.38v.379h.381v.382h.384v.384h.388v.388h.39v.39h.394v.394h.396v.396h.4v.399h.401v.402h.405v.405h.408v.407h.41v.411h.414v.414h.416v.416h.42v.42h.422v.421h.425v.425h.428v.428h.43v.431h.434v.434h.437v.436h.44v.44h.441v.442h.446v.445h.448v.448h.45v.451h.455v.454h.456v.457h.46v.46h.462v.462h.466v.465h.468v.468h.47v.472h.475v.474h.477v.477h.48v.48h.483v.482h.485v.486h.489v.488h.49v.491h.495v.494h.497v.498h.5v.5h.503v.503h.506v.505h.508v.508h.512v.512h.514v.514H72v.518h.52v.52h.523v.523h.526v.526h.529v.529h.532v.531h.534v.535h.537v.537h.541v.54h.543v.543h.546v.547h.55v.548h.551v.552h.555v.555h.557v.558h.56v.56h.564v.563h.566v.567h.57v.569h.571v.572h.575v.574h12.801c3.161 0 5.577-.563 7.248-1.692 1.67-1.13 2.506-2.732 2.506-4.809 0-1.423-.383-2.63-1.15-3.624h-.001a6.05 6.05 0 00-.837-.895 6.052 6.052 0 00-.573-.573 6.053 6.053 0 00-.569-.57 6.051 6.051 0 00-.567-.566l-.003-.004a5.522 5.522 0 001.702-1.728c.564-.903.847-1.919.847-3.047 0-1.666-.61-3.027-1.83-4.083-.173-.2-.363-.391-.572-.573a5.724 5.724 0 00-.57-.57 5.726 5.726 0 00-.568-.568 5.724 5.724 0 00-.565-.566 5.725 5.725 0 00-.563-.563 5.73 5.73 0 00-.56-.56 5.726 5.726 0 00-.556-.556 5.726 5.726 0 00-.553-.553 5.74 5.74 0 00-.549-.55 5.724 5.724 0 00-.549-.548 5.737 5.737 0 00-.546-.547 5.731 5.731 0 00-.537-.537 5.726 5.726 0 00-.538-.538 5.725 5.725 0 00-.538-.538 5.727 5.727 0 00-.532-.533 5.726 5.726 0 00-.53-.53 5.726 5.726 0 00-.527-.527 5.727 5.727 0 00-.522-.522 5.725 5.725 0 00-.523-.523 5.725 5.725 0 00-.52-.52 5.728 5.728 0 00-.513-.514 5.727 5.727 0 00-.513-.513 5.724 5.724 0 00-.509-.509 5.727 5.727 0 00-.505-.504 5.729 5.729 0 00-.505-.506 5.731 5.731 0 00-.501-.502 5.728 5.728 0 00-.497-.496 5.724 5.724 0 00-.495-.495 5.725 5.725 0 00-.491-.492 5.722 5.722 0 00-.49-.49 5.728 5.728 0 00-.488-.488 5.727 5.727 0 00-.485-.486 5.725 5.725 0 00-.48-.479 5.724 5.724 0 00-.477-.478 5.731 5.731 0 00-.473-.473 5.726 5.726 0 00-.475-.474 5.723 5.723 0 00-.468-.47 5.722 5.722 0 00-.465-.464 5.72 5.72 0 00-.463-.463 5.724 5.724 0 00-.463-.463 5.729 5.729 0 00-.459-.46 5.722 5.722 0 00-.455-.454 5.73 5.73 0 00-.45-.45 5.727 5.727 0 00-.447-.448 5.726 5.726 0 00-.447-.448 5.725 5.725 0 00-.442-.441 5.72 5.72 0 00-.44-.441 5.725 5.725 0 00-.438-.438 5.722 5.722 0 00-.435-.435 5.722 5.722 0 00-.431-.432 5.724 5.724 0 00-.43-.428 5.723 5.723 0 00-.425-.426 5.722 5.722 0 00-.423-.424 5.726 5.726 0 00-.422-.422 5.724 5.724 0 00-.416-.416 5.72 5.72 0 00-.414-.414 5.723 5.723 0 00-.413-.413 5.722 5.722 0 00-.407-.407 5.721 5.721 0 00-.408-.408 5.721 5.721 0 00-.402-.403 5.726 5.726 0 00-.401-.4 5.729 5.729 0 00-.396-.397 5.725 5.725 0 00-.395-.395 5.72 5.72 0 00-.39-.39 5.723 5.723 0 00-.388-.388c-.12-.133-.25-.261-.386-.386a5.723 5.723 0 00-.382-.383 5.727 5.727 0 00-.382-.382 5.72 5.72 0 00-.376-.376 5.721 5.721 0 00-.373-.373 5.722 5.722 0 00-.371-.372 5.722 5.722 0 00-.369-.368 5.718 5.718 0 00-.366-.367 5.723 5.723 0 00-.362-.361 5.723 5.723 0 00-.36-.36 5.717 5.717 0 00-.356-.357 5.718 5.718 0 00-.354-.354 5.722 5.722 0 00-.35-.351 5.727 5.727 0 00-.35-.349 5.744 5.744 0 00-.347-.347 5.728 5.728 0 00-.341-.342 5.725 5.725 0 00-.339-.339 5.717 5.717 0 00-.335-.335 5.724 5.724 0 00-.333-.333 5.723 5.723 0 00-.34-.34 5.727 5.727 0 00-.33-.33c-.1-.11-.208-.216-.32-.32a5.729 5.729 0 00-.328-.328c-.1-.11-.208-.215-.32-.32a5.74 5.74 0 00-.315-.316 5.726 5.726 0 00-.313-.312 5.714 5.714 0 00-.312-.312 5.729 5.729 0 00-.315-.316 5.74 5.74 0 00-.298-.298 5.721 5.721 0 00-.31-.309 5.724 5.724 0 00-.298-.298 5.711 5.711 0 00-.296-.297c-.092-.1-.19-.197-.293-.293a5.715 5.715 0 00-.296-.296 5.722 5.722 0 00-.282-.283c-.092-.1-.19-.196-.291-.29a5.733 5.733 0 00-.281-.281 5.695 5.695 0 00-.278-.279 5.723 5.723 0 00-.278-.277 5.731 5.731 0 00-.274-.275 5.699 5.699 0 00-.272-.271 5.724 5.724 0 00-.268-.269 5.75 5.75 0 00-.265-.265 5.724 5.724 0 00-.263-.263 5.698 5.698 0 00-.26-.26 5.712 5.712 0 00-.257-.257 5.745 5.745 0 00-.254-.255 5.714 5.714 0 00-.256-.255 5.69 5.69 0 00-.242-.242 5.732 5.732 0 00-.252-.252 5.71 5.71 0 00-.236-.237 5.678 5.678 0 00-.242-.241 5.743 5.743 0 00-.24-.24 5.706 5.706 0 00-.235-.235 5.71 5.71 0 00-.228-.229 5.728 5.728 0 00-.232-.23 5.74 5.74 0 00-.221-.223 5.724 5.724 0 00-.222-.223 5.678 5.678 0 00-.22-.218 5.757 5.757 0 00-.219-.22 5.711 5.711 0 00-.215-.214 5.68 5.68 0 00-.207-.209 5.758 5.758 0 00-.211-.21 5.723 5.723 0 00-.207-.207 5.727 5.727 0 00-.194-.195 5.717 5.717 0 00-.202-.201 5.75 5.75 0 00-.2-.2 5.77 5.77 0 00-.191-.192 5.675 5.675 0 00-.192-.192 5.677 5.677 0 00-.187-.186 5.73 5.73 0 00-.184-.184 5.71 5.71 0 00-.184-.185 5.733 5.733 0 00-.18-.18 5.632 5.632 0 00-.174-.174 5.618 5.618 0 00-.173-.173 5.699 5.699 0 00-.171-.172 5.712 5.712 0 00-.171-.17 5.738 5.738 0 00-.16-.16 5.769 5.769 0 00-.163-.164 5.695 5.695 0 00-.159-.158 5.643 5.643 0 00-.156-.156 5.65 5.65 0 00-.153-.153 5.764 5.764 0 00-.15-.151 5.681 5.681 0 00-.148-.147 5.69 5.69 0 00-.144-.146 5.728 5.728 0 00-.142-.141 5.84 5.84 0 00-.139-.139 5.423 5.423 0 00-.138-.138c-.043-.044-.086-.088-.13-.13a5.928 5.928 0 00-.131-.131c-.042-.043-.084-.086-.128-.128-.04-.042-.082-.083-.124-.124-.04-.041-.08-.082-.122-.122l-.118-.119-.116-.115-.113-.114-.11-.11a5.32 5.32 0 00-.112-.111l-.1-.101-.097-.097-.102-.103a5.474 5.474 0 00-.097-.096c-.032-.032-.063-.065-.096-.096l-.083-.083-.09-.09-.084-.084-.082-.082-.077-.078-.075-.075-.073-.073-.07-.07-.068-.068-.063-.063-.061-.062-.06-.058-.058-.058-.044-.045-.053-.054-.052-.05-.035-.036-.045-.045-.038-.039-.04-.038-.023-.024-.034-.034-.026-.027-.023-.023-.026-.025-.009-.01-.019-.018-.012-.013-.007-.007-.002-.002-.009-.009a5.97 5.97 0 00-.245-.226l-.005-.004a6.646 6.646 0 00-.556-.434c-1.58-1.129-3.883-1.693-6.908-1.693z" fill="#00aad4" />
<path id="blueL" style="line-height:1.25" d="M51.842 102.726v23.707h.005v.005h.007v.007h.01v.01h.013v.012h.016v.016h.019v.02h.021v.02h.025v.025h.027v.027h.03v.031h.034v.033h.036v.036h.039v.04h.042v.041h.044v.044h.048v.048h.05v.05h.053v.054h.057v.056h.059v.059h.062v.062h.064v.064h.068v.068h.07v.071h.074v.073h.077v.077h.079v.079h.082v.082h.085v.085h.088v.088h.09v.09h.094v.095h.096v.096h.1v.1h.102v.102h.105v.105h.108v.108h.111v.11h.114v.115h.117v.116h.12v.12h.122v.123h.125v.125h.129v.128h.13v.131h.135v.134h.137v.137h.14v.14h.142v.143h.145v.145h.149v.148h.151v.152h.154v.154h.157v.157h.16v.16h.163v.163h.166v.166h.169v.168h.17v.172h.175v.174h.178v.177h.18v.18h.182v.183h.186v.186h.189v.188h.192v.192h.194v.194h.197v.198h.2v.2h.204v.203h.206v.207h.209v.208h.212v.212h.214v.215h.218v.217h.22v.22h.224v.224h.226v.227h.229v.228h.232v.232h.235v.235h.237v.238h.241v.24h.244v.244h.246v.247h.25v.249h.251v.252h.255v.255h.258v.258h.26v.26h.264v.264h.267v.267h.27v.27h.272v.272h.275v.275h.278v.278h.281v.28h.284v.284h.287v.287h.29v.29h.292v.292h.295v.296h.298v.298h.302v.301h.304v.304h.306v.307h.31v.31h.313v.312h.315v.316h.319v.318h.321v.322h.324v.324h.327v.327h.33v.33h.333v.333h.336v.335h.338v.339h.342v.341h.344v.344h.347v.348h.35v.35h.354v.353h.355v.356h.36v.359h.36v.361h.365v.365h.368v.367h.37v.37h.373v.374h.376v.375h.379v.38h.382v.381h.385v.385h.387v.388h.39v.39h.394v.393h.396v.396h.399v.4h.402v.401h.405v.406h.408v.407h.41v.41h.414v.415h.416v.416h.42v.42h.421v.421h.426v.425h.428v.428h.43v.431h.434v.434h.436v.436h.44v.44h.442v.442h.445v.445h.448v.448h.451v.45h.454v.455h.457v.456h.46v.46h.462v.463h.466v.465h.468v.468h.471v.471h.474v.474h.477v.477h.48v.48h.482v.483h.486v.485h.488v.489h.492v.491h.494v.494h.497v.497h.5v.5h.502v.503h.506v.506h.509v.508h.511v.512h.514v.514h.518v.517h.52v.52h.523v.524h.526v.526h.529v.528h.531v.532h.535v.534h.537v.538h.54v.54h.543v.543h.547v.546h.548v.549h.552v.552h.555v.555h.557v.557h.561v.56h.563v.564h.567v.566h.569v.57h.572v.571h.574v.575h18.017v-5.317h-.574v-.575h-.572v-.572h-.57v-.569h-.566v-.566h-.563v-.563h-.56v-.561h-.558v-.558h-.555v-.554h-.552v-.552h-.548v-.549h-.547v-.546h-.543v-.543h-.54v-.54h-.537v-.538h-.534v-.534h-.532v-.532h-.529v-.529h-.526v-.525h-.523v-.523h-.52v-.52h-.362v-7.44h-.575v-.575h-.572v-.572h-.569v-.57h-.566v-.566h-.563v-.563h-.56v-.56h-.558v-.558h-.555v-.555h-.552v-.552h-.549v-.548h-.546v-.547h-.543v-.543h-.54v-.54h-.538v-.537h-.534v-.535h-.532v-.531h-.529v-.53h-.525v-.525h-.523v-.523h-.52v-.52h-.518v-.518h-.514v-.514h-.512v-.511h-.508v-.509h-.506v-.506h-.503v-.503h-.5v-.5h-.497v-.496h-.494v-.495h-.491v-.491h-.489v-.489h-.485v-.485h-.483v-.483h-.48v-.48h-.477v-.477h-.473v-.473h-.472v-.472h-.468v-.468h-.465v-.465h-.463v-.463h-.46v-.46h-.456v-.456h-.454v-.454h-.451v-.451h-.448v-.448h-.445v-.445h-.442v-.442h-.44v-..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0