zoukankan      html  css  js  c++  java
  • css3动画特效:纯css3制作win8加载动画特效

    Windows 8

     
    完整效果如上图;这个里面可能是css冲突,喜欢的可以自己去体征一下;
     
    css特效代码:
    <style type="text/css">
    .hnyei{margin: 0 auto; width:600px; height:400px; background-color: #90da15; }
    .wrapp{position: absolute;    top: 25%;    left: 50%;    width: 600px;    height: 300px;    margin: -150px 0 0 -300px;
        -webkit-perspective: 30px;
        -webkit-transform: translateX(0px);
        -webkit-animation: wrapp 400ms 800ms ease-in forwards;
        -moz-perspective: 30px;
        -moz-transform: translateX(0px);
        -moz-animation: wrapp 400ms 800ms ease-in forwards;
        -ms-perspective: 30px;
        -ms-transform: translateX(0px);
        -ms-animation: wrapp 400ms 800ms ease-in forwards;
        perspective: 30px;
        transform: translateX(0px);
        animation: wrapp 400ms 800ms ease-in forwards;
    }
    .text{
        position: absolute;top: 50%;left: 50%;width: 0px;height: 60px;    margin: -30px 0 0 -160px;overflow: hidden;
        -webkit-transform: translateX(0px);
        -webkit-animation: text 400ms 800ms linear forwards;
        -moz-transform: translateX(0px);
        -moz-animation: text 400ms 800ms linear forwards;
        -ms-transform: translateX(0px);
        -ms-animation: text 400ms 800ms linear forwards;
        transform: translateX(0px);
        animation: text 400ms 800ms linear forwards;
    }
    h1{float: right;font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
        font-weight: normal;color: #fff;padding: 0;margin: 0;width: 320px;height: 60px;font-size: 60px;line-height: 60px;
    }
    .logo{position: absolute;    top: 50%; left: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px;
        background-color: #fff;
        -webkit-transform: translateX(0px) rotateY(10deg);
        -webkit-animation: logo 500ms 300ms ease-out forwards;
        -moz-transform: translateX(0px) rotateY(10deg);
        -moz-animation: logo 500ms 300ms ease-out forwards;
        -ms-transform: translateX(0px) rotateY(10deg);
        -ms-animation: logo 500ms 300ms ease-out forwards;
        transform: translateX(0px) rotateY(10deg);
        animation: logo 500ms 300ms ease-out forwards;
    }
    .logo .top-left{position: absolute;top: 0;left: 0;width: 44px;height: 44px;border-right: solid 2px #90da15;border-bottom: solid 2px #90da15;}
    .logo .bottom-right{position: absolute;    bottom: 0;    right: 0;    width: 44px;    height: 44px;    border-left: solid 2px #90da15;    border-top: solid 2px #90da15;}
    @-webkit-keyframes logo {
        from {-webkit-transform:  translateX(0px) rotateY(10deg);}
        to {-webkit-transform:  translateX(0px) rotateY(-10deg);}
    }
    @-webkit-keyframes text {
        from {width: 0px;-webkit-transform: translateX(0px);}
        60%{width: 0px;}
        to {width: 320px;-webkit-transform: translateX(240px);}
    }
    @-webkit-keyframes wrapp {
        from {-webkit-transform: translateX(0px);}
        to {-webkit-transform: translateX(-200px);}
    }
    @-moz-keyframes logo {
        from {-moz-transform:  translateX(0px) rotateY(10deg);}
        to {-moz-transform:  translateX(0px) rotateY(-10deg);}
    }
    @-moz-keyframes text {
        from {width: 0px;-moz-transform: translateX(0px);}
        60%{width: 0px;}
        to {width: 320px;-moz-transform: translateX(240px);}
    }
    @-moz-keyframes wrapp {
        from {-moz-transform: translateX(0px);}
        to {-moz-transform: translateX(-200px);}
    }
    
    @-ms-keyframes logo {
        from {-ms-transform:  translateX(0px) rotateY(10deg);}
        to {-ms-transform:  translateX(0px) rotateY(-10deg);}
    }
    @-ms-keyframes text {
        from {width: 0px;-ms-transform: translateX(0px);}
        60%{width: 0px;}
        to {width: 320px;-ms-transform: translateX(240px);}
    }
    @-ms-keyframes wrapp {
        from {-ms-transform: translateX(0px);}
        to {-ms-transform: translateX(-200px);}
    }
    @keyframes logo {
        from {transform:  translateX(0px) rotateY(10deg);}
        to {transform:  translateX(0px) rotateY(-10deg);}
    }
    @keyframes text {
        from {width: 0px;transform: translateX(0px);}
        60%{width: 0px;}
        to {width: 320px;transform: translateX(240px);}
    }
    @keyframes wrapp {
        from {transform: translateX(0px);}
        to {transform: translateX(-200px);}
    }
    </style>

    Html 部分:

    <div class="hnyei">
        <div class="wrapp">
            <div class="text">
                <h1>Windows 8</h1>
            </div>
            <div class="logo">
                <span class="top-left"></span>
                <span class="bottom-right"></span>
            </div>
        </div>
    </div>
  • 相关阅读:
    《人件》读书笔记3
    《人件》读书笔记2
    《人件》读书笔记1
    《编程珠玑》读书笔记3
    《编程珠玑》读书笔记2
    学习进度报告2021/4/10
    《编程珠玑》读书笔记1
    学习进度报告2021/4/9
    学习进度报告2021/4/8
    关于软件体系架构质量属性的科技小论文
  • 原文地址:https://www.cnblogs.com/hnyei/p/4621115.html
Copyright © 2011-2022 走看看