HTML5模拟齿轮动画

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

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

10款效果惊艳的HTML5应用和源码,10款html5

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

利用HTML5可以绘制很多静态的图像,也可以制作一些炫酷的动画,本文分享了8个利用HTML5和CSS3实现的动画演示,同时也分享了源代码供大家下载参考。

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

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

奥门新浦京官方网站 1

在线演示

源码下载

奥门新浦京官方网站 2

1、HTML5 3D点阵列波浪翻滚动画

这个HTML5 Canvas动画非常壮观,给人一种破浪起伏的视觉效果。

奥门新浦京官方网站 3

在线演示 
   
  源码下载

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

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

奥门新浦京官方网站 4

在线演示

奥门新浦京官方网站,源码下载

在线演示源码下载

2、纯CSS3实现发光开关切换按钮

这款按钮非常有个性,它的外观酷似以前老式的点灯开关,但是由于其黑色的背景,让整个按钮给人发光的效果。

奥门新浦京官方网站 5

在线演示 
   
  源码下载

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

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

奥门新浦京官方网站 6

在线演示

源码下载

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>

3、纯CSS3绘制的火龙图像

这又是一款用纯CSS3绘制的动画特效,这次是一个纯CSS3绘制的火龙图像,整条龙没有使用一张图片,完全利用了CSS3的特性。小火龙的样子还是挺逼真的,大家觉得呢?

奥门新浦京官方网站 7

在线演示 
      源码下载

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

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

奥门新浦京官方网站 8

在线演示

源码下载

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;
 }
}

在线演示源码下载

4、纯CSS3天气动画图标

这是一款用纯CSS3绘制的动画图标,它描述了各种天气情况,类似天气预报一样。

奥门新浦京官方网站 9

在线演示 
      源码下载

5、CSS3火焰效果文字特效

今天我们要来再分享一款CSS3火焰效果的文字特效,和之前那个文字特效不同的是,这个是静态的,没有动画的效果,不过也非常酷。

奥门新浦京官方网站 10

在线演示

源码下载

5、纯CSS3实现人物摇头动画

这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分陶醉的样子,周围还会出现跳动的音符动画。

奥门新浦京官方网站 11

在线演示 
   
  源码下载

6、CSS3弹簧线圈动画

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

奥门新浦京官方网站 12

在线演示

源码下载

6、纯CSS3实现3D效果iPhone 6动画

这款纯CSS3实现的iPhone 6无论从哪一个角度看都是相当的逼真。

奥门新浦京官方网站 13

在线演示     
  源码下载

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

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

奥门新浦京官方网站 14

在线演示

源码下载

7、纯CSS3立体动画菜单 菜单项按下有内阴影

这次小编来分享一款利用纯CSS3实现的立体动画菜单,该菜单的实现非常简单,并没有太多的特效渲染,但是看起来却非常干净漂亮,尤其配合灰黑色的背景,让菜单显得有点立体的感觉。另外,当我们点击菜单项时,菜单项将会出现内阴影的视觉效果。

奥门新浦京官方网站 15

在线演示 
   
  源码下载

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

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

奥门新浦京官方网站 16

在线演示

源码下载

8、纯CSS3绘制的黑色图标按钮组合

这是一款基于纯CSS3的图标组合,利用CSS3,我们基本可以在网页上绘制全部矢量图形,因为CSS3的出现我们可以绘制曲线了。这款图标是黑色风格的,有几个复杂的图案需要用多层CSS代码才能实现,大部分图标的绘制还是比较简单的。

奥门新浦京官方网站 17

在线演示 
      源码下载

如果你有更好的HTML5动画,也欢迎分享。

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

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

奥门新浦京官方网站 18

在线演示

源码下载

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

这次我们要来分享一款利用纯CSS3实现的自行车动画,与前面那款不同的是,这个自行车是可以运动的,就像有一个人在骑车一样,车轮也会转动,非常逼真的一款动画效果。

奥门新浦京官方网站 19

在线演示

源码下载

本文固定链接:

1、纯CSS3实现打火机火焰动画
这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你…

发表评论

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