Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
CSS Layouts
Web Graphics
Online Tools:
Sponsored

CSS Library: Horizontal CSS Menus: CSS3 demos: Here

CSS3 Sonar Menu

Author: Dynamic Drive

CSS3 Sonar Menu is a horizontal list menu that highlights each menu link with a pulsating sonar effect. Inside each menu link, a :before and :after pseudo element generates two circles (by setting their border-radius to 50% ) with "double" borders to form the sonar look. CSS3 keyframe animation is then used to animate the sonar's scale (via CSS3 transform), creating a moving, pulsating effect.

The sonar effect works in IE10+ and all modern versions of Firefox and Chrome, with the exception of Safari. In Safari, the browser currently has trouble animating pseudo elements unfortunately.

Demo:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 08/09/2013

Revision History: None

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.


Commenting is not available in this weblog entry.
Copyright 2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.