Rotate background shape in animation - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:background

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. background

Description

Rotate background shape in animation

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.port {<!--   w w  w  . jav  a2 s  . co  m-->
   position: relative;
   width: 330px;
   height: 330px;
   margin: 100px;
   color: #000;
}
.port_animation {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: -1;
   background-color: #EFEFEF;
   color: #000;
   border-radius: 100%;
   border: 15px dashed #FFFFFF;
   -webkit-transition-property: -webkit-transform;
   -webkit-transition-duration: 30s;
   -moz-transition-property: -moz-transform;
   -moz-transition-duration: 30s;
   -webkit-animation-name: rotate;
   -webkit-animation-duration: 30s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   -moz-animation-name: rotate;
   -moz-animation-duration: 30s;
   -moz-animation-iteration-count: infinite;
   -moz-animation-timing-function: linear;
}
@-webkit-keyframes rotate {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(360deg);}
}
.portTitle {
   font-size: 30px;
   text-align: center;
}
.portText {
   margin: 0 auto;
}


      </style> 
 </head> 
 <body> 
  <div class="port"> 
   <div class="port_animation"></div> 
   <h1 class="portTitle">Test</h1> 
   <p id="portText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lectus ipsum, pulvinar vel molestie facilisis, posuere ut lectus. Aliquam posuere turpis ac dolor dapibus sed rhoncus neque blandit. Mauris nec pellentesque mi. Aenean congue scelerisque pulvinar. Sed a velit vitae quam pulvinar pellentesque. Aliquam erat volutpat. Nullam a sapien felis, eu auctor ante. Pellentesque elementum egestas lectus, sit amet scelerisque nisl rutrum ut. Duis fermentum tortor nec neque placerat in blandit dui consequat. Suspendisse potenti. Nulla sit amet mauris vel lorem molestie fermentum.</p> 
  </div>  
 </body>
</html>

Related Tutorials