Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.