How to make animation Border in html and css on December 18, 2021 Get link Facebook Twitter Pinterest Email Other Apps How to make Animation Border in Html and CSS only Html part Border animation CSS part *{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; margin-top: 200px; margin-left: 250px; background:#333 ; } .box{ width: 200px; height: 200px; border-radius: 10px; box-shadow: 16px 14px 20px #0000008c; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; } .box::before{ content: ""; background-image: conic-gradient(#ff0052 20deg, transparent 120deg); width: 150%; height: 150%; position: absolute; animation: rotate 2s linear infinite; } .box::after{ content: ""; width: 190px; height: 190px; background: #101010; position: absolute; border-radius: 10px; display: flex; justify-content: center; align-items: center; color: #ff0052; font-size: larger; letter-spacing: 5px; box-shadow: inset 20px 20px 20px #1a17172c; } @keyframes rotate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(-360deg); } } Comments
Comments
Post a Comment