| 标题 | 一款纯css3实现的动画加载导航 |
| 内容 | html代码： 代码如下: <ul> <li><a href="#">Home</a></li><li> <a href="#">About Us</a></li><li><a href="#">Another Link</a></li><li class="main-menu-item"><a href="#">And another</a></li><li><a href="#">Stuff</a></li><li><a href="#">Help</a></li><li> <a href="#">Contact</a></li></ul> css代码： 代码如下: *, *:after, *:before { -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } html, body { background: #f0f0f0; font-family: Helvetica, sans-serif; height: 100%; } .main-menu { margin: auto; width: 960px; text-align: center; position: relative; list-style-type: none; margin-top: 2em; } .main-menu::after, .main-menu-item.active::after { content: ''; display: inline-block; position: absolute; } .main-menu::after { width: 70%; height: 2px; background: #9B1C27; -webkit-animation: menuLine 1s ease forwards; animation: menuLine 1s ease forwards; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); bottom: 0; left: 0; right: 0; margin: auto; opacity: 0; } @-webkit-keyframes menuLine { to { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; } } @keyframes menuLine { to { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; } } @-webkit-keyframes menuItem { to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes menuItem { to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .main-menu-item a { display: block; padding: 1em; text-decoration: none; color: #555; opacity: 0; -webkit-transform: translateY(40%); -ms-transform: translateY(40%); transform: translateY(40%); -webkit-animation: menuItem .8s ease forwards; animation: menuItem .8s ease forwards; -webkit-transition: all .2s ease; transition: all .2s ease; } .main-menu-item:nth-child(4) a { -webkit-animation-delay: .4s; animation-delay: .4s; } .main-menu-item:nth-child(3) a, .main-menu-item:nth-child(5) a { -webkit-animation-delay: .5s; animation-delay: .5s; } .main-menu-item:nth-child(2) a, .main-menu-item:nth-child(6) a { -webkit-animation-delay: .6s; animation-delay: .6s; } .main-menu-item:nth-child(1) a, .main-menu-item:nth-child(7) a { -webkit-animation-delay: .7s; animation-delay: .7s; } .main-menu-item { display: inline-block; position: relative; } .main-menu-item:hover a, .main-menu-item.active { color: #9B1C27; } .main-menu-item:hover a::after, .main-menu-item.active::after { width: 0; height: 0; border-bottom: .5em solid #9B1C27; border-left: .5em solid transparent; border-right: .5em solid transparent; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0; -webkit-transform: translateY(0.05em); -ms-transform: translateY(0.05em); transform: translateY(0.05em); -webkit-animation: menuItem .8s 1.2s ease forwards; animation: menuItem .8s 1.2s ease forwards; } |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。