当前位置:  首页  >  PHP资讯  >  业界资讯

css3动画导航栏3D

源码网盘根据慕课网做的css3小特效导航栏,图标以不同方式显示页面布局<!doctypehtml><htmllang"en"><head><metacharset"UTF-8"><title&am

源码网盘

根据慕课网做的css3小特效导航栏,图标以不同方式显示

页面布局           

样式 *{ -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); }

本文讲解了css3动画导航栏3D ,更多相关内容请关注。

内容推荐:免费高清PNG素材下载

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4