Guys can some help this question plz
Answers
< html > < head > < title > CSS Heart Animation < /title > < style > .back{ position:fixed; margin:auto; width:100%; heart:100%; top:0; bottom:0; left:0; right:0; padding:0; background-color:black; animation-name:back; animation-duration:3s; animation-iteration-count:infinite; } .heart{ background-color:white; margin:50% auto; top:0; bottom:0; right:0; left:0; padding:0; height:50px; width:50px; transform:rotate(-45deg); animation-name:heart; animation-duration:3s; animation-timing-function:ease-out; animation-iteration-count:infinite; } .heart:before,.heart:after{ background-color:white; position:absolute; content:""; width:50px; height:50px; border-radius:50%; } .heart:before{ left:25px; } .heart:after{ left:0; top:-25px; } @keyframes heart{ 0%{ transform:scale(1)rotate(-45deg); } 50%{ transform:scale(0.6)rotate(-45deg); } } @keyframes back{ 0%{ background-color:black; opacity:1; } 50%{ background-color:#ff0099; } } < /style > < /head > < body > < div class="back" > < /div > < div class="heart" > < /div > < /body > < /html > [/tex] < !DOCTYPE html > < html > < head > < title > VED PRAKASH < /title > < link rel="stylesheet" type="text/css" href="style.css" < /head > < body > < a href="#" > » »»risky »»» Click ↑ < /a > < style type="text/css" > body { margin: 0; padding: 0; background: #000; } a{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%); width: 250px; height: 60px; text-align: center; line-height: 60px; color: #fff; font-size: 24px; text-transform: uppercase; text-decoration: none; font-family: sans-serif; box-sizing: border-box; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 300%; border-radius: 30px; z-index: 1; } a:hover { animation: animate 4s linear infinite; } @keyframes animate { 0% { background-position: 0%; } 100% { background-position: 400%; } } a:before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 40px; opacity: 0; transition: 0.5s; } a:hover:before { filter: blur(20px); opacity:1; animation: animate 4s linear infinite; } < /style > < /body > < /html >