css实现文字字母依次跳动动画效果代码-html代码-BFW代码库

css实现文字字母依次跳动动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现文字字母依次跳动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
        
        body,
        html {
        	height: 100%;
        	display: grid;
        	background-color: #ffdd40;
        }
        
        p {
        	margin: auto;
        	text-align: center;
        	font-family: "Lobster", cursive;
        	font-size: 6em;
        	letter-spacing: 10px;
        	color: #f5f5dd;
        	font-style: italic;
        }
        
        #first-letter {
        	text-shadow: 3px 3px 0px #fbfaf6, 4px 4px 0px #fbfaf6, 5px 5px 0px #fbfaf6,
        		6px 6px 0px #fdacc5, 7px 7px 0px #fdacc5, 8px 8px 0px #fdacc5,
        		9px 9px 0px #75d5ea, 10px 10px 0px #75d5ea, 11px 11px 0px #75d5ea,
        		12px 12px 0px #603815, 13px 13px 0px #603815, 14px 14px 0px #603815,
        		15px 15px 0px #000000, 16px 16px 0px #000000, 17px 17px 0px #000000,
        		18px 18px 0px #d6c05a, 19px 19px 0px #d6c05a, 20px 20px 0px #d6c05a,
        		21px 21px 0px #d6c05a, 22px 22px 0px #d6c05a, 23px 23px 0px #d6c05a,
        		24px 24px 0px #d6c05a, 25px 25px 0px #d6c05a, 26px 26px 0px #d6c05a,
        		27px 27px 0px #d6c05a;
        	-webkit-text-stroke: 1px #e8ded1;
        }
        
        #second-letter {
        	text-shadow: 3px 3px 0px #fbfaf6, 4px 4px 0px #fbfaf6, 5px 5px 0px #fbfaf6,
        		6px 6px 0px #fdacc5, 7px 7px 0px #fdacc5, 8px 8px 0px #fdacc5,
        		9px 9px 0px #75d5ea, 10px 10px 0px #75d5ea, 11px 11px 0px #75d5ea,
        		12px 12px 0px #603815, 13px 13px 0px #603815, 14px 14px 0px #603815,
        		15px 15px 0px #000000, 16px 16px 0px #000000, 17px 17px 0px #000000,
        		18px 18px 0px #d6c05a, 19px 19px 0px #d6c05a, 20px 20px 0px #d6c05a,
        		21px 21px 0px #d6c05a, 22px 22px 0px #d6c05a, 23px 23px 0px #d6c05a,
        		24px 24px 0px #d6c05a, 25px 25px 0px #d6c05a, 26px 26px 0px #d6c05a,
        		27px 27px 0px #d6c05a;
        	-webkit-text-stroke: 1px #e8ded1;
        }
        
        .third-letter {
        	display: inline-block;
        	text-align: center;
        .........完整代码请登录后点击上方下载按钮下载查看