通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。下面是一个改变背景图片定位的一个动画效果,首先是定义动画:
/*定义名为slide-bkg动画*/
@keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}
@-moz-keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}
@-khtml-keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}
@-webkit-keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}
@-o-keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}
前缀为浏览性兼容性处理,IE10以前浏览器不支持CSS3动画效果,下面为调用动画效果。
.active-state{ background-image: url("images/active-state.png"); background-repeat: no-repeat; background-position: 0 55px; animation: slide-bkg 0.2s; -moz-animation: slide-bkg 0.2s; /* Firefox */ -webkit-animation: slide-bkg 0.2s; /* Safari 和 Chrome */ -o-animation: slide-bkg 0.2s; /* Opera */ }
至此就将动画绑定在了选择器上了。整体页面请看下面代码:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>综合练习</title> <style> * { margin: 0px; } .container { width: 100%; height: 100px; background-color: #181818; } .container .logo { width: 350px; height: 100px; background-color: #28b865; margin-left: 200px; color: #ffffff; line-height: 100px; float: left; } .container .logo img { margin: 7px 20px; float: left; } .container .nav { width: 750px; height: 100px; line-height: 100px; float: right; margin-right: 200px; } .container .nav ul { float: right; color: white; list-style: none; font-size: 24px; } .container .nav li { float: left; margin: 10px 10px; /*border: #28b865 1px solid;*/ cursor: pointer; z-index: 1; } .container .nav li a { display: block; width: 139px; height: 80px; line-height: 80px; text-align: center; text-decoration: none; color: white; z-index: 3; } .active-state{ background-image: url("images/active-state.png"); background-repeat: no-repeat; background-position: 0 55px; animation: slide-bkg 0.2s; -moz-animation: slide-bkg 0.2s; /* Firefox */ -webkit-animation: slide-bkg 0.2s; /* Safari 和 Chrome */ -o-animation: slide-bkg 0.2s; /* Opera */ } /*定义名为slide-bkg动画*/ @keyframes slide-bkg { from{background-position: 0 0;} to{background-position: 0 55px;} } @-moz-keyframes slide-bkg { from{background-position: 0 0;} to{background-position: 0 55px;} } @-khtml-keyframes slide-bkg { from{background-position: 0 0;} to{background-position: 0 55px;} } @-webkit-keyframes slide-bkg { from{background-position: 0 0;} to{background-position: 0 55px;} } @-o-keyframes slide-bkg { from{background-position: 0 0;} to{background-position: 0 55px;} } </style> </head> <body> <div class="container"> <div class="logo"> <img src="images/templatemo_logo.png"> <h2>综合练习</h2> </div> <div class="nav"> <ul> <li class="active-state"><a href="#">主页</a></li> <li><a href="#">服务</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</a></li> </ul> </div> </div> <script src="JS/jquery-3.1.1.min.js"></script> <script src="JS/animateBackground-plugin.js"></script> <script> $(document).ready(function () { $(".nav ul li").on("click",function () { $(this).addClass("active-state").siblings().removeClass("active-state"); }) }) </script> </body> </html>