澳门新浦京电子游戏非常震撼的纯CSS3人物行走动画

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

澳门新浦京电子游戏 1

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

这是一个基于HTML5的齿轮动画特效,我们将齿轮转动的物理学原理,转换为HTML5代码,在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成,这对齿轮传动的算法要求就大大提高了,而且我们并没有用JavaScript,而是纯CSS3实现的。

HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍。今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应用的源码整理了一下发给大家。

今天分享给大家的是一个用纯CSS3实现的人物行走动画,在没有使用JavaScript的情况下,用CSS3技术将人物行走的姿态描绘得非常逼真。其实动画实现的原理也是比较简单的,将人物行走时的状态分割成多张图片,然后利用CSS3的动画属性将这些图片串联起来形成人物行走动画效果。

澳门新浦京电子游戏 2

1、纯CSS3实现打火机火焰动画

澳门新浦京电子游戏 3

在线演示源码下载

这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效。另外要说明的是,整个动画都是利用纯CSS3实现的,没有一行JS代码,小伙伴们,这个CSS3动画是不是很酷?

在线演示源码下载

HTML代码

<div id="level">
    <div id="content">
        <div id="gears">
            <div id="gears-static"></div>
            <div id="gear-system-1">
                <div class="shadow" id="shadow15"></div>
                <div id="gear15"></div>
                <div class="shadow" id="shadow14"></div>
                <div id="gear14"></div>
                <div class="shadow" id="shadow13"></div>
                <div id="gear13"></div>
            </div>
            <div id="gear-system-2">
                <div class="shadow" id="shadow10"></div>
                <div id="gear10"></div>
                <div class="shadow" id="shadow3"></div>
                <div id="gear3"></div>
            </div>
            <div id="gear-system-3">
                <div class="shadow" id="shadow9"></div>
                <div id="gear9"></div>
                <div class="shadow" id="shadow7"></div>
                <div id="gear7"></div>
            </div>
            <div id="gear-system-4">
                <div class="shadow" id="shadow6"></div>
                <div id="gear6"></div>
                <div id="gear4"></div>
            </div>
            <div id="gear-system-5">
                <div class="shadow" id="shadow12"></div>
                <div id="gear12"></div>
                <div class="shadow" id="shadow11"></div>
                <div id="gear11"></div>
                <div class="shadow" id="shadow8"></div>
                <div id="gear8"></div>
            </div>
            <div class="shadow" id="shadow1"></div>
            <div id="gear1"></div>
            <div id="gear-system-6">
                <div class="shadow" id="shadow5"></div>
                <div id="gear5"></div>
                <div id="gear2"></div>
            </div>
            <div class="shadow" id="shadowweight"></div>
            <div id="chain-circle"></div>
            <div id="chain"></div>
            <div id="weight"></div>
        </div>
    </div>
</div>

在线演示 / 源码下载

HTML代码

<div id="canvas">
        <div class="sky">
            <div class="cloud-1"></div>
            <div class="cloud-2"></div>
            <div class="cloud-3"></div>
            <div class="cloud-4"></div>
            <div class="cloud-5"></div>
            <div class="cloud-6"></div>
            <div class="cloud-7"></div>
            <div class="cloud-8"></div>
        </div>
        <div class="horizon"></div>
        <div class="ground">
            <div class="sign-best"></div>
            <div class="sign-no-js"></div>
            <div class="sign-lots-of-divs"></div>
            <div class="sign-all-css"></div>
        </div>
        <!-- skeleton and shadow -->
        <div class="shadow"></div>
        <div class="me">

            <div class="torso">
                <div class="left leg">
                    <div class="left thigh">
                        <div class="left shin">
                            <div class="left foot">
                                <div class="left toes"></div>
                            </div>
                        </div>
                    </div>
                </div>
 <!-- left leg -->

                <div class="right leg">
                    <div class="right thigh">
                        <div class="right shin">
                            <div class="right foot">
                                <div class="right toes"></div>
                            </div>
                        </div>
                    </div>
                </div>
 <!-- right leg -->

                <div class="left arm">
                    <div class="left bicep">
                        <div class="left forearm"></div>
                    </div>
                </div>
 <!-- left arm -->

                <div class="right arm">
                    <div class="right bicep">
                        <div class="right forearm"></div>
                    </div>
                </div>
 <!-- right arm -->

            </div>
 <!-- torso -->
        </div>
 <!-- me -->

        <div class="overlay"></div>
    </div>

CSS代码

#level{
    width:100%;
    height:1px;
    position:absolute;
    top:50%;
}
#content{
    text-align:center;
    margin-top:-327px;
}
#gears{
    width:478px;
    height:655px;
    position:relative;
    display:inline-block;
    vertical-align:middle;
}
#gears-static{
    background:url(FgFnjks.png) no-repeat -363px -903px;
    width:329px;
    height:602px;
    position:absolute;
    bottom:5px;
    right:0px;
    opacity:0.4;
}
#title{
    vertical-align:middle;
    color:#9EB7B5;
    width:43%;
    display:inline-block;
}
#title h1{
    font-family: 'PTSansNarrowBold', sans-serif;
    font-size:3.6em;
    text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;
}
#title p{
    font-family: sans-serif;
    font-size:1.2em;
    line-height:148%;
    text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px;
}

.shadow{
    -webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
    -moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
    box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
}

/*gear-system-1*/
#gear15{
    background: url(FgFnjks.png) no-repeat 0 -993px;
    width: 321px;
    height: 321px;
    position:absolute;
    left:45px;
    top:179px;

    -webkit-animation: rotate-back 24000ms linear infinite;
    -moz-animation: rotate-back 24000ms linear infinite;
    -ms-animation: rotate-back 24000ms linear infinite;
    animation: rotate-back 24000ms linear infinite;
}
#shadow15{
    width:306px;
    height:306px;
    -webkit-border-radius:153px;
    -moz-border-radius:153px;
    border-radius:153px;
    position:absolute;
    left:52px;
    top:186px;
}
#gear14{
    background: url(FgFnjks.png) no-repeat 0 -856px;
    width: 87px;
    height: 87px;
    position:absolute;
    left:162px;
    top:296px;
}
#shadow14{
    width:70px;
    height:70px;
    -webkit-border-radius:35px;
    -moz-border-radius:35px;
    border-radius:35px;
    position:absolute;
    left:171px;
    top:304px;
}
#gear13{
    background: url(FgFnjks.png) no-repeat 0 -744px;
    width: 62px;
    height: 62px;
    position:absolute;
    left:174px;
    top:309px;

    -webkit-animation: rotate 8000ms linear infinite;
    -moz-animation: rotate 8000ms linear infinite;
    -ms-animation: rotate 8000ms linear infinite;
    animation: rotate 8000ms linear infinite;
}
#shadow13{
    width:36px;
    height:36px;
    -webkit-border-radius:18px;
    -moz-border-radius:18px;
    border-radius:18px;
    position:absolute;
    left:187px;
    top:322px;
}

/*gear-system-2*/
#gear10{
    background: url(FgFnjks.png) no-repeat 0 -184px;
    width: 122px;
    height: 122px;
    position:absolute;
    left:175px;
    top:0;

    -webkit-animation: rotate-back 8000ms linear infinite;
    -moz-animation: rotate-back 8000ms linear infinite;
    -ms-animation: rotate-back 8000ms linear infinite;
    animation: rotate-back 8000ms linear infinite;
}
#shadow10{
    width:86px;
    height:86px;
    -webkit-border-radius:43px;
    -moz-border-radius:43px;
    border-radius:43px;
    position:absolute;
    left:193px;
    top:18px;
}
#gear3{
    background: url(FgFnjks.png) no-repeat 0 -1493px;
    width: 85px;
    height: 84px;
    position:absolute;
    left:194px;
    top:19px;

    -webkit-animation: rotate 10000ms linear infinite;
    -moz-animation: rotate 10000ms linear infinite;
    -ms-animation: rotate 10000ms linear infinite;
    animation: rotate 10000ms linear infinite;
}
#shadow3{
    width:60px;
    height:60px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
    position:absolute;
    left:206px;
    top:31px;
}

/*gear-system-3*/
#gear9{
    background: url(FgFnjks.png) no-repeat -371px -280px;
    width: 234px;
    height: 234px;
    position:absolute;
    left:197px;
    top:96px;

    -webkit-animation: rotate 12000ms linear infinite;
    -moz-animation: rotate 12000ms linear infinite;
    -ms-animation: rotate 12000ms linear infinite;
    animation: rotate 12000ms linear infinite;
}
#shadow9{
    width:200px;
    height:200px;
    -webkit-border-radius:100px;
    -moz-border-radius:100px;
    border-radius:100px;
    position:absolute;
    left:214px;
    top:113px;
}
#gear7{
    background: url(FgFnjks.png) no-repeat -371px 0;
    width: 108px;
    height: 108px;
    position:absolute;
    left:260px;
    top:159px;

    -webkit-animation: rotate-back 10000ms linear infinite;
    -moz-animation: rotate-back 10000ms linear infinite;
    -ms-animation: rotate-back 10000ms linear infinite;
    animation: rotate-back 10000ms linear infinite;
}
#shadow7{
    width:76px;
    height:76px;
    -webkit-border-radius:38px;
    -moz-border-radius: 38px;
    border-radius: 38px;
    position:absolute;
    left:276px;
    top:175px;
}

/*gear-system-4*/
#gear6{
    background: url(FgFnjks.png) no-repeat 0 -1931px;
    width: 134px;
    height: 134px;
    position:absolute;
    left:305px;
    bottom:212px;

    -webkit-animation: rotate-back 10000ms linear infinite;
    -moz-animation: rotate-back 10000ms linear infinite;
    -ms-animation: rotate-back 10000ms linear infinite;
    animation: rotate-back 10000ms linear infinite;
}
#shadow6{
    width:98px;
    height:98px;
    -webkit-border-radius:49px;
    -moz-border-radius: 49px;
    border-radius: 49px;
    position:absolute;
    left:323px;
    bottom:230px;
}
#gear4{
    background: url(FgFnjks.png) no-repeat 0 -1627px;
    width: 69px;
    height: 69px;
    position:absolute;
    left:337px;
    bottom:245px;

    -webkit-animation: rotate-back 10000ms linear infinite;
    -moz-animation: rotate-back 10000ms linear infinite;
    -ms-animation: rotate-back 10000ms linear infinite;
    animation: rotate-back 10000ms linear infinite;
}

/*gear-system-5*/
#gear12{
    background: url(FgFnjks.png) no-repeat 0 -530px;
    width: 164px;
    height: 164px;
    position:absolute;
    left:208px;
    bottom:85px;

    -webkit-animation: rotate 8000ms linear infinite;
    -moz-animation: rotate 8000ms linear infinite;
    -ms-animation: rotate 8000ms linear infinite;
    animation: rotate 8000ms linear infinite;
}
#shadow12{
    width:124px;
    height:124px;
    -webkit-border-radius:62px;
    -moz-border-radius:62px;
    border-radius:62px;
    position:absolute;
    left:225px;
    bottom:107px;
}
#gear11{
    background: url(FgFnjks.png) no-repeat 0 -356px;
    width: 125px;
    height: 124px;
    position:absolute;
    left:228px;
    bottom:105px;

    -webkit-animation: rotate-back 10000ms linear infinite;
    -moz-animation: rotate-back 10000ms linear infinite;
    -ms-animation: rotate-back 10000ms linear infinite;
    animation: rotate-back 10000ms linear infinite;
}
#shadow11{
    width:88px;
    height:88px;
    -webkit-border-radius:44px;
    -moz-border-radius:44px;
    border-radius:44px;
    position:absolute;
    left:247px;
    bottom:123px;
}
#gear8{
    background: url(FgFnjks.png) no-repeat -371px -158px;
    width: 72px;
    height: 72px;
    position:absolute;
    left:254px;
    bottom:131px;

    -webkit-animation: rotate 6000ms linear infinite;
    -moz-animation: rotate 6000ms linear infinite;
    -ms-animation: rotate 6000ms linear infinite;
    animation: rotate 6000ms linear infinite;
}
#shadow8{
    width:42px;
    height:42px;
    -webkit-border-radius:21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    position:absolute;
    left:269px;
    bottom:146px;
}

/*gear1*/
#gear1{
    background: url(FgFnjks.png) no-repeat 0 0;
    width: 135px;
    height: 134px;
    position:absolute;
    left:83px;
    bottom:111px;

    -webkit-animation: rotate-back 10000ms linear infinite;
    -moz-animation: rotate-back 10000ms linear infinite;
    -ms-animation: rotate-back 10000ms linear infinite;
    animation: rotate-back 10000ms linear infinite;
}
#shadow1{
    width:96px;
    height:96px;
    -webkit-border-radius:48px;
    -moz-border-radius:48px;
    border-radius:48px;
    position:absolute;
    left:103px;
    bottom:130px;
}

/*gear-system-6*/
#gear5{
    background: url(FgFnjks.png) no-repeat 0 -1746px;
    width: 134px;
    height: 135px;
    position:absolute;
    left:22px;
    top:108px;

    -webkit-animation: rotate 10000ms linear infinite alternate;
    -moz-animation: rotate 10000ms linear infinite alternate;
    -ms-animation: rotate 10000ms linear infinite alternate;
    animation: rotate 10000ms linear infinite alternate;
}
#shadow5{
    width:96px;
    height:96px;
    -webkit-border-radius:48px;
    -moz-border-radius:48px;
    border-radius:48px;
    position:absolute;
    left:41px;
    top:127px;
}
#gear2{
    background: url(FgFnjks.png) no-repeat 0 -1364px;
    width: 80px;
    height: 79px;
    position:absolute;
    left:49px;
    top:136px;

    -webkit-animation: rotate-back 10000ms linear infinite alternate;
    -moz-animation: rotate-back 10000ms linear infinite alternate;
    -ms-animation: rotate-back 10000ms linear infinite alternate;
    animation: rotate-back 10000ms linear infinite alternate;
}

/*weight*/
#weight{
    background: url(FgFnjks.png) no-repeat -371px -564px;
    width: 34px;
    height: 92px;
    position:absolute;
    left:1px;
    bottom:0;

    -webkit-animation: up 10000ms linear infinite alternate;
    -moz-animation: up 10000ms linear infinite alternate;
    -ms-animation: up 10000ms linear infinite alternate;
    animation: up 10000ms linear infinite alternate;
}
#shadowweight{
    width:10px;
    height:80px;
    position:absolute;
    left:12px;
    bottom:0px;

    -webkit-animation: up 10000ms linear infinite alternate;
    -moz-animation: up 10000ms linear infinite alternate;
    -ms-animation: up 10000ms linear infinite alternate;
    animation: up 10000ms linear infinite alternate;
}

/*chain*/
#chain-circle{
    background: url(FgFnjks.png) no-repeat -371px -706px;
    width:146px;
    height:147px;
    position:absolute;
    left:17px;
    top:102px;

    -webkit-animation: rotate 10000ms linear infinite alternate;
    -moz-animation: rotate 10000ms linear infinite alternate;
    -ms-animation: rotate 10000ms linear infinite alternate;
    animation: rotate 10000ms linear infinite alternate;
}
#chain{
    width:1px;
    height:380px;
    border-left:2px dotted #C8D94A;
    position:absolute;
    left:17px;
    top:175px;
    opacity:0.7;

    -webkit-animation: collapse 10000ms linear infinite alternate;
    -moz-animation: collapse 10000ms linear infinite alternate;
    -ms-animation: collapse 10000ms linear infinite alternate;
    animation: collapse 10000ms linear infinite alternate;
}

/*ANIMATIONS*/
/*rotate*/
@keyframes "rotate" {
 from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
 }
 to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
 }
}

@-moz-keyframes rotate {
 from {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }
}

@-webkit-keyframes "rotate" {
 from {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }
}

@-ms-keyframes "rotate" {
 from {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }
}

@-o-keyframes "rotate" {
 from {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }
}
/*rotate-back*/
@keyframes "rotate-back" {
 from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
 }
 to {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
 }
}

@-moz-keyframes rotate-back {
 from {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -moz-transform: rotate(-360deg);
   transform: rotate(-360deg);
 }
}

@-webkit-keyframes "rotate-back" {
 from {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -webkit-transform: rotate(-360deg);
   transform: rotate(-360deg);
 }
}

@-ms-keyframes "rotate-back" {
 from {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -ms-transform: rotate(-360deg);
   transform: rotate(-360deg);
 }
}

@-o-keyframes "rotate-back" {
 from {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -o-transform: rotate(-360deg);
   transform: rotate(-360deg);
 }
}
/*weight up*/
@keyframes "up" {
 from {
    bottom: 0px;
 }
 to {
    bottom: 340px;
 }
}

@-moz-keyframes up {
 from {
   bottom: 0px;
 }
 to {
   bottom: 340px;
 }
}

@-webkit-keyframes "up" {
 from {
   bottom: 0px;
 }
 to {
   bottom: 340px;
 }
}

@-ms-keyframes "up" {
 from {
   bottom: 0px;
 }
 to {
   bottom: 340px;
 }
}

@-o-keyframes "up" {
 from {
   bottom: 0px;
 }
 to {
   bottom: 340px;
 }
}
/*chain up and down*/
@keyframes "collapse" {
 from {
    height: 387px;
 }
 to {
    height: 48px;
 }
}

@-moz-keyframes collapse {
 from {
   height: 387px;
 }
 to {
   height: 48px;
 }
}

@-webkit-keyframes "collapse" {
 from {
   height: 387px;
 }
 to {
   height: 48px;
 }
}

@-ms-keyframes "collapse" {
 from {
   height: 387px;
 }
 to {
   height: 48px;
 }
}

@-o-keyframes "collapse" {
 from {
   height: 387px;
 }
 to {
   height: 48px;
 }
}

在线演示源码下载

2、HTML5/CSS3图片过滤归类应用 三种过滤动画

基本CSS代码

#canvas {
    height: 600px;
    width: 760px;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

#canvas div {
    position: absolute;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

#canvas:target div:not(.overlay) {
    border: 1px solid black;
}

#canvas:target div.me div{
    background: rgba(255, 255, 255, 0.25);
}

.me {
    top: 50px; left: 350px;
    -webkit-animation-name: me;
    -moz-animation-name: me;
    -ms-animation-name: me;
    -o-animation-name: me;
    animation-name: me;
}

.me, .me div {
    background-repeat: no-repeat;
    -webkit-animation-duration: 1750ms;
    -moz-animation-duration: 1750ms;
    -ms-animation-duration: 1750ms;
    -o-animation-duration: 1750ms;
    animation-duration: 1750ms;
}

.torso {
    width: 86px; height: 275px;
    background-image: url(images/me/torso.png);
}

.arm {
    left: 12px;
    -webkit-transform-origin: 20px 10px;
    -moz-transform-origin: 20px 10px;
    -ms-transform-origin: 20px 10px;
    -o-transform-origin: 20px 10px;
    transform-origin: 20px 10px;
}

.right.arm {
    top: 93px;
    -webkit-animation-name: right-bicep;
    -moz-animation-name: right-bicep;
    -ms-animation-name: right-bicep;
    -o-animation-name: right-bicep;
    animation-name: right-bicep;
}
.left.arm {
    top: 87px;
    -webkit-animation-name: left-bicep;
    -moz-animation-name: left-bicep;
    -ms-animation-name: left-bicep;
    -o-animation-name: left-bicep;
    animation-name: left-bicep;
}

.bicep {
    height: 124px; width: 51px;
}

.right.bicep { background-image: url(images/me/right-bicep.png); }
.left.bicep { background-image: url(images/me/left-bicep.png); }

.forearm {
    top: 108px; left: 14px;
    width: 36px; height: 121px;
    -webkit-transform-origin: 3px 7px;
    -moz-transform-origin: 3px 7px;
    -ms-transform-origin: 3px 7px;
    -o-transform-origin: 3px 7px;
    transform-origin: 3px 7px;
}

.right.forearm {
    background-image: url(images/me/right-forearm.png);
    -webkit-animation-name: right-forearm;
    -moz-animation-name: right-forearm;
    -ms-animation-name: right-forearm;
    -o-animation-name: right-forearm;
    animation-name: right-forearm;
}

.left.forearm {
    background-image: url(images/me/left-forearm.png);
    -webkit-animation-name: left-forearm;
    -moz-animation-name: left-forearm;
    -ms-animation-name: left-forearm;
    -o-animation-name: left-forearm;
    animation-name: left-forearm;
}

.leg {
    left: 6px;
    -webkit-transform-origin: 30px 20px;
    -moz-transform-origin: 30px 20px;
    -ms-transform-origin: 30px 20px;
    -o-transform-origin: 30px 20px;
    transform-origin: 30px 20px;
    -webkit-animation-name: thigh;
    -moz-animation-name: thigh;
    -ms-animation-name: thigh;
    -o-animation-name: thigh;
    animation-name: thigh;
}

.right.leg {
    top: 235px;
    -webkit-animation-name: right-thigh;
    -moz-animation-name: right-thigh;
    -ms-animation-name: right-thigh;
    -o-animation-name: right-thigh;
    animation-name: right-thigh;
}

.left.leg {
    top: 225px;
    -webkit-animation-name: left-thigh;
    -moz-animation-name: left-thigh;
    -ms-animation-name: left-thigh;
    -o-animation-name: left-thigh;
    animation-name: left-thigh;
}

.thigh {
    width: 70px; height: 145px;
}

.left.thigh { background-image: url(images/me/left-thigh.png); }
.right.thigh { background-image: url(images/me/right-thigh.png); }

.shin {
    top: 115px;
    width: 50px; height: 170px;
    background-image: url(images/me/shin.png);
    -webkit-transform-origin: 30px 25px;
    -moz-transform-origin: 30px 25px;
    -ms-transform-origin: 30px 25px;
    -o-transform-origin: 30px 25px;
    transform-origin: 30px 25px;
}

.right.shin {
    -webkit-animation-name: right-shin;
    -moz-animation-name: right-shin;
    -ms-animation-name: right-shin;
    -o-animation-name: right-shin;
    animation-name: right-shin;
}
.left.shin {
    -webkit-animation-name: left-shin;
    -moz-animation-name: left-shin;
    -ms-animation-name: left-shin;
    -o-animation-name: left-shin;
    animation-name: left-shin;
}

.foot {
    top: 155px; left: 2px;
    width: 67px; height: 34px;
    background-image: url(images/me/foot.png);
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
}

.right.foot {
    -webkit-animation-name: right-foot;
    -moz-animation-name: right-foot;
    -ms-animation-name: right-foot;
    -o-animation-name: right-foot;
    animation-name: right-foot;
}
.left.foot {
    -webkit-animation-name: left-foot;
    -moz-animation-name: left-foot;
    -ms-animation-name: left-foot;
    -o-animation-name: left-foot;
    animation-name: left-foot;
}

.toes {
    top: 9px; left: 66px;
    width: 28px; height: 25px;
    background-image: url(images/me/toes.png);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

.right.toes {
    -webkit-animation-name: right-toes;
    -moz-animation-name: right-toes;
    -ms-animation-name: right-toes;
    -o-animation-name: right-toes;
    animation-name: right-toes;
}
.left.toes {
    -webkit-animation-name: left-toes;
    -moz-animation-name: left-toes;
    -ms-animation-name: left-toes;
    -o-animation-name: left-toes;
    animation-name: left-toes;
}

.shadow {
    width: 200px; height: 70px;
    left: 270px; bottom: 5px;
    background-image: url(images/misc/shadow.png);
    -webkit-animation-name: shadow;
    -moz-animation-name: shadow;
    -ms-animation-name: shadow;
    -o-animation-name: shadow;
    animation-name: shadow;
}

/* setting proper z-indexes so that limbs show up correctly */

div.right.arm { z-index: 1; }
div.left.arm { z-index: -3; }
div.arm > div.bicep > div.forearm { z-index: -1; }

div.right.leg { z-index: -1; }
div.left.leg { z-index: -2; }
div.leg > div.thigh > div.shin { z-index: -1; }

.overlay {
    width: 100%; height: 100%;
    background: url(images/misc/gradient-left.png) repeat-y top left,
                url(images/misc/gradient-right.png) repeat-y top right;
}

.sky div {
    background-repeat: no-repeat;
    -webkit-animation-name: prop-1200;
    -moz-animation-name: prop-1200;
    -ms-animation-name: prop-1200;
    -o-animation-name: prop-1200;
    animation-name: prop-1200;
}

.cloud-1, .cloud-2 {
    width: 82px; height: 90px;
    background-image: url(images/clouds/1.png);
    -webkit-animation-duration: 120s;
    -moz-animation-duration: 120s;
    -ms-animation-duration: 120s;
    -o-animation-duration: 120s;
    animation-duration: 120s;
}

.cloud-3, .cloud-4 {
    top: 70px;
    width: 159px; height: 90px;
    background-image: url(images/clouds/2.png);
    -webkit-animation-duration: 80s;
    -moz-animation-duration: 80s;
    -ms-animation-duration: 80s;
    -o-animation-duration: 80s;
    animation-duration: 80s;
}

.cloud-5, .cloud-6 {
    top: 30px;
    width: 287px; height: 62px;
    background-image: url(images/clouds/3.png);
    -webkit-animation-duration: 140s;
    -moz-animation-duration: 140s;
    -ms-animation-duration: 140s;
    -o-animation-duration: 140s;
    animation-duration: 140s;
}

.cloud-7, .cloud-8 {
    top: 100px;
    width: 94px; height: 81px;
    background-image: url(images/clouds/4.png);
    -webkit-animation-duration: 90s;
    -moz-animation-duration: 90s;
    -ms-animation-duration: 90s;
    -o-animation-duration: 90s;
    animation-duration: 90s;
}

.cloud-1 { left: 0px; }
.cloud-2 { left: 1200px; }

.cloud-3 { left: 250px; }
.cloud-4 { left: 1450px; }

.cloud-5 { left: 500px; }
.cloud-6 { left: 1700px; }

.cloud-7 { left: 950px; }
.cloud-8 { left: 2150px; }

.horizon {
    top: 350px;
    width: 1800px; height: 50px;
    background: url(images/misc/horizon.png) repeat-x;
    -webkit-animation-name: prop-600;
    -moz-animation-name: prop-600;
    -ms-animation-name: prop-600;
    -o-animation-name: prop-600;
    animation-name: prop-600;
    -webkit-animation-duration: 40s;
    -moz-animation-duration: 40s;
    -ms-animation-duration: 40s;
    -o-animation-duration: 40s;
    animation-duration: 40s;
}

.ground div {
    background-repeat: no-repeat;
    -webkit-animation-name: prop-2000;
    -moz-animation-name: prop-2000;
    -ms-animation-name: prop-2000;
    -o-animation-name: prop-2000;
    animation-name: prop-2000;
}

.sign-all-css {
    width: 160px; height: 188px;
    top: 325px; left: 1600px;
    background-image: url(images/signs/all-css.png);
    -webkit-animation-duration: 35s;
    -moz-animation-duration: 35s;
    -ms-animation-duration: 35s;
    -o-animation-duration: 35s;
    animation-duration: 35s;
}

.sign-lots-of-divs {
    width: 102px; height: 120px;
    top: 345px; left: 1150px;
    background-image: url(images/signs/lots-of-divs.png);
    -webkit-animation-duration: 56s;
    -moz-animation-duration: 56s;
    -ms-animation-duration: 56s;
    -o-animation-duration: 56s;
    animation-duration: 56s;
}

.sign-no-js {
    width: 65px; height: 77px;
    top: 348px; left: 1150px;
    background-image: url(images/signs/no-js.png);
    -webkit-animation-duration: 71s;
    -moz-animation-duration: 71s;
    -ms-animation-duration: 71s;
    -o-animation-duration: 71s;
    animation-duration: 71s;
}

.sign-best {
    width: 43px; height: 50px;
    top: 350px; left: 1000px;
    background-image: url(images/signs/best.png);
    -webkit-animation-duration: 95s;
    -moz-animation-duration: 95s;
    -ms-animation-duration: 95s;
    -o-animation-duration: 95s;
    animation-duration: 95s;
}

今天我们要来分享一款基于HTML5和CSS3的图片特效,它可以很方便地将各种图片进行归类和过滤,在归类过滤的过程中,图片有非常酷的动画效果,并且,结合CSS3的特性,这里一共提供了3种炫酷的图片过滤动画。

CSS动画相关代码

@-webkit-keyframes me {
    0% { -webkit-transform:   rotate(5deg) translate( 5px,   0px); }
    25% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }
    50% { -webkit-transform:  rotate(5deg) translate( 5px,   0px); }
    75% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }
    100% { -webkit-transform: rotate(5deg) translate( 5px,   0px); }
}

@-webkit-keyframes right-bicep {
    0%   { -webkit-transform: rotate(26deg); }
    50%  { -webkit-transform: rotate(-20deg); }
    100% { -webkit-transform: rotate(26deg); }
}

@-webkit-keyframes left-bicep {
    0%   { -webkit-transform: rotate(-20deg); }
    50%  { -webkit-transform: rotate(26deg); }
    100% { -webkit-transform: rotate(-20deg); }
}

@-webkit-keyframes right-forearm {
    0%   { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-45deg); }
    100% { -webkit-transform: rotate(-10deg); }
}

@-webkit-keyframes left-forearm {
    0%   { -webkit-transform: rotate(-45deg); }
    50%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-45deg); }
}

@-webkit-keyframes right-thigh {
    0%   { -webkit-transform: rotate(-45deg); }
    50%  { -webkit-transform: rotate(10deg); }
    100% { -webkit-transform: rotate(-45deg); }
}

@-webkit-keyframes left-thigh {
    0%   { -webkit-transform: rotate(10deg); }
    50%  { -webkit-transform: rotate(-45deg); }
    100% { -webkit-transform: rotate(10deg); }
}

@-webkit-keyframes right-shin {
    0%   { -webkit-transform: rotate(30deg); }
    25%  { -webkit-transform: rotate(20deg); }
    50%  { -webkit-transform: rotate(20deg); }
    75%  { -webkit-transform: rotate(85deg); }
    100% { -webkit-transform: rotate(30deg); }
}

@-webkit-keyframes left-shin {
    0%   { -webkit-transform: rotate(20deg); }
    25%  { -webkit-transform: rotate(85deg); }
    50%  { -webkit-transform: rotate(30deg); }
    75%  { -webkit-transform: rotate(20deg); }
    100% { -webkit-transform: rotate(20deg); }
}

@-webkit-keyframes right-foot {
    0%   { -webkit-transform: rotate(-5deg); }
    25%  { -webkit-transform: rotate(-7deg); }
    50%  { -webkit-transform: rotate(-16deg); }
    75%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-5deg); }
}

@-webkit-keyframes left-foot {
    0%   { -webkit-transform: rotate(-16deg); }
    25%  { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-5deg); }
    75%  { -webkit-transform: rotate(-7deg); }
    100% { -webkit-transform: rotate(-16deg); }
}

@-webkit-keyframes right-toes {
    0%   { -webkit-transform: rotate(0deg); }
    25%  { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-10deg); }
    75%  { -webkit-transform: rotate(-25deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes left-toes {
    0%   { -webkit-transform: rotate(-10deg); }
    25%  { -webkit-transform: rotate(-25deg); }
    50%  { -webkit-transform: rotate(0deg); }
    75%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-10deg); }
}

@-webkit-keyframes shadow {
    0%   { opacity: 1; }
    25%  { opacity: 0.75; }
    50%  { opacity: 1; }
    75%  { opacity: 0.75; }
    100% { opacity: 1; }
}

@-webkit-keyframes prop-600 {
    0%   { -webkit-transform: translateX(0px); }
    100% { -webkit-transform: translateX(-600px); }
}

@-webkit-keyframes prop-1200 {
    0%   { -webkit-transform: translateX(0px); }
    100% { -webkit-transform: translateX(-1200px); }
}

@-webkit-keyframes prop-2000 {
    0%   { -webkit-transform: translateX(0px); }
    100% { -webkit-transform: translateX(-2000px); }
}

在线演示源码下载

在线演示 / 源码下载

3、HTML5视频播放器 超酷播放器UI界面

今天要分享一款UI界面非常出色HTML5视频播放器,播放器具备播放/暂停、音量调节、全拼播放等功能,应该也算是比较完善了的。我们也可以看看之前发布过的HTML5视频播放器,像HTML5播放器API集合
轻松学会HTML5播放器开发,也非常酷。

在线演示 / 源码下载

4、纯CSS3 Tooltip提示 阴影边框飞入动画

Tooltip可以既可以节省网页宝贵的空间,而且又可以让用户快速得到想要的信息,今天要分享的这款CSS3
Tooltip外观非常漂亮,而且是纯CSS3实现,Tooltip的边框设置了阴影特效,而且Tooltip提示框也有飞入的动画效果,是一款挺酷的CSS3
Tooltip应用。

在线演示 / 源码下载

5、CSS3火焰效果文字特效

记得我们以前分享过一款很酷的CSS3火焰文字特效,把它挖出来看看:HTML5火焰文字特效。今天我们要来再分享一款CSS3火焰效果的文字特效,和之前那个文字特效不同的是,这个是静态的,没有动画的效果,不过也非常酷。

在线演示 / 源码下载

6、CSS3弹簧线圈动画

今天我们要来分享一款纯CSS3实现的动画特效,这款CSS3动画效果是模拟弹簧线圈的特性。它可以不停的转动和扭动弹簧线圈,让整个弹簧动画非常逼真和动感。另外由于弹簧被扭动,所以从不同的角度线圈的颜色会有细微的变化。

在线演示 / 源码下载

7、150多个纯CSS3动画SVG图标

CSS3真的很强大,但SVG的实力也不容小觑,今天我们要将它们两个有机结合,分享给大家150多个非常有趣的纯CSS3动画SVG图标。这150个SVG图标中,都拥有鼠标滑过的动画特效,有的是阴影特效,也有的是动感的动画,这些图标真的很酷。

在线演示 / 源码下载

8、HTML5 SVG多折线图表 图表可缩放显示

今天我们要来介绍一款基于HTML5
SVG的折线图表,该款图片支持多条折线重叠在一起显示,可以方便地比较不同颜色折线的数据。另外图表还有一个特点,就是可以缩放和移动,这大大方便了用户浏览图表数据,非常人性化。更多图表应用,请移步至HTML5图表栏目。

在线演示 / 源码下载

9、基于Bootstrap的CSS3下拉菜单 菜单3D立体效果

Bootstrap是Twitter推出的一个用于前端开发的开源工具包,基于Bootstrap框架,我们可以方便地制作漂亮的UI界面。今天要分享的这款CSS3下拉菜单就是基于Bootstrap的,下拉子菜单的外观也非常不错,同时菜单也具有3D立体的视觉效果。

在线演示 / 源码下载

10、纯CSS3实现自行车动画 非常逼真

还记得那款纯CSS3实现的小猪、老鼠、小牛吗,简直是太形象生动了。这次我们要来分享一款利用纯CSS3实现的自行车动画,与前面那款不同的是,这个自行车是可以运动的,就像有一个人在骑车一样,车轮也会转动,非常逼真的一款动画效果。

在线演示 / 源码下载

以上就是10款效果惊艳的HTML5应用和源码,欢迎收藏分享。

发表评论

电子邮件地址不会被公开。 必填项已用*标注