初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,付费投稿计划

  • 栏目:前端 时间:2020-04-16 03:42
<返回列表

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

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

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

韦德体育 1

在线演示

源码下载

韦德体育 2

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

2、CSS3 Loading进度条加载动画特效 3款绚丽风格

今天我要分享一款更加炫酷的CSS3进度条加载动画特效,该动画特效有3个不同的风格,注意,IE6,7,8是不支持该进度条动画的。

韦德体育 3

在线演示

源码下载

今天我们一起来分享一下8款清新实用的jQuery/CSS3插件及源码,废话不说,先来看看吧。

韦德体育 4

3、纯CSS3实现云雾缭绕动画效果

今天我们来分享一款纯CSS3实现的动画特效,是基于CSS3的云雾动画效果。首先云雾是缭绕舞动的,非常有3D立体的效果,其次,天空的背景可以改变,可以是蓝天白云,也可以是夜空白云。这款CSS3动画非常酷,值得欣赏

韦德体育 5

在线演示

源码下载

1、纯CSS3实现黑色卷角翻页导航条

在线演示源码下载

4、纯CSS3人物行走动画 逼真炫酷CSS3动画

CSS3实在是太强大了,今天分享的CSS3动画非常神奇,它可以模拟人物行走,而且人物行走动画非常逼真。人物行走时的跨步动画时多张图片重叠实现的。有了这个CSS3人物行走动画的基础,我们就可以更方便的在浏览器上实现HTML5游戏。

韦德体育 6

在线演示

源码下载

翻页效果是利用纯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>

5、HTML5物理实验 CSS3模拟齿轮转动

利用HTML5可以模拟出很多物理特性的实验,比如天体运动、自由落体等,今天要分享一个利用纯CSS3实现的齿轮转动实验,实验由多个齿轮组合在一起,主动轮转动后可以带动其他从动轮转动,从而将重物吊起。这个过程没有利用Javascript,而是利用纯CSS3实现,效果很棒。

韦德体育 7

在线演示

源码下载

在线演示 / 源码下载

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

在线演示源码下载

6、纯CSS3绘制可爱小男孩动画 超酷面部表情

今天我们又要来分享一款纯CSS3绘制的可爱小男孩动画,除了绘制的小男孩逼真可爱外,其面部表情也十分酷。整个动画是利用纯CSS3实现,没有用图片和JS,不知道你们的浏览器中效果怎么样。

韦德体育 8

在线演示

源码下载

2、jQuery弹出层窗口 可拖拽最大最小化

7、纯CSS3加载Loading动画图 12款创意设计

我们经常使用GIF图片来实现Loading加载动画,确实利用GIF图片来实现也非常方便,但需要我们一定的制图功底,我们作为程序员很多对制图一窍不通,那么今天就让我们用CSS3代码来实现漂亮的Loading加载动画吧,下面的12款非常有创意的CSS3 Loading加载动画肯定会让你喜欢上CSS3,喜欢上HTML5。

韦德体育 9

在线演示

源码下载

本文固定链接:

在线演示 / 源码下载

3、HTML5 Canvas绘制时钟表时间

这是一个HTML5时钟模型,没有华丽的外表,但是功能实现了,框架搭好了,外观可以自己定义。

在线演示 / 源码下载

4、CSS3齿轮转动动画特效

这是一款基于纯CSS3的齿轮动画特效,利用CSS3来模拟齿轮旋转以及各个齿轮之间的传动,非常逼真。

在线演示 / 源码下载

5、CSS3动画图片滑动切换

图上的范冰冰很漂亮,各张范冰冰美图之间的切换都是利用CSS3动画实现的,非常酷。

在线演示 / 源码下载

6、仿苹果样式的jQuery图片滑块焦点图

这是一款基于jQuery的焦点图插件,该jQuery焦点图样式是仿苹果的,外观非常炫酷,图片切换十分流畅,并且有缩略图按钮。

在线演示 / 源码下载

韦德体育 ,7、jQuery带小图标动画菜单

这款jQuery菜单有点仿苹果菜单的感觉,菜单项有小图标,鼠标滑过菜单时有展开动画。

在线演示 / 源码下载

8、jQuery超炫3D效果焦点图

这是一款非常温馨的jQuery焦点图插件,改jQuery插件拥有3D的效果,非常酷。

在线演示 / 源码下载

以上就是8款清新实用的jQuery/CSS3插件及源码,由网页素材大全网站整理发布,内容来自网络,转载请注明原文链接:

上一篇:之前我们有分享过一款镂空效果的CSS3按钮,付费投稿计划 下一篇:没有了

更多阅读

我们将很多网页上的元素使用SVG来绘制而

前端 2020-04-16
本文由码农网 –小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! S...
查看全文

初始化的时候人物的各个部位是利用CSS

前端 2020-04-16
本文由码农网 –小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 1、...
查看全文

之前我们有分享过一款镂空效果的CSS3按钮

前端 2020-04-16
本文由码农网 –小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! H...
查看全文

友情链接: 网站地图

Copyright © 2015-2019 http://www.koi-bumi.com. 韦德体育有限公司 版权所有