Source code network disk
The css3 small special effects navigation bar made based on MOOC.com, the icons are displayed in different ways
页面布局 Document
样式 *{ -webkit-box-sizing: border-box; } html,body { margin: 0; padding: 0; height: 100%; background: #47c9af;; color: #74777b; font-family: 'Raleway', Arial, sans-serif; } ul { list-style: none; } a{ text-decoration: none; color: rgba(0, 0, 0, 0.3); display: inline-block; font-weight: 700; } a:hover, .nav a:focus { color: #fff; } .nav { width: 820px; height: 300px; margin: 200px auto 0 auto; font-weight: 300; } .nav ul li { display: inline-block; position: relative; margin: 0 20px; font-size: 1.5em; } .tooltip-content { position: absolute; width: 80px; height: 80px; padding-top: 25px; left: 50%; margin-left: -40px; bottom: 20px; border-radius: 50%; text-align: center; background: #fff; color: #47c9af; opacity: 0; margin-bottom: 20px; cursor: pointer; } .tooltip-effect-1 .tooltip-content { -webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg); -webkit-transform-origin: 50% 100%; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; } .tooltip-effect-1 .tooltip-content i { -webkit-transform: scale3d(0, 0, 1); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; } .tooltip-effect-2 .tooltip-content { -webkit-transform: translate3d(0, 10px, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; } .tooltip-effect-2 .tooltip-content i { -webkit-transform: translate3d(0, 15px, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; } .tooltip-effect-3 .tooltip-content { -webkit-transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg); -webkit-transform-origin: 50% 100%; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; } .tooltip-effect-3 .tooltip-content i { -webkit-transform: scale3d(0, 0, 1); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; } .tooltip-effect-4 .tooltip-content { -webkit-transform: translate3d(0, -20px, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; } .tooltip-effect-4 .tooltip-content i { -webkit-transform: translate3d(0, 20px, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; } .tooltip-effect-5 .tooltip-content { -webkit-transform: scale3d(0, 0, 1); -webkit-transform-origin: 50% 100%; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; } .tooltip-effect-5 .tooltip-content i { -webkit-transform: translate3d(0, 20px, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; } .tooltip:hover .tooltip-content, .tooltip:hover .tooltip-content i { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
This article explains the css3 animation Navigation bar 3D, please pay attention to php Chinese website for more related content.
Related recommendations:
The front-end calls the WeChat payment interface
jQuery object and DOM object
jQuery plug-in development standard writing method
The above is the detailed content of css3 animated navigation bar 3D. For more information, please follow other related articles on the PHP Chinese website!