@keyframes bump{20%{transform:translate(-50%,-50%) rotate(45deg) scale(1.2);opacity:.5}40%{transform:translate(-50%,-50%) rotate(45deg) scale(1)}60%{transform:translate(-50%,-50%) rotate(45deg) scale(1.1);opacity:.8}80%{transform:translate(-50%,-50%) rotate(45deg) scale(1)}}.heart{width:100px;height:100px;background:red;position:relative;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 50px rgba(253,148,28,.87);animation:bump 1s infinite}.heart:before{left:-50%}.heart:after,.heart:before{content:"";position:absolute;width:100%;height:100%;background:red;border-radius:50%}.heart:after{top:-50%}#app{background:#eee;height:100vh;width:100vw}#app input{position:relative;left:50%;top:10%;transform:translateX(-50%);outline:none;border-radius:10px 10px 50% 50%;line-height:2em;font-size:1.5em;border:none;text-align:center;background:none;border-bottom:3px solid red}#app .tb{width:100%;position:relative}#app .tb .text{font-family:cursive,kaiti;font-size:3em;margin:0 auto;text-align:center;position:absolute;width:100%}#app .tb .text:first-child{color:#8a2be2}#app .tb .text:nth-child(2){top:2em;color:#ff0}#app .tb .text:nth-child(3){top:8em;color:tomato}#app .tb .text:nth-child(4){top:4em}