10个CSS3动画菜单

<link rel=\”stylesheet\” type=\”text/css\” href=\”css/demo.css\” />
 <link rel=\”stylesheet\” type=\”text/css\” href=\”css/style1.css\” />
 <link href=\’http://fonts.googleapis.com/css?family=Terminal+Dosis\’ rel=\’stylesheet\’ type=\’text/css\’ />

<ul class=\”ca-menu\”>

                    <li>
                        <a href=\”#\”>
                            <span class=\”ca-icon\”>A</span>
                            <div class=\”ca-content\”>
                                <h2 class=\”ca-main\”>Exceptional Service</h2>
                                <h3 class=\”ca-sub\”>Personalized to your needs</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href=\”#\”>
                            <span class=\”ca-icon\”>I</span>
                            <div class=\”ca-content\”>
                                <h2 class=\”ca-main\”>Creative Storytelling</h2>
                                <h3 class=\”ca-sub\”>Advanced use of technology</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href=\”#\”>
                            <span class=\”ca-icon\”>C</span>
                            <div class=\”ca-content\”>
                                <h2 class=\”ca-main\”>Infographical Education</h2>
                                <h3 class=\”ca-sub\”>Understanding visually</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href=\”#\”>
                            <span class=\”ca-icon\”>S</span>
                            <div class=\”ca-content\”>
                                <h2 class=\”ca-main\”>Sophisticated Team</h2>
                                <h3 class=\”ca-sub\”>Professionals in action</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href=\”#\”>
                            <span class=\”ca-icon\”>d</span>
                            <div class=\”ca-content\”>
                                <h2 class=\”ca-main\”>Unconditional Support</h2>
                                <h3 class=\”ca-sub\”>24/7 for you needs</h3>
                            </div>
                        </a>
                    </li>
                </ul>