CSS Spin Animation |HTML and CSS

CSS Spin Animation |HTML and CSS . This is another important tutorial for web developers. This tutorial I am going to show you how to make CSS spin animation. Animation makes the website more beautiful and attractive. Without the animation, the website will not be more attractive to visitors. CSS is easy than javascript to make the animation so every new feature of CSS is more powerful to develop a website and web application. Just copy the given source code into your favorite text editor and run it in your browser. 

HTML

<!DOCTYPE html>
<html>
<head>
<title>Shimmering neon text</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="rainbow">
</div>
</body>
</html>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
   Background:#000;
}
::before, ::after {
  box-sizing: border-box;
}
@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
.rainbow {
  position: relative;
  z-index: 0;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  padding: 2rem;
}
.rainbow::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-color: #399953;
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
  animation: rotate 4s linear infinite;
}
.rainbow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 12;
  top: 12;
  width: calc(100% - 100px);
  height: calc(100% - 100px);
  
}

Leave a Comment