Geek Answers Handbook

Creating a div animation and the appearance of a clockwise rotation .ie radial wave effect for Div

I was looking for a search effect div like here .
Here the image is drawn using < canvas >
" radial wave clock effect "
How can i achieve this. I found this javascript library. But it provides this effect only for the image.
I need the same effect for a div.
What are the approaches to doing the same.
Thanks in advance.

+6
source share
4 answers

I created a 1/2 hour animation effect that looks like the one you want. I hope to find a solution to provide accurate animation.

the code

For animation you need markup:

 <div class="wrapper"> <div class="content"> This is a good day. Maybe. </div> <div class="rotate"></div> <div class="mask"></div> </div>
  • wrapper - used to set the content position
  • content - your content in a div (or any other element)
  • rotate - animation to simulate 1/2 measure
  • mask - animation to hide content

And this is CSS (written in SCSS ):

Variables

 $width: 200px; $height: 200px; $duration: 2s; $delay: 1s; $color-alpha: #308991; $color-beta: #80c144; $color-gamma: #b83d54; .wrapper { position:relative; width: $width; height: $height; margin:0 auto; } .content { width: $width; height: $height; background: $color-beta; border-radius: 50%; padding: 2em; overflow: hidden; text-align:center; } /* Rotates 360 deg */ .rotate { position: absolute; z-index: 2; top: 0; right: 0; width: $width / 2; height: $height; box-shadow:0 0 0 .15em $color-alpha; background: $color-alpha; transform-origin: 0 50%; animation: rotate $duration linear 1 forwards; animation-delay: 1s; } @keyframes rotate { 0% { transform: rotate(0deg); } 62% { opacity:1; } 99.99% { z-index: 2; } 100% { transform: rotate(360deg); opacity: 0; z-index: -1; } } /* The .content is hidden by .mask until the .rotate reveals it */ .mask { position:absolute; z-index:1; top: -1px; left: -1px; width: $width + 2px; height: $height + 2px; background: linear-gradient(top, transparent 50%, $color-alpha 50%), linear-gradient(top, $color-alpha 50%, transparent 50%); background: linear-gradient(to top, transparent 50%, $color-alpha 50%), linear-gradient(to top, $color-alpha 50%, transparent 50%); background-position:100% 100%, 0 0; background-size: 50% 200%; background-repeat: no-repeat; border-radius: 50%; box-shadow:0 0 0 .65em $color-alpha; animation: mask $duration / 1.25 linear 1 forwards; animation-delay: (-$duration / 7.5) + $delay; } @keyframes mask { 50% { background-position: 100% 0, 0 0; } 99.99% { z-index: 1; } 100% { background-position: 100% 0, 0 100%; z-index: -1; } }

Demo

You can see the live demo on CodePen: 1/2 hour animation

+2
source

This script can convert html to image. http://html2canvas.hertzen.com/

0
source

If I understand well, you are looking for the cake timer effect. Here is pure CSS that I did some time ago: http://css-tricks.com/css-pie-timer/ .

0
source

More articles:


All Articles