1．翻轉(zhuǎn)的字符在頁面中放置一個(gè)類名為container的層作為容器，在該層中放置5個(gè)字符區(qū)域，HTML代碼描述如下： <div class="container"> <span>H</span> <span>E</span> <span>L</span> <span>L</span> <span>O</span> </div> 為container和span定義CSS樣式規(guī)則，并定義實(shí)現(xiàn)5個(gè)字符翻轉(zhuǎn)的動(dòng)畫關(guān)鍵幀。完整的HTML文件內(nèi)容如下。 
<!DOCTYPE html> <html> <head> <title>字符翻轉(zhuǎn)</title> <style> .container { margin: 0 auto; width: 500px; height: 300px; position: relative; overflow: hidden; display:flex; align-items: center; justify-content: center; border: 4px solid rgba(255, 0, 0, 0.9); background:#d8d8d8; border-radius: 10%; } .container>span { font-size: 130px; font-family: "Impact",sans-serif; display: inline-block; animation:flip 2s infinite linear; transform-origin:0 70%; transform-style:preserve-3d; } @keyframes flip { 50% { transform: rotateX(360deg); } 100% { transform: rotateX(360deg); } } .container>span:nth-child(1n+0) { color:var(--color); animation-delay: var(--delay); } </style> </head> <body> <div class="container"> <span style="--delay:0s;--color:#f00">H</span> <span style="--delay:0.4s;--color:#f0f">E</span> <span style="--delay:0.8s;--color:#ff0">L</span> <span style="--delay:1.2s;--color:#0ff">L</span> <span style="--delay:1.6s;--color:#800080">O</span> </div> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現(xiàn)出如圖1所示的動(dòng)畫效果。
圖1 字符繞X軸翻轉(zhuǎn) 若將上面的關(guān)鍵幀設(shè)置中的兩個(gè)屬性值“rotateX”均改成“rotateY”，則呈現(xiàn)如圖2所示的動(dòng)畫效果。 圖2 字符繞Y軸翻轉(zhuǎn) 若將上面的關(guān)鍵幀設(shè)置中的兩個(gè)屬性值“rotateX”均改成“rotateZ”，則呈現(xiàn)如圖3所示的動(dòng)畫效果。
圖3 字符繞Y軸翻轉(zhuǎn) 2．跳躍的字符我們可以通過修改字符區(qū)span的top屬性的屬性值讓字符上下移動(dòng)，同時(shí)設(shè)置文本的陰影，形成字符的跳躍動(dòng)畫效果。 編寫的完整HTML文件如下。
<!DOCTYPE HTML> <html> <head> <title>跳躍的字符</title> <style> .container { margin: 0 auto; width: 600px; height: 200px; position: relative; overflow: hidden; display:flex; align-items: center; justify-content: center; border: 4px solid rgba(255, 0, 0, 0.9); background:#f5f5f5; border-radius: 10%; } .container>span { position: relative; top: 20px; display: inline-block; animation: bounce .3s ease infinite alternate; font-family: "Impact",sans-serif; font-size: 80px; text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, .4); } .container>span:nth-child(1n+0) { color:var(--color); animation-delay: var(--delay); } @keyframes bounce { 100% { top: -20px; text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 #CCC, 0 7px 0 #CCC, 0 8px 0 #CCC, 0 9px 0 #CCC, 0 50px 25px rgba(0, 0, 0, .2); } } </style> </head> <body> <div class="container"> <span style="--delay:0s;--color:#f00">H</span> <span style="--delay:0.1s;--color:#f0f">a</span> <span style="--delay:0.2s;--color:#ff0">p</span> <span style="--delay:0.3s;--color:#0f0">p</span> <span style="--delay:0.4s;--color:#0ff">y</span> <span style="--delay:0.5s;--color:#00f">N</span> <span style="--delay:0.6s;--color:#800080">e</span> <span style="--delay:0.7s;--color:#008080">w</span> <span style="--delay:0.8s;--color:#ff6347">Y</span> <span style="--delay:0.9s;--color:#ee82ee">e</span> <span style="--delay:1.0s;--color:#8b4513">a</span> <span style="--delay:1.1s;--color:#fa8072">r</span> </div> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現(xiàn)出如圖4所示的動(dòng)畫效果。 圖4 跳躍的字符 3．霓虹字符通過濾鏡的方式讓文字發(fā)光，形成霓虹文字效果。編寫HTML文件內(nèi)容如下。
<!DOCTYPE html> <html> <head> <title>霓虹字符</title> <style> .container { margin: 0 auto; width: 500px; height: 300px; position: relative; overflow: hidden; display:flex; align-items: center; justify-content: center; border: 4px solid rgba(255, 0, 0, 0.9); background:#000000; border-radius: 10%; } .container>span { margin-right: 10px; display: inline-block; font-size: 100px; font-family: "Impact",sans-serif; color: white; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073; animation-name: anim; animation-timing-function: linear; animation-direction: alternate-reverse; animation-iteration-count: infinite; } .container>span:nth-child(1) { animation-delay: 0.2s; animation-duration: 0.5s; } .container>span:nth-child(2) { animation-delay: 0.4s; animation-duration: 1s; } .container>span:nth-child(3) { animation-delay: 0.6s; animation-duration: 1.5s; } .container>span:nth-child(4) { animation-delay: 0.8s; animation-duration: 2s; } .container>span:nth-child(5) { animation-delay: 1s; animation-duration: 2.5s; } @keyframes anim { 0% { opacity: .1; background-position: 0 0; filter: hue-rotate(0deg); } 10% { background-position: 5px 0; } 20% { background-position: -5px 0; } 30% { background-position: 15px 0; } 40% { background-position: -5px 0; } 50% { background-position: -25px 0; } 60% { background-position: -50px 0; } 70% { background-position: 0 -20px; } 80% { background-position: -60px -20px;} 81% { background-position: 0 0; } 100% { opacity: 1; background-position: 0 0; filter: hue-rotate(360deg); } } </style> </head> <body> <div class="container"> <span>W</span> <span>U</span> <span>H</span> <span>A</span> <span>N</span> </div> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現(xiàn)出如圖5所示的動(dòng)畫效果。 圖5 霓虹文字 |
|
|
