zoukankan      html  css  js  c++  java

  • 仿网易nec首页动画效果

    仿网页nec首页动画效果
    nec链接：http://nec.netease.com/

    首先，介绍animation
    animation检索或设置对象所应用的动画特效。
    animation由“keyframes”这个属性来实现这样的效果。
    keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。

    关于animation属性介绍：
    animation-name：检索或设置对象所应用的动画名称
    animation-duration：检索或设置对象动画的持续时间
    animation-timing-function：检索或设置对象动画的过渡类型
    animation-delay：检索或设置对象动画延迟的时间
    animation-iteration-count：检索或设置对象动画的循环次数
    animation-direction：检索或设置对象动画在循环中是否反向运动
    animation-play-state：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

    nec动画实现原理：
    采用三层背景层、气泡层、文字镂空层。气泡层通过animation属性实现了运动效果。


    html结构：

    <div class="kbanner">
    <div class="knecbg knecone"></div>
    <div class="knecbg knectwo">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
    <div class="knecbg knecthree"></div>
</div>


    css样式：

    .kbanner{
    position: relative;
    width: 856px;
    height: 366px;
    background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_banner1.jpg) center top no-repeat;
}
.knecbg{
    position: absolute;
    left: 150px;
    top: 77px;
    width: 487px;
    height: 186px;
    overflow: hidden;
}
.knecone{
    background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) left top no-repeat;
    z-index: 1;
}
.knectwo{
    z-index: 2;
}
.knecthree{
    background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) left bottom no-repeat;
    z-index: 3;
}
.knectwo i{
    position: absolute;
    display: block;
    top: -50px;
    width: 53px;
    height: 56px;
    overflow: hidden;
    background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) no-repeat -9999px -9999px;
    -webkit-animation: paoi 7s 2s infinite;
    -moz-animation: paoi 7s 2s infinite;
    -ms-animation: paoi 7s 2s infinite;
    animation: paoi 7s 2s infinite;
}
.knectwo i:nth-child(1){
    left: 25px;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
    background-position: -507px 0;
}
.knectwo i:nth-child(2){
    left: 85px;
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    background-position: -507px -64px;
}
.knectwo i:nth-child(3){
    left: 190px;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -ms-animation-delay: 4s;
    animation-delay: 4s;
    background-position: -507px -140px;
}
.knectwo i:nth-child(4){
    left: 285px;
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
    background-position: -507px 0;
}
.knectwo i:nth-child(5){
    left: 400px;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s;
    background-position: -507px 0;
}
@-webkit-keyframes paoi {
    0% {
    top:186px;
}
100% {
    top:-56px;
}
}@-moz-keyframes paoi {
    0% {
    top:186px;
}
100% {
    top:-56px;
}
}@-ms-keyframes paoi {
    0% {
    top:186px;
}
100% {
    top:-56px;
}
}@keyframes paoi {
    0% {
    top:186px;
}
100% {
    top:-56px;
}



    nec动画效果：
  • 相关阅读:
    软工个人阅读作业3
    阅读作业2
    代码复审
    pair project elevator
    读《移山之道——VSTS软件开发指南》
    软件工程作业--词频统计
    个人阅读作业3
    个人阅读作业2
    代码复审
    结对项目电梯吐血总结
  • 原文地址：https://www.cnblogs.com/kuikui/p/3139451.html
Copyright © 2011-2022 走看看