美文网首页css3
css3漂浮动画

css3漂浮动画

作者: 干炸里脊不如你 | 来源:发表于2019-06-19 10:16 被阅读0次
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.nav li{width: 130px;height:150px;position: relative;}
.nav li a{width: 130px;height:150px;display: block;overflow: hidden;background-position: -540px -100px;}
li a i {
    background: #000;
    border-radius: 2px;
    bottom: 26px;
    left:20px;
    box-shadow: 0 0 2px #ff6a82;
    display: none;
    height: 5px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 5px;
    display:block;
}
.nav li a.hover span,.nav li a.hover em{
    animation: moveAni 1s linear infinite alternate;
    -webkit-animation: moveAni 1s linear infinite alternate;
    -moz-animation: moveAni 1s linear infinite alternate;
    -m-animation: moveAni 1s linear infinite alternate;
    -o-animation: moveAni 1s linear infinite alternate;
}

.nav li a.hover .i-1{
    animation: lightAni1 3s linear infinite;
    -webkit-animation: lightAni1 3s linear infinite;
    -moz-animation: lightAni1 3s linear infinite;
    -m-animation: lightAni1 3s linear infinite;
    -o-animation: lightAni1 3s linear infinite;
}
.nav li a.hover .i-2{
    animation: lightAni2 3s 1s linear infinite;
    -webkit-animation: lightAni2 3s 1s linear infinite;
    -moz-animation: lightAni2 3s 1s linear infinite;
    -m-animation: lightAni2 3s 1s linear infinite;
    -o-animation: lightAni2 3s 1s linear infinite;
}
.nav li a.hover .i-3{
    animation: lightAni1 3s 2s linear infinite;
    -webkit-animation: lightAni1 3s 2s linear infinite;
    -moz-animation: lightAni1 3s 2s linear infinite;
    -m-animation: lightAni1 3s 2s linear infinite;
    -o-animation: lightAni1 3s 2s linear infinite;
}
.nav li a.hover .i-4{
    animation: lightAni1 3s 2.2s linear infinite;
    -webkit-animation: lightAni1 3s 2.2s linear infinite;
    -moz-animation: lightAni1 3s 2.2s linear infinite;
    -m-animation: lightAni1 3s 2.2s linear infinite;
    -o-animation: lightAni1 3s 2.2s linear infinite;
}
.nav li a.hover .i-5{
    animation: lightAni3 3s 1.5s linear infinite;
    -webkit-animation: lightAni3 3s 1.5s linear infinite;
    -moz-animation: lightAni3 3s 1.5s linear infinite;
    -m-animation: lightAni3 3s 1.5s linear infinite;
    -o-animation: lightAni3 3s 1.5s linear infinite;
}
.nav li a.hover .i-6{
    animation: lightAni2 3s .5s linear infinite;
    -webkit-animation: lightAni2 3s .5s linear infinite;
    -moz-animation: lightAni2 3s .5s linear infinite;
    -m-animation: lightAni2 3s .5s linear infinite;
    -o-animation: lightAni2 3s .5s linear infinite;
}
.nav li a.hover .i-7{
    animation: lightAni1 3s .8s linear infinite;
    -webkit-animation: lightAni1 3s .8s linear infinite;
    -moz-animation: lightAni1 3s .8s linear infinite;
    -m-animation: lightAni1 3s .8s linear infinite;
    -o-animation: lightAni1 3s .8s linear infinite;
}
@keyframes lightAni1{
    0%{
        opacity: 0.5;
        transform:translateY(0);
    }
    50%{
        opacity: 1;
        transform:translateY(-50px);
    }
    100%{
        opacity: 0;
        transform:translateY(-100px);
    }
}
@-webkit-keyframes lightAni1{
    0%{
        opacity: 0.5;
        -webkit-transform:translateY(0);
    }
    50%{
        opacity: 1;
        -webkit-transform:translateY(-50px);
    }
    100%{
        opacity: 0;
        -webkit-transform:translateY(-100px);
    }
}
@-moz-keyframes lightAni1{
    0%{
        opacity: 0.5;
        -moz-transform:translateY(0);
    }
    50%{
        opacity: 1;
        -moz-transform:translateY(-50px);
    }
    100%{
        opacity: 0;
        -moz-transform:translateY(-100px);
    }
}
@-m-keyframes lightAni1{
    0%{
        opacity: 0.5;
        -m-transform:translateY(0);
    }
    50%{
        opacity: 1;
        -m-transform:translateY(-50px);
    }
    100%{
        opacity: 0;
        -m-transform:translateY(-100px);
    }
}
@-o-keyframes lightAni1{
    0%{
        opacity: 0.5;
        -o-transform:translateY(0);
    }
    50%{
        opacity: 1;
        -o-transform:translateY(-50px);
    }
    100%{
        opacity: 0;
        -o-transform:translateY(-100px);
    }
}
@keyframes lightAni2{
    0%{
        opacity: 0.5;
        transform:translate(0,0);
    }
    50%{
        opacity: 1;
        transform:translate(-10px,-50px);
    }
    100%{
        opacity: 0;
        transform:translate(-20px,-100px);
    }
}
@-webkit-keyframes lightAni2{
    0%{
        opacity: 0.5;
        -webkit-transform:translate(0,0);
    }
    50%{
        opacity: 1;
        -webkit-transform:translate(-10px,-50px);
    }
    100%{
        opacity: 0;
        -webkit-transform:translate(-20px,-100px);
    }
}
@-moz-keyframes lightAni2{
    0%{
        opacity: 0.5;
        -moz-transform:translate(0,0);
    }
    50%{
        opacity: 1;
        -moz-transform:translate(-10px,-50px);
    }
    100%{
        opacity: 0;
        -moz-transform:translate(-20px,-100px);
    }
}
@-m-keyframes lightAni2{
    0%{
        opacity: 0.5;
        -m-transform:translate(0,0);
    }
    50%{
        opacity: 1;
        -m-transform:translate(-10px,-50px);
    }
    100%{
        opacity: 0;
        -m-transform:translate(-20px,-100px);
    }
}
@-o-keyframes lightAni2{
    0%{
        opacity: 0.5;
        -o-transform:translate(0,0);
    }
    50%{
        opacity: 1;
        -o-transform:translate(-10px,-50px);
    }
    100%{
        opacity: 0;
        -o-transform:translate(-20px,-100px);
    }
}
@keyframes lightAni3{
    0%{
        opacity: 0.5;
        transform:translate(0,0);
    }
    50%{
        opacity: 1;
        transform:translate(10px,-50px);
    }
    100%{
        opacity: 0;
        transform:translate(20px,-100px);
    }
}
@-webkit-keyframes lightAni3{
    0%{
        opacity: 0.5;
        -webkit-transform:translate(0,0);
    }
    50%{
        opacity: 1;
        -webkit-transform:translate(10px,-50px);
    }
    100%{
        opacity: 0;
        -webkit-transform:translate(20px,-100px);
    }
}
@-moz-keyframes lightAni3{
    0%{
        opacity: 0.5;
        -moz-transform:translate(0,0);
    }
    50%{
        opacity: 1;
        -moz-transform:translate(10px,-50px);
    }
    100%{
        opacity: 0;
        -moz-transform:translate(20px,-100px);
    }
}
@-m-keyframes lightAni3{
    0%{
        opacity: 0.5;
        -m-transform:translate(0,0);
    }
    50%{
        opacity: 1;
        -m-transform:translate(10px,-50px);
    }
    100%{
        opacity: 0;
        -m-transform:translate(20px,-100px);
    }
}
@-o-keyframes lightAni3{
    0%{
        opacity: 0.5;
        -o-transform:translate(0,0);
    }
    50%{
        opacity: 1;
        -o-transform:translate(10px,-50px);
    }
    100%{
        opacity: 0;
        -o-transform:translate(20px,-100px);
    }
}
@keyframes moveAni{
    0%{
        transform:translateY(0);
    }
    100%{
        transform:translateY(-10px);
    }
}
@-webkit-keyframes moveAni{
    0%{
        -webkit-transform:translateY(0);
    }
    100%{
        -webkit-transform:translateY(-10px);
    }
}
@-moz-keyframes moveAni{
    0%{
        -moz-transform:translateY(0);
    }
    100%{
        -moz-transform:translateY(-10px);
    }
}
@-m-keyframes moveAni{
    0%{
        -m-transform:translateY(0);
    }
    100%{
        -m-transform:translateY(-10px);
    }
}
@-o-keyframes moveAni{
    0%{
        -o-transform:translateY(0);
    }
    100%{
        -o-transform:translateY(-10px);
    }
}

</style>
</head>

<body>
<ul class="nav">
<li class="nav-2">
                    <a  href="#" class="on hover" rel="0">
                        <span>愿望墙 BLESSING WALL</span>
                        <em></em>
                        <i class="i-1"></i>
                        <i class="i-2"></i>
                        <i class="i-3"></i>
                        <i class="i-4"></i>
                        <i class="i-5"></i>
                        <i class="i-6"></i>
                        <i class="i-7"></i>
                    </a>
                </li>
                </ul>
</body>
</html>

相关文章

  • css3漂浮动画

  • 网页高级知识点（三）

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画，您需要学习 @keyframes ...

  • 08_dayCSS动画

    CSS3新增的功能有：过渡和动画，阴影和圆角 css3过渡动画： css3都有哪些新增的东西 : 过度，动画，阴影...

  • CSS3 动画

    CSS3 动画CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。 ...

  • CSS3 动画

    动画属性 动画（animation）是CSS3新增的属性，动画属性可以为元素创建动画，CSS3以前在网页上实现动画...

  • css3动画

    css3动画 CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的...

  • 纯CSS3绘制的逼真，呆萌，超酷的CSS3动画

    纯CSS3人物行走动画 逼真炫酷CSS3动画 CSS3实在是太强大了，今天分享的CSS3动画非常神奇，它可以模拟人...

  • 关于js动画和css3动画的差异性你了解吗？请简单谈一下

    css3动画：css3之后添加了transform动画计算函数，所以实现动画更为简单方便，并且transform矩...

  • 过度动画

    css3过度动画 css3都有哪些新增的东西 : 过度，动画，阴影，圆角； transition ： width ...

网友评论

    本文标题：css3漂浮动画

    本文链接：https://www.haomeiwen.com/subject/xmlhqctx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    css3

    关于我们|服务条款|联系我们|css3漂浮动画|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！