代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>爱心柯基❤️</title>
<style>
html,body{background-repeat:no-repeat;background-size:contain;background-position:center center;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#3f3456;background-size:fill;width:100%;height:100%;margin:0;padding:0;}.dog{position:absolute;top:52%;width:50vmin;height:40vmin;z-index:0;}.heart{position:absolute;width:6%;height:7%;background-color:#e64356;border-bottom-right-radius:23%;opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;}@-webkit-keyframes heart-beat{0%{transform:scale(0.75) rotate(35deg);opacity:1;}5%,15%,25%{transform:scale(1) rotate(35deg);}10%,20%{transform:scale(0.75) rotate(35deg);}70%{opacity:1;}100%{transform:rotate(35deg) translateY(-10px) translateX(-10px);opacity:0;}}@keyframes heart-beat{0%{transform:scale(0.75) rotate(35deg);opacity:1;}5%,15%,25%{transform:scale(1) rotate(35deg);}10%,20%{transform:scale(0.75) rotate(35deg);}70%{opacity:1;}100%{transform:rotate(35deg) translateY(-10px) translateX(-10px);opacity:0;}}.heart--1{top:-25%;left:15%;-webkit-animation:heart-beat 2s ease-out infinite 1.5s;animation:heart-beat 2s ease-out infinite 1.5s;}.heart--2{top:-36%;left:7%;-webkit-animation:heart-beat 2s ease-out infinite 1s;animation:heart-beat 2s ease-out infinite 1s;}.heart--3{top:-48%;left:14%;-webkit-animation:heart-beat 2s ease-out infinite 0.5s;animation:heart-beat 2s ease-out infinite 0.5s;}.heart--4{top:-53%;left:-3%;-webkit-animation:heart-beat 2s ease-out infinite;animation:heart-beat 2s ease-out infinite;}.heart:before,.heart:after{position:absolute;width:100%;height:100%;content:'';border-radius:50%;background-color:#e64356;}.heart:after{bottom:0px;left:-53%;}.heart:before{top:-53%;right:0px;transform:rotate(45deg);}.body{position:absolute;width:100%;height:50%;background-color:#f79e38;border-top-right-radius:17% 40%;border-top-left-radius:25%;border-bottom-right-radius:5% 13%;border-bottom-left-radius:30% 40%;z-index:3;}.cheast{position:absolute;width:45%;height:100%;background-color:#fff;border-top-right-radius:17% 40%;border-top-left-radius:25%;border-bottom-right-radius:40% 40%;border-bottom-left-radius:40% 40%;z-index:4;}.cheast:after,.cheast:before{position:absolute;content:'';width:7%;height:55%;border-radius:39%;background-color:#fff;}.cheast:after{top:36%;left:3%;transform:rotate(-1deg);}.cheast:before{top:19%;left:-4%;}.head{position:absolute;width:100%;height:100%;z-index:4;-webkit-animation:dog-head 1s ease-out infinite;animation:dog-head 1s ease-out infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-direction:alternate;animation-direction:alternate;}@-webkit-keyframes dog-head{to{transform:translateX(-3px) rotate(3deg);}}@keyframes dog-head{to{transform:translateX(-3px) rotate(3deg);}}.tail{position:absolute;top:-14%;left:92%;width:10%;height:45%;background-color:#f79e38;border-top-right-radius:30% 30%;border-top-left-radius:40% 30%;border-bottom-right-radius:30% 40%;border-bottom-left-radius:40% 40%;z-index:2;transform:rotate(20deg);-webkit-animation:dog-tail 170ms ease-out infinite;animation:dog-tail 170ms ease-out infinite;}@-webkit-keyframes dog-tail{from,to{transform:rotate(10deg);}50%,60%{transform:rotate(70deg) translateX(10px) translateY(2px);}}@keyframes dog-tail{from,to{transform:rotate(10deg);}50%,60%{transform:rotate(70deg) translateX(10px) translateY(2px);}}.tail:before{position:absolute;content:'';top:-8%;left:-7%;width:100%;height:50%;background-color:#f79e38;border-radius:50%;-webkit-animation:dog-tail-before 160ms ease-out infinite;animation:dog-tail-before 160ms ease-out infinite;}@-webkit-keyframes dog-tail-before{from,to{transform:translateX(0);}50%{transform:translateX(3px);}}@keyframes dog-tail-before{from,to{transform:translateX(0);}50%{transform:translateX(3px);}}.legs{position:absolute;top:97%;left:0;width:100%;height:30%;z-index:2;-webkit-animation:dog-legs 1s ease-out infinite 1.5s;animation:dog-legs 1s ease-out infinite 1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-direction:alternate;animation-direction:alternate;}@-webkit-keyframes dog-legs{from{transform:translateY(-1px);}to{transform:translateY(0px);}}@keyframes dog-legs{from{transform:translateY(-1px);}to{transform:translateY(0px);}}.legs__front,.legs__back{width:10%;height:100%;background-color:#f79e38;position:absolute;border-bottom-right-radius:100%;border-bottom-left-radius:100%;}.legs__front:after,.legs__back:after{content:'';position:absolute;top:50%;width:100%;height:49%;background-color:#fff;border-bottom-right-radius:100%;border-bottom-left-radius:100%;}.legs__front--left{left:38%;transform:rotate(1deg);}.legs__front--right{left:20%;transform:rotate(-4deg);}.legs__back--left{left:69%;transform:rotate(-7deg);}.legs__back--right{left:85%;transform:rotate(2deg);}.face{height:40%;width:42%;position:absolute;top:-13%;left:-3%;background-color:#fff;border-top-right-radius:45% 50%;border-top-left-radius:35% 50%;border-bottom-left-radius:35% 21%;z-index:6;}.face:after,.face:before{content:'';position:absolute;background-color:#f79e38;}.face:after{width:27%;left:7%;height:23%;border-top-right-radius:100% 100%;border-bottom-left-radius:49% 100%;transform:rotate(-64deg);top:-1%;border-top-left-radius:0% -20%;border-bottom-right-radius:52% 0%;box-shadow:rgba(0,0,0,0.1) 2px -6px 11px 1px;}.face:before{width:55%;left:42%;top:0%;height:35%;border-radius:23% 7% 16% 12%;transform:rotate(0deg) scaleX(-1);}.eye{width:6%;height:6%;position:absolute;border-radius:100%;top:24%;background-color:#000;z-index:6;-webkit-animation:dog-eye 1800ms infinite;animation:dog-eye 1800ms infinite;}@-webkit-keyframes dog-eye{from,to{-webkit-animation-timing-function:step-end;animation-timing-function:step-end;opacity:1;}50%,55%{-webkit-animation-timing-function:step-start;animation-timing-function:step-start;opacity:0;}}@keyframes dog-eye{from,to{-webkit-animation-timing-function:step-end;animation-timing-function:step-end;opacity:1;}50%,55%{-webkit-animation-timing-function:step-start;animation-timing-function:step-start;opacity:0;}}.eye--left{left:27%;}.eye--right{left:46%;}.mouth{background-color:transparent;border-color:#000;width:44%;border-style:solid;border-width:0.7vmin;height:48%;z-index:6;position:absolute;bottom:35%;left:14%;border-top-color:transparent;border-bottom-left-radius:72% 100%;border-bottom-right-radius:77% 100%;border-right-color:transparent;border-top-right-radius:50%;border-left-color:transparent;transform:rotate(-41deg);}.year{position:absolute;}.year--left{top:-40%;left:3%;height:47%;width:19%;z-index:1;background-color:#e99036;border-top-left-radius:68% 100%;border-top-right-radius:100% 100%;transform-origin:bottom center;-webkit-animation:left-year 1000ms ease-out infinite;animation:left-year 1000ms ease-out infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-direction:alternate;animation-direction:alternate;}@-webkit-keyframes left-year{from{transform:rotate(-26deg);}25%{transform:rotate(-35deg);}50%{transform:rotate(-26deg);}to{transform:rotate(-40deg);}}@keyframes left-year{from{transform:rotate(-26deg);}25%{transform:rotate(-35deg);}50%{transform:rotate(-26deg);}to{transform:rotate(-40deg);}}.year--right{top:-39%;left:19%;height:38%;width:18%;z-index:1;background-color:#f79e38;border-top-left-radius:56% 100%;border-top-right-radius:100% 100%;transform-origin:bottom center;border-bottom-right-radius:14% 38%;-webkit-animation:right-year 1000ms ease-out infinite;animation:right-year 1000ms ease-out infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-direction:alternate;animation-direction:alternate;}@-webkit-keyframes right-year{from{transform:rotate(-331deg);}25%{transform:rotate(-320deg);}50%{transform:rotate(-331deg);}to{transform:rotate(-320deg);}}@keyframes right-year{from{transform:rotate(-331deg);}25%{transform:rotate(-320deg);}50%{transform:rotate(-331deg);}to{transform:rotate(-320deg);}}.nose{position:absolute;width:24%;height:24%;background-color:#fff;z-index:7;left:-12%;top:-3%;border-bottom-left-radius:50% 88%;border-top-left-radius:11% 43%;transform:rotate(12deg);}.nose:after{content:'';position:absolute;width:50%;height:55%;background-color:#000;border-radius:100%;left:-7%;top:-18%;}
button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */
</style>
</head>
<body>
<div class="dog">
<div class="heart heart--1"></div>
<div class="heart heart--2"></div>
<div class="heart heart--3"></div>
<div class="heart heart--4"></div>
<div class="head">
<div class="year year--left"></div>
<div class="year year--right"></div>
<div class="nose"></div>
<div class="face">
<div class="eye eye--left"></div>
<div class="eye eye--right"></div>
<div class="mouth"></div>
</div>
</div>
<div class="body">
<div class="cheast"></div>
<div class="back"></div>
<div class="legs">
<div class="legs__front legs__front--left"></div>
<div class="legs__front legs__front--right"></div>
<div class="legs__back legs__back--left"></div>
<div class="legs__back legs__back--right"></div>
</div>
<div class="tail"></div>
</div>
</div>
</body>
</html>
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！