登录  /  注册

纯css3实现的win8加载动画_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:52:40
原创
1171人浏览过

今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图:

在线预览   源码下载

实现的代码。

html代码:

  <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>
登录后复制

css3代码:

body{    margin: 0;    padding: 0;    background-color: #90da15;}.wrapp{    position: absolute;    top: 50%;    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);    }}
登录后复制

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号