CSS3 基础（007_动画）

最新推荐文章于 2024-04-30 15:04:15 发布
最新推荐文章于 2024-04-30 15:04:15 发布
阅读量931 收藏 1
点赞数
分类专栏： CSS 文章标签： css3

原始网址：http://www.w3schools.com/css/css3_animations.asp

翻译：

CSS3 动画（CSS3 Animations）

CSS3 动画（CSS3 Animations）

CSS3 animations 允许在不使用 JavaScript 或 Flash 的情况下对元素添加动画效果！

<!DOCTYPE html>
<html>
<head>
<style>
#animated_div {
    animation: 5s ease 0s normal none 1 running animated_div;
    background: #92b901 none repeat scroll 0 0;
    border-radius: 5px;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    height: 47px;
    padding: 10px;
    position: relative;
    width: 76px;
}

@keyframes animated_div {
    0% {
        left: 0;
        transform: rotate(0deg);
    }
    25% {
        left: 0;
        transform: rotate(20deg);
    }
    50% {
        left: 500px;
        transform: rotate(0deg);
    }
    55% {
        left: 500px;
        transform: rotate(0deg);
    }
    70% {
        background: #1ec7e6 none repeat scroll 0 0;
        left: 500px;
        transform: rotate(0deg);
    }
    100% {
        left: 0;
        transform: rotate(-360deg);
    }
}

@keyframes animated_div {
    0% {
        left: 0;
        transform: rotate(0deg);
    }
    25% {
        left: 0;
        transform: rotate(20deg);
    }
    50% {
        left: 500px;
        transform: rotate(0deg);
    }
    55% {
        left: 500px;
        transform: rotate(0deg);
    }
    70% {
        background: #1ec7e6 none repeat scroll 0 0;
        left: 500px;
        transform: rotate(0deg);
    }
    100% {
        left: 0;
        transform: rotate(-360deg);
    }
    }
    @keyframes animated_div {
    0% {
        left: 0;
        transform: rotate(0deg);
    }
    25% {
        left: 0;
        transform: rotate(20deg);
    }
    50% {
        left: 500px;
        transform: rotate(0deg);
    }
    55% {
        left: 500px;
        transform: rotate(0deg);
    }
    70% {
        background: #1ec7e6 none repeat scroll 0 0;
        left: 500px;
        transform: rotate(0deg);
    }
    100% {
        left: 0;
        transform: rotate(-360deg);
    }
}
</style>
</head>
<body>
    <div id="animated_div">CSS3<br> <span style="font-size: 10px;">Animation</span></div>
</body>
</html>

Browser Support for Animations

表格里的数字代表对 CSS3 属性全面支持的各浏览器的第一个版本号。
数字之后跟从 -webkit-、-moz- 或 -o- 指定带前缀工作的第一个版本号。

属性（Property）chromeIEfirefoxsafariopera
@keyframes43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-
animation43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-

什么是 CSS3 动画？

动画（animation）使得元素从一种样式逐渐地改变为另一种样式。
你可以改变很多 CSS 属性，还可以是任意次改变，取决于你。
使用 CSS3 动画（animation），你必须先给 animation 指定 keyframes 。
keyframes 在特定的时间里保留相应的样式。

@keyframes 规则（The @keyframes Rule）

当你在 @keyframes 规则内指定 CSS 样式的时候，动画（animation）在特定的时间内从当前样式逐渐地改变为新样式。

为了让动画有效果，你必须将动画绑定到元素上。

下列示例将 "example" 动画绑定到 <div> 元素上。动画将持续 4 秒，它将 <div> 元素的背景色逐渐地从 "red" 改变为 "yellow" ：

 /* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
} 
<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@
-webkit-keyframes example {
    from {background-color: red;
}

to {
    background-color: yellow;
}

}

/* Standard syntax */
@
keyframes example {
    from {background-color: red;
}

to {
    background-color: yellow;
}
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
    <p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</body>
</html>

注意：如果 animation-duration 属性没有被指定，将不会有动画效果，因为默认值为 0 。

在上述示例中，我们已经通过使用 "from" 和 "to" 关键字（代表 0% 和 100%，即开始和完成）指定了样式将要变更的时间点。

使用百分比也是可以的。通过使用百分比，你可以添加任意多个样式变更，如你所愿。

下列示例将改变 <div> 元素的背景色，当动画完成 25%、50% 以及 100% 的时候：

 /* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
</body>
</html>

下列示例将改变 <div> 元素的背景色和位置，当动画完成 25%、50% 以及 100% 的时候：

 /* The animation code */
@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
</body>
</html>

延迟动画（Delay an Animation）

animation-delay 属性指定动画开始的延迟。
下列示例，在动画开始之前有 2 秒延迟：

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}
<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
</body>
</html>

设置动画的运行次数（Set How Many Times an Animation Should Run）

animation-iteration-count 属性指定动画的运行次数。
下列示例，动画在停止之前将运行 3 次：

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}
<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
</body>
</html>

下列示例使用 "infinite" 值让动画永无止息地运行：

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
</body>
</html>

Run Animation in Reverse Direction or Alternate Cycles

animation-direction 属性用以指定动画反向运行或以交替循环的方式运行。
下列示例将使动画反向运行：

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;
}
<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;    
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
</body>
</html>

下列示例使用 "alternate" 值让动画正向运行、反向运行、再正向运行：

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;
}
<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;    
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
</body>
</html>

指定动画的速度曲线（Specify the Speed Curve of the Animation）

animation-timing-function 属性指定动画的速度曲线。
animation-timing-function 属性可以有以下取值：

  • ease - 指定动画为慢、快、慢的节奏（默认值）
  • linear - 指定动画为匀速
  • ease-in - 指定动画为慢开始
  • ease-out - 指定动画为慢结束
  • ease-in-out - 指定动画为慢开始、慢结束
  • cubic-bezier(n,n,n,n) - 自定义贝塞尔曲线函数值

下列示例展示可被使用的不同速度曲线：

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 50px;
    background-color: red;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 5s infinite;
}

/* Safari 4.0 - 8.0 */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

/* Standard syntax */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}

/* Standard syntax */
@keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}
</style>
</head>
<body>

<p><strong>Note:</strong> The animation-timing-funtion property is not supported in Internet Explorer 9 and earlier versions.</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

动画简写属性（Animation Shorthand Property）

下列示例使用 6 个动画属性：

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-name: example;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    /* Standard syntax */
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
</body>
</html>

通过使用 animation 简写属性可以达到相同的动画效果：

div {
    animation: example 5s linear 2s infinite alternate;
}
<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Safari 4.0 - 8.0 */
    animation: myfirst 5s linear 2s infinite alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
</body>
</html>
柯南道尔2606
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3基础动画详解
12-18
CSS3基础动画详解，每一步都有注释，可以快速的帮助新学习动画属性的人更好的了解，能快速的上手！
CSS3动画animation
08-04 637
linear： 匀速运动ease：速度由快到慢（默认值）ease-in：速度越来越快ease-out： 速度越来越慢ease-in-out： 速度先加速再减速。
30+学习Web设计和开发的优质新鲜资源
weixin_30856965的博客
09-11 134
今天我们整理了一些最新的Web设计和开发的资源，这些资源都来自国外的流行站点，不过大家应该不会陌生，放在这里供大家收藏，在需要的时候方便翻阅和学习！ 原文地址：http://www.goodfav.com/resources-for-learning-web-design-development-16460.html W3 Schools – MORE INFO w3schools is...
【前端面试系列】CSS Animations
邱凯翔 Edward 的个人博客
09-02 1058
引言 前端面试总躲不过的几个知识点，像js的prototype，css的动画，当然高级点的性能优化不在本教程的内容列表里面，属于提高的内容。而本节就着重讲css的动画讲清楚。 资源来自：https://www.w3schools.com/css/css3_animations.asp 注意：以下所有内容翻译自上述官方教材，可能需要翻墙查看，强烈推荐点击链接中的示例代码，对比分析加深印象...
CSS3基础动画
q1903927228的博客
03-13 958
这是CSS最基础的动画，这个动画的效果是一个圆从页面之外从上往下的掉落，掉到代码设定的“地面”往上弹跳然后停止。 先敲出一个圆，给上个色，再给他调到中间去，这个圆所在的坐标关系到动画在哪运行。 @keyframes （关键帧）myMove（是动画的命名） Transform使其变换形态.加个Y轴，就是在Y轴中变换，后面的-300px是它Y轴的坐标。 下面那0%和它下面代码的意思是在0%的时候，圆在Y轴的-300px位置。 然后就按照下面图片代码的形式做出来就行了 5．animation（..
css 入场动画_CSS3 animation 动画
weixin_32379547的博客
12-29 1963
一.animation基础语法：参数解析：(1).animation-name：规定动画的名称，利用它可以与@keyframes关联起来。(2).animation-duration：规定动画的时长，时间是秒，比如5s。(3).animation-timing-function：规定动画的过渡类型，可以使用内置固定的关键字，也可以自定义数据。(4).animation-delay：规定动画开始前的...
纯CSS3人物行走动画 逼真炫酷CSS3动画
04-16
解压密码：RJ4587 CSS3实在是太强大了，今天分享的CSS3动画非常神奇，它可以模拟人物行走，而且人物行走动画非常逼真。...有了这个CSS3人物行走动画的基础，我们就可以更方便的在浏览器上实现HTML5游戏。
CSS3基础知识教程transition属性过渡动画效果等
11-05
CSS3基础知识教程transition属性过渡动画效果等 CSS3基础知识教程transition属性过渡动画效果等
WebKit CSS3 动画基础
03-24
NULL 博文链接：https://sailinglee.iteye.com/blog/1068953
CSS3网页动画特效代码,纯css3实现碰碰车动画效果.rar
04-26
需要注意的是，这份资源需要一定的CSS3基础和对网页动画的理解，建议使用者在使用前先进行相关学习和实践。同时，为了确保网站的性能和用户体验，建议在使用动画效果时进行适当的优化和测试。 总之，这份CSS3网页...
【Echarts】自定义提示框tooltip样式，结合vue在自定义提示框中实现选择器和按钮事件
m0_49471668的博客
04-29 473
【代码】【Echarts】自定义提示框tooltip样式，结合vue在自定义提示框中实现选择器和按钮事件。
学习CSS3，实现红色心形loading特效
xingyu_qie的专栏
04-30 1169
试想一下，如果你的网站在加载过程中，loading图由一个老旧的菊花转动图片，变为一个红色的特效，那该有多炫酷啊。
css边距的接触
2401_83693610的博客
04-26 1080
4个边 padding: 0px;上下 左右 padding: 0px 20px;上 左右 下 padding: 0px 20px 30px;上 右 下 左 padding: 0px 20px 30px 40px;平移这个元素位置的一半 :transform: translate(-50%,0px);左右 上下居中。
微信公众号 点击显示答案 操作步骤
m0_74295055的博客
04-30 337
根据内容区域大小调整遮罩层大小，大小一般取内容区域高度+40。添加完遮罩层后，由于遮罩层作用，无法对内容区域直接编辑。添加答案区域代码后，可以直接在页面进行格式调整。
基于matlab实现的空间调制通信过程，包含信号调制、天线选择等发送过程，以及采用最大似然估计的检测过程 .rar
最新发布
05-02
基于matlab实现的空间调制通信过程，包含信号调制、天线选择等发送过程，以及采用最大似然估计的检测过程。.rar
基于matlab的关于生猪养殖场经营管理的研究.docx
05-02
本文档是课题研究的研究报告内含调研以及源码设计以及结果分析
网络作为特征提取器-python源码.zip
05-02
网络作为特征提取器-python源码.zip
JavaScript-javaweb项目
05-02
JavaScript-javaweb项目
node-v12.11.0-linux-arm64.tar.xz
05-02
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
HTML5+CSS3网站设计基础教程
11-01
5. 如何使用CSS3实现动画和过渡效果，增强网页的交互性和视觉效果。 通过学习这本教材，读者可以掌握HTML5和CSS3的基础知识和技能，能够独立设计和开发简单的网站。同时，这本教材也为读者进一步学习和探索网站设计...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值