第13天 - 16天搞定前端，CSS的动画效果，酷

以往，想在HTML上实现动画效果，要不就用被乔布斯恨死的了Flash 动画，要不就用网页动画图像或者JavaScript 实现效果。在CSS3之后，就可以用CSS在HTML上实现动画了。

要创建 CSS3 动画，你需要了解 @keyframes 规则。现在 @keyframes 创建动画时，需将其绑定到一个选择器，否则动画不会有任何效果。

13.1 原生创建动画

用CSS3原生代码创建动画，语法是@keyframes animationname {keyframes-selector {css-styles;}}，其中animationname ：必需，动画的名称；

keyframes-selector：必需，动画时长的百分比合法的值：0-100%， from（与 0% 相同），to（与 100% 相同）
css-styles：必需，一个或多个合法的 CSS 样式属性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动起来</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst 5s;
            -webkit-animation: firstan 5s; /* Safari and Chrome */
        }

        @keyframes firstan {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>
<body>
<div/>
</body>
</html>

输出结果

13.2 动画库创建

如果每次都要自己手动用CSS去创建动画，那效果太低了。为此，有人专门专门开发了CSS动画库animation.css。可以在线https://animate.stylek看效果，它里面的动画效果，可以满足大多数需求了。下载https://github.com/animate-css/animate.css里的animate.min.css文件，放到HTML文件相同目录下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用动画库实现动画</title>
    <link rel="stylesheet" type="text/css" href="animate.min.css"/>
</head>
<body>
<main class="animate__animated animate__fadeInLeft">
    老陈说编程，动画效果行
</main>
</body>
</html>

输出结果

好了，有关CSS动画效果的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML5##CSS##程序员##Web#

家好，本篇文章分享经典Loading加载缩放动画特效，欢迎参考和指正。

效果图：

Loading加载缩放动画特效

HTML代码：

<div class="tui-demo-5">
 <div class="tui-1"></div>
 <div class="tui-2"></div>
 <div class="tui-3"></div>
</div>

CSS代码：

<style type="text/css">
 .tui-demo-5 {
 width: 100px;
 height: 100px;
 margin: 50px auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 }
 .tui-demo-5 div {
 width: 25px;
 height: 25px;
 border-radius: 50%;
 background: #2eefe6;
 animation: tui-demo-5 0.4s infinite alternate;
 }
 .tui-demo-5 .tui-1 {
 animation-delay: -0.4s;
 }
 .tui-demo-5 .tui-2 {
 animation-delay: -0.2s;
 }
 .tui-demo-5 .tui-3 {
 animation-delay: 0s;
 }
 @keyframes tui-demo-5 {
 0% {
 opacity: 1;
 transform: scale(1);
 }
 100% {
 opacity: 0.4;
 transform: scale(0.6);
 }
 }
</style>

知识点：

animation：是CSS3的动画属性，这里把animation绑定到tui-demo-5元素上，并指定该动画需要0.4秒完成，infinite则表示无限次播放该动画，alternate则表示动画会在奇数次数正常播放，而在偶数次数向后播放，animation-delay则表示动画在启动前的延迟间隔。

@keyframes：该规则表示动画可以逐步从一个CSS样式改变为另一个CSS样式。这里0％是动画开头，100％是动画结束。

transform：该属性应用于2D元素或3D元素的转换，允许元素发生旋转，缩放，移动，倾斜等效果。scale定义2D缩放，可以配置缩放大小。opacity定义元素的不透明级别。

最后注意下浏览器兼容问题，-webkit-,-ms-或-moz-，有问题可以留言，大家一起学习HTML+CSS基础入门开发。

不是还在为网页交互感不友好而拍着键盘找特效？其实在咱们学习的过程当中就已经可以写出好玩、炫酷的特效了，只是你还没有发现。当细心的操作过后，不仅要拍着大腿说自己怎么没想到，更要进行反思，怎样学习才能将知识点熟练的进行应用。那么现在，我们就一起动手来做一个网页开始的动画效果吧。

一、分析

任何时候我们都要善于进行分析，尤其在解决问题之前最重要的一步就是分析。

1、首先页面开场的特效是由Css3动画来完成的。所有我们一定要使用animation动画属性，并且配合@keyframes动画规则来进行实现。

2、在动画执行过程当中，我们操作的css样式分别为放大、颜色、旋转。其中颜色包括背景颜色和字体颜色

3、打开后文字位置不会随分辨率大小发生改变，那么我们需要用到flexbox弹性布局。

二、知识点梳理

1、Css3的animation用法：

之前的时候我们应用简写的方式比较多，由于我们需要同时设置多个动画，所以这里需要分开使用animation。一个属性名后，可以写多个动画名或执行时间，记得用逗号隔开。

2、Css3的transform用法：

Transform一共有4种变形状态。

旋转：transform:rotate(Ndeg)

放大：transform:scale();

倾斜：transform:skew(Ndeg);

平移：transform:translate(px);

那这里我们应用前两个就可以了。

3、一种优雅的布局方式 Flexbox弹性盒模型

将容器设置好display:flex;后，主轴居中对齐、交叉轴居中对齐即可。

三、动手做一做

1、首先我们要写好HTML结构，将标签自带的填充去掉，对HTML标签进行normalize。

*{margin：0；padding：0；}

2、对main标签进行设置。

设置动画名称、设置动画的持续时间、设置”豪横”两字的摆放位置

3、三种动画的@keyframes规则

@keyframes规则有两种写法，两种方法都有自己的优点。第一种更简单，第二种更加细节。

1）第一种 from to的方式

2) 第二种百分比的方式

动画scale：

动画colors：

动画rotate：

4、设置一下字号、字体

四、结语

经过编写后，大家是不是觉得其实并没有那么复杂呢？前端的入门门槛较低。可以很快的通过简单的逻辑写出漂亮的页面。但是也希望大家更认真得对待知识，想写出好看的效果首先我们应当有扎实的基本功，配合着丰富的想象力和执行力，我们才能写出更多更好看的特效。

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商