使用CSS3各个属性实现带有音乐小人的动画，完全不使用JS代码：

注：chrome浏览器效果最佳，最终效果静态图：

HTML代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8";>

    <title>练习一个小人的动画</title>

    <link rel="stylesheet" href="/CSS3/css/people.css" />

</head>

<body>

    <div class="music1">

        <audio src="/CSS3/theme_8.mp3" autoplay loop/>

    </div>

    <!--整体的div布局-->

    <div class="warp">

        <div class="border_circle" id="one"></div>

        <div class="border_circle" id="two"></div>

        <!--背景圆圈-->

        <div class="backgroud_circle">

            <div class="tight-light"></div>

            <span class="shirt-text">I</span>

            <span class="shirt-text">♥</span>

            <span class="shirt-text">Y</span>

            <span class="shirt-text">O</span>

            <span class="shirt-text">U</span>

            <div class="tight-dark"></div>

            <!--身体-->

            <div class="body"></div>

        </div>

        <!--头部-->

        <div class="head">

            <!--耳朵-->

            <div class="ear" id="left"></div>

            <div class="ear" id="right"></div>

            <!--头发-->

            <div class="hair-main">

                <div class="sideburn" id="left"></div>

                <div class="sideburn" id="right"></div>

                <div class="hair-top"></div>

            </div>

            <!--脸-->

            <div class="face">

                <div class="hair-bottom"></div>

                <div class="nose"></div>

                <!--形成鼻子的阴影-->

                <div class="shadow-main">

                    <div class="shadow"></div>

                </div>

                <!--左眼-->

                <div class="eye-shadow" id="left">

                    <div class="eyebrow" id="left"></div>

                    <div class="eye"></div>

                </div>

                <!--右眼-->

                <div class="eye-shadow" id="right">

                    <div class="eyebrow" id="right"></div>

                    <div class="eye"></div>

                </div>

                <!--嘴巴-->

                <div class="mouse"></div>

            </div>

        </div>

        <!--音符-->

        <span class="music" id="one">♫</span>

        <span class="music" id="two">♪</span>

    </div>

</body>

</html>

CSS代码如下：

/* CSS Document */

body,html{

    width:100%;

    height:100%;

    margin:;

    display:table;

    text-align:center;

}

.music1

{

    display:none;

}

.warp{

    margin-top:100px;

    vertical-align:middle;

    position:relative;

}

.backgroud_circle{

    width:400px;

    height:400px;

    border-radius:100%;

    background:#6699FF;

    margin:0 auto;

    overflow:hidden;

    -webkit-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);

    -moz-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);

      -o-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);

      -ms-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);

    /*执行动画*/

    animation:grow 0.7s ease;

    -webkit-animation:grow 0.7s ease;

    transform-origin:center;

}

/*身体body*/

.body{

    width:285px;

    height:400px;

    margin:0 auto;

    background:#333333;

    position:relative;

    top:100px;

    border-radius:100px;

    /*执行动画*/

    -webkit-animation:body-enter 0.7s 0.2s 1 ease;

    animation:body-enter 0.7s 0.2s 1 ease;

    /*-webkit-animation-fill-mode:forwards;

    animation-fill-mode:forwards;*/

}

/*头部head*/

.head{

    width:196px;

    height:260px;

    border-radius:50px;

    background:#ffe4be;

    position:absolute;

    top:50%;

    left:50%;

    margin-top:-210px;

    margin-left:-98px;

    /*动画执行*/

    animation:grow 0.7s 0.5s ease;

    -webkit-animation:grow 0.7s 0.5s ease;

    transform-origin:bottom;

}

/*头发*/

.hair-main

{

    width:220px;

    height:0px;

    background:#FF9966;

    border-radius:54px 54px 0px 0px;

    animation:hair-main 0.7s 0.9s ease;

    -webkit-animation:hair-main 0.7s 0.9s ease;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

    position:relative;

    margin-left:-12px;

    margin-top:-10px;

    z-index:;

}

/*鬓角*/

.sideburn

{

    width:8px;

    height:25px;

    background:#FF9966;

    opacity:;

    bottom:-25px;

    position:absolute;

    animation:sideburn-main 0.7s 1s ease;

    -webkit-animation:sideburn-main 0.7s 1s ease;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

}

.sideburn#left

{

    left:12px;

}

.sideburn#right

{

    right:12px;

}

/*耳朵*/

.ear

{

    width:24px;

    height:35px;

    position:absolute;

    background:#ffe4be;

    top:116px;

    border-radius:12px;

    animation:grow 0.7s 1.3s ease;

    -webkit-animation:grow 0.7s 1.3s ease;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

    transform:scale(0);

    -webkit-transform:scale(0);

}

.ear#left

{

    left:-12px;

}

.ear#right

{

    right:-12px;

}

/*脸部*/

.face

{

    width:180px;

    height:0px;

    border-radius:48px;

    background:#ffe4be;

    position:absolute;

    top:40px;

    left:8px;

    animation:hair-main 0.7s 0.5s linear;

    -webkit-animation:hair-main 0.7s 0.5s linear;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

    z-index:;

}

/*鼻子*/

.nose

{

    width:20px;

    height:45px;

    opacity:;

    border-top-left-radius:20px;

    background:#ffe4be;

    position:absolute;

    top:80px;

    left:50%;

    margin-left:-20px;

    animation:shadow-main 0.7s 3s ease;

      animation-fill-mode: forwards;

      -webkit-animation:shadow-main 0.7s 3s ease;

      -webkit-animation-fill-mode: forwards;

      opacity:;

     z-index:;

}

/*形成鼻子的阴影*/

.shadow-main

{

    width:98px;

    height:260px;

    position:absolute;

    bottom:-84px;

    left:-8px;

    z-index:;

    overflow:hidden;

}

.shadow

{

    width:98px;

    height:260px;

    border-radius:50px;

    background:rgba(149,36,0,0.1);

    position:absolute;

    opacity:;

    z-index:;

    animation:shadow-main 1s 2.8s ease;

    -webkit-animation:shadow-main 1s 2.8s ease;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

}

/*眼睛阴影*/

.eye-shadow

{

    width:30px;

    height:15px;

    border-radius:0 0 15px 15px;

    background:rgba(149,36,0,0.1);

    position:absolute;

    top:70px;

    animation:grow 0.7s 2s ease;

    -webkit-animation:grow 0.7s 2s ease;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

    transform:scale(0);

    -webkit-transform:scale(0);

}

.eye-shadow#left

{

    left:35px;

    z-index:;

}

.eye-shadow#right

{

    right:35px;

}

/*眼眉*/

.eyebrow

{

    width:40px;

    height:10px;

    background:#FF9966;

    position:absolute;

    top:-35px;

    left:50%;

    opacity:;

    margin-left:-20px;

    -webkit-backface-visibility:hidden;/*设定元素的背面是否可见*/

}

.eyebrow#left

{

    animation:eyebrow-left 0.7s 2.2s ease;

    -webkit-animation:eyebrow-left 0.7s 2.2s ease;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

}

.eyebrow#right

{

    animation:eyebrow-right 0.7s 2.2s ease, eyebrow-right-raise 2s 6.6s infinite alternate ease-in-out;

    -webkit-animation:eyebrow-right 0.7s 2.2s ease, eyebrow-right-raise 2s 6.6s infinite alternate ease-in-out;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

}

/*两只蓝色眼睛*/

.eye

{

    width:20px;

    height:28px;

    border-radius:10px;

    background:#334C68;

    position:absolute;

    top:-18px;

    left:50%;

    margin-left:-10px;

    animation:grow 0.7s 2.2s ease;

    -webkit-animation:grow 0.7s 2.2s ease;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

    transform:scale(0);

    -webkit-transform:scale(0);

    transform-origin:bottom;

    -webkit-transform-origin:bottom;

}

/*嘴巴*/

.mouse

{

    width:66px;

    height:33px;

    background:#FFFFFF;

    border-radius:0 0 33px 33px;

    position:absolute;

    left:50%;

    top:150px;

    margin-left:-33px;

    animation:grow 0.7s 2.6s ease;

    -webkit-animation:grow 0.7s 2.6s ease;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

    transform:scale(0);

    -webkit-transform:scale(0);

}

/*背景高亮light阴影*/

.tight-light

{

    width:400px;

    height:600px;

    background:#ffffff;

    opacity:;

    position:absolute;

    right:15%;

    animation:tight-light 1s 2.8s ease;

    -webkit-animation:tight-light 1s 2.8s ease;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

    transform:translate(200px,0px);

    -webkit-transform:translate(200px,0px);

}

/*背景高亮dark阴影*/

.tight-dark

{

    width:400px;

    height:600px;

    background:#000000;

    opacity:;

    position:absolute;

    left:10%;

    top:35px;

    animation:tight-dark 1s 2.8s ease;

    -webkit-animation:tight-dark 1s 2.8s ease;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

    transform:translate(-200px,0px);

    -webkit-transform:translate(-200px,0px);

    z-index:;

}

/*外边黄色圈*/

.border_circle

{

    width:399px;

    height:399px;

    border-radius:50%;

    border:10px solid #ff8345;

    position:absolute;

    top:50%;

    left:50%;

    margin-left:-220px;

    margin-top:-220px;

    transform:scale(0);

    -webkit-transform:scale(0);

    transform-origin:center;

    -webkit-transform-origin:center;

}

/*外边黄色圈one*/

.border_circle#one

{

    animation:border_circle 1s 3.1s ease;

    -webkit-animation:border_circle 1s 3.1s ease;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

}

/*外边黄色圈two*/

.border_circle#two

{

    animation:border_circle 1s 3.3s ease;

    -webkit-animation:border_circle 1s 3.3s ease;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

}

/*I YOU*/

.backgroud_circle  .shirt-text

{

    font-family:"微软雅黑",sans-serif;

    font-size:50px;

    font-weight:;

    color:#FFFFFF;

    position:relative;

    top:180px;

    display:inline-block;

    -webkit-text-stroke:2px;

    text-stroke:2px;

    opacity:;

    -webkit-transform:translate(0px,100px);

    transform:translate(0px,100px);

    animation-fill-mode:forwards !important;

    -webkit-animation-fill-mode:forwards !important;

    z-index:;

}

.backgroud_circle .shirt-text:nth-of-type(1)

{

    animation:shirt-text 0.7s 3.3s ease;

    -webkit-animation:shirt-text 0.7s 3.3s ease;

}

.backgroud_circle .shirt-text:nth-of-type(2)

{

    color:#FF0000;

    animation:shirt-text 0.7s 3.4s ease, heart 2s 4s infinite ease-in-out;

    -webkit-animation:shirt-text 0.7s 3.4s ease, heart 2s 4s infinite ease-in-out;

}

.backgroud_circle .shirt-text:nth-of-type(3)

{

    animation:shirt-text 0.7s 3.5s ease;

    -webkit-animation:shirt-text 0.7s 3.5s ease;

}

.backgroud_circle .shirt-text:nth-of-type(4)

{

    animation:shirt-text 0.7s 3.6s ease;

    -webkit-animation:shirt-text 0.7s 3.6s ease;

}

.backgroud_circle .shirt-text:nth-of-type(5)

{

    animation:shirt-text 0.7s 3.7s ease;

    -webkit-animation:shirt-text 0.7s 3.7s ease;

}

/*音符*/

.music

{

    position: absolute;

    font-size: 150px;

    color: #FCB040;

    width: 1px;

    left: 50%;

    opacity:;

}

.music#one

{

    margin-left:-250px;

    top:50%;

    animation: note 2s 3.5s infinite ease;

    animation-fill-mode: forwards;

    -webkit-animation: note 2s 3.5s infinite ease;

    -webkit-animation-fill-mode: forwards;

}

.music#two{

  margin-left: 150px;

  top: 30%;

  animation: note 2s 4.3s infinite ease;

  animation-fill-mode: forwards;

  -webkit-animation: note 2s 4.3s infinite ease;

  -webkit-animation-fill-mode: forwards;

}

/*背景圆圈的动画事件：由中心向外扩张*/

@-webkit-keyframes grow

{

    0%{ -webkit-transform:scale(0); transform:scale(0);}

    60%{ -webkit-transform:scale(1.15); transform:scale(1.15);}

    80%{ -webkit-transform:scale(0.95); transform:scale(0.95);}

    100%{ -webkit-transform:scale(1); transform:scale(1);}

}

@keyframes grow

{

    0%{ -webkit-transform:scale(0); transform:scale(0);}

    60%{ -webkit-transform:scale(1.15); transform:scale(1.15);}

    80%{ -webkit-transform:scale(0.95); transform:scale(0.95);}

    100%{ -webkit-transform:scale(1); transform:scale(1);}

}

/*身体进入样式：由底部向上先变大再恢复正常*/

@-webkit-keyframes body-enter

{

    0%{-webkit-transform:translateY(200px);}

    60%{-webkit-transform:translateY(-20px);}

    80%{-webkit-transform:translateY(30px);}

    100%{-webkit-transform:translateY(0);}

}

@keyframes body-enter

{

    0%{-webkit-transform:translateY(200px);}

    60%{-webkit-transform:translateY(-20px);}

    80%{-webkit-transform:translateY(30px);}

    100%{-webkit-transform:translateY(0);}

}

/*头发动画：*/

@-webkit-keyframes hair-main

{

    0%{height:0px; -webkit-transform:translateY(137px); transform:translateY(137px);}

    100%{height:137px; -webkit-transform:translateY(0); transform:translateY(0);}

}

@keyframes hair-main

{

    0%{height:0px; -webkit-transform:translateY(137px); transform:translateY(137px);}

    100%{height:137px; -webkit-transform:translateY(0); transform:translateY(0);}

}

/*鬓角动画*/

@-webkit-keyframes sideburn-main

{

    0%{opacity:; -webkit-transform:translateY(-25px); transform:translateY(-25px);}

    100%{opacity:; -webkit-transform:translateY(0); transform:translateY(0);}

}

@keyframes sideburn-main

{

    0%{opacity:; -webkit-transform:translateY(-25px); transform:translateY(-25px);}

    100%{opacity:; -webkit-transform:translateY(0); transform:translateY(0);}

}

/*鼻子阴影动画：*/

@-webkit-keyframes shadow-main

{

    0%{ opacity:; -webkit-transform:translate(98px,0px); transform:translate(98px,0px);}

    50%{ opacity:;}

    100%{ opacity:; -webkit-transform:translate(0px,0px); transform:translate(0px,0px);}

}

@keyframes shadow-main

{

    0%{ opacity:; -webkit-transform:translate(98px,0px); transform:translate(98px,0px);}

    50%{ opacity:;}

    100%{ opacity:; -webkit-transform:translate(0px,0px); transform:translate(0px,0px);}

}

/*左眼眉动画*/

@-webkit-keyframes eyebrow-left

{

    0%{opacity:; -webkit-transform:translateY(-25px); transform:translateY(-25px);}

    70%{opacity:; -webkit-transform:translateY(5px); transform:translateY(5px);}

    100%{opacity:; -webkit-transform:translateY(0); transform:translateY(0);}

}

@keyframes eyebrow-left

{

    0%{opacity:; -webkit-transform:translateY(-25px); transform:translateY(-25px);}

    70%{opacity:; -webkit-transform:translateY(5px); transform:translateY(5px);}

    100%{opacity:; -webkit-transform:translateY(0); transform:translateY(0);}

}

/*右眼眉动画*/

@-webkit-keyframes eyebrow-right

{

    0%{opacity:; -webkit-transform:translateY(-25px); transform:translateY(-25px);}

    70%{opacity:; -webkit-transform:translateY(5px); transform:translateY(5px);}

    100%{opacity:; -webkit-transform:rotate(9deg) translateY(0); transform:rotate(9deg) translateY(0);}

}

@keyframes eyebrow-right

{

    0%{opacity:; -webkit-transform:translateY(-25px); transform:translateY(-25px);}

    70%{opacity:; -webkit-transform:translateY(5px); transform:translateY(5px);}

    100%{opacity:; -webkit-transform:rotate(9deg) translateY(0); transform:rotate(9deg) translateY(0);}

}

/*眉毛上升动画*/

@-webkit-keyframes eyebrow-right-raise

{

    0%{top:-35px;}

    70%{top:-35px;}

    100%{top:-45px;}

}

@keyframes eyebrow-right-raise

{

    0%{top:-35px;}

    70%{top:-35px;}

    100%{top:-45px;}

}

/*背景高亮light动画*/

@-webkit-keyframes tight-light

{

    0%{opacity:; -webkit-transform:translate(200px,0px); transform:translate(200px,0px);}

    100%{opacity:0.2; -webkit-transform:rotate(45deg) translate(0px,0px); transform:rotate(45deg) translate(0px,0px);}

}

@keyframes tight-light

{

    0%{opacity:; -webkit-transform:translate(200px,0px); transform:translate(200px,0px);}

    100%{opacity:0.2; -webkit-transform:rotate(45deg) translate(0px,0px); transform:rotate(45deg) translate(0px,0px);}

}

/*背景高亮dark动画*/

@-webkit-keyframes tight-dark

{

    0%{opacity:; -webkit-transform:translate(-200px,0px); transform:translate(-200px,0px);}

    100%{opacity:0.2; -webkit-transform:rotate(-45deg) translate(0px,0px); transform:rotate(-45deg) translate(0px,0px);}

}

@keyframes tight-dark

{

    0%{opacity:; -webkit-transform:translate(-200px,0px); transform:translate(-200px,0px);}

    100%{opacity:0.2; -webkit-transform:rotate(-45deg) translate(0px,0px); transform:rotate(-45deg) translate(0px,0px);}

}

/*外面黄色圈动画*/

@-webkit-keyframes border_circle

{

    0%{ border-width:20px; transform:scale(0); -webkit-transform:scale(0);}

    40%{ border-width:20px; transform:scale(1); -webkit-transform:scale(1); margin-left:-220px; margin-top:-220px;}

    100%{ border-width:0px; transform:scale(1.5); -webkit-transform:scale(1.5); border-style:double; margin-left:-200px; margin-top:-200px;}

}

@keyframes border_circle

{

    0%{ border-width:20px; transform:scale(0); -webkit-transform:scale(0);}

    40%{ border-width:20px; transform:scale(1); -webkit-transform:scale(1); margin-left:-220px; margin-top:-220px;}

    100%{ border-width:0px; transform:scale(1.5); -webkit-transform:scale(1.5); border-style:double; margin-left:-200px; margin-top:-200px;}

}

/*文字*/

@-webkit-keyframes shirt-text

{

    0%{opacity:; -webkit-transform:translate(0px, 80px); transform:translate(0px, 80px);}

    60%{opacity:; -webkit-transform:translate(0px, -50px); transform:translate(0px, -50px);}

    80%{opacity:; -webkit-transform:translate(0px, 140px); transform:translate(0px, 140px);}

    100%{opacity:; -webkit-transform:translate(0px, 100px); transform:translate(0px, 100px);}

}

@keyframes shirt-text

{

    0%{opacity:; -webkit-transform:translate(0px, 80px); transform:translate(0px, 80px);}

    60%{opacity:; -webkit-transform:translate(0px, -50px); transform:translate(0px, -50px);}

    80%{opacity:; -webkit-transform:translate(0px, 140px); transform:translate(0px, 140px);}

    100%{opacity:; -webkit-transform:translate(0px, 100px); transform:translate(0px, 100px);}

}

@-webkit-keyframes heart

{

    0%{ }

    30%{color:#00FF99;}

    70%{color:#FFFF00;}

    100%{}

}

@keyframes heart

{

    0%{ }

    30%{color:#00FF99;}

    70%{color:#FFFF00;}

    100%{}

}

/*音符*/

@-webkit-keyframes note

{

    0% {

      opacity:;

      -webkit-transform: translate(0px,50px);

      transform: translate(0px,50px);

    }

    30% {

      -webkit-transform:rotate(12deg) translate(-30px,0px);

      transform:rotate(12deg) translate(-30px,0px);

    }

    45% {

      opacity:;

    }

    60% {

      -webkit-transform: rotate(-12deg) translate(30px,-100px);

      transform:rotate(-12deg) translate(30px,-100px);

    }

    100% {

      opacity:;

      -webkit-transform:rotate(0deg) translate(0px,-200px);

      transform:rotate(0deg) translate(0px,-200px);

    }

}

@keyframes note

{

    0% {

      opacity:;

      -webkit-transform: translate(0px,50px);

      transform: translate(0px,50px);

    }

    30% {

      -webkit-transform:rotate(12deg) translate(-30px,0px);

      transform:rotate(12deg) translate(-30px,0px);

    }

    45% {

      opacity:;

    }

    60% {

      -webkit-transform: rotate(-12deg) translate(30px,-100px);

      transform:rotate(-12deg) translate(30px,-100px);

    }

    100% {

      opacity:;

      -webkit-transform:rotate(0deg) translate(0px,-200px);

      transform:rotate(0deg) translate(0px,-200px);

    }

}

使用CSS3各个属性实现小人的动画的更多相关文章

  1. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  2. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  3. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

    摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...

  4. web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  5. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  6. CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  7. CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）

    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...

  8. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  9. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

随机推荐

  1. Maven将依赖的所有jar包打成一个jar

    有些特殊情况下,需要将多个jar包打包成一个jar文件.如果使用maven可以加入如下插件: <build> <plugins> <plugin> <arti ...

  2. C#操作SQL Server数据库

    http://www.cnblogs.com/rainman/archive/2012/03/13/2393975.html

  3. 如何透过HTC Vive拍摄Mixed Reality （混合现实）影片

    https://www.vive.com/cn/forum/1706?extra=page%3D1 也许你是一位开发者,想为自己的HTC Vive游戏制作酷炫的宣传片:或者你是游戏主播,想为观众带来高 ...

  4. 【OS】实模式和保护模式区别及寻址方式

    实模式和保护模式区别及寻址方式 转载请注明出处:http://blog.csdn.NET/rosetta 64KB-4GB-64TB? 我记得大学的汇编课程.组成原理课里老师讲过实模式和保护模式的区别 ...

  5. 个人对JQuery Proxy()函数的理解

    转载至:http://www.cnblogs.com/acles/archive/2012/11/20/2779282.html JQuery.proxy(function,context): 使用c ...

  6. Android开发之无线遥控器

    最近弄了一个UDP/TCP的小东西,主要需要实现的功能如下(服务器端): 1.基于局域网 2.服务器端网络接口为无线与有线 3.服务器端接收到客户端的数据需要模拟按键进行处理 4.开机自启动 5.使用 ...

  7. 【译】Learn ES2015——箭头函数

    原文:https://babeljs.io/learn-es2015/ 理解也许有偏差,欢迎指正 箭头函数 不同于函数,箭头函数和包裹它的代码拥有同一个this.如果一个箭头函数在一个function ...

  8. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  9. python 汇总

    TypeError: ReadExcelList() takes exactly 1 argument (2 given) 传入的参数有问题

  10. YY前端课程5-6

    第五次课内容: 1. 要注意标签的层次,运用缩进indent,使HTML结构清晰,增加可读性accessible 2. HTML布局网页,CSS显示样式(CSS是用来美化HTML标签的) 3. 开放标 ...