<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>爱心柯基❤️</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
/>
<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%;}</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>
代码来自前端嘛
评语 (0)