第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#

索 HTML 图像的不同概念，以及如何有效地使用它们在您的网站上增加视觉吸引力、传达信息和表达情感。本指南包含大量示例和实用技巧，可帮助您创建一个视觉效果惊人且用户友好的网站。

图像是网页设计师和开发人员的强大工具，它们可用于传达信息、表达情感并使网站更具视觉吸引力。 HTML 图像概念是网页设计和开发的重要方面。它们用于将图像嵌入到网页中，以便于显示和共享图片和图形。在这篇博文中，我们将探讨 HTML 图像的不同概念以及如何有效地使用它们。

首先，让我们谈谈不同类型的 HTML 图像。有两种主要类型的图像：内嵌图像和背景图像。内联图像直接嵌入到 HTML 代码中，而背景图像则应用于元素的背景。

1 | 内联图像

在此示例中，内联图像“image.jpg”直接嵌入到 HTML 代码中并显示给用户。

2 | 背景图片

在此示例中，背景图像“image.jpg”应用于 div 元素的背景并显示给用户。

3 | 替代 (alt) 文本

以合乎逻辑且一致的方式使用图像也很重要。这意味着您应该使用它们来传达与网页内容相关的信息或表达情感，而不是随意使用它们。此外，使用 alt 属性为图像添加文本替代也很重要，它允许可能使用屏幕阅读器的用户访问图像，或者以防图像加载失败。

在此示例中，替代文本“日落的美丽图像”让用户清楚地了解图像所代表的内容。

4 | 调整图像大小

另一个 HTML 图像概念是使用宽度和高度属性调整图像大小的能力。这些属性允许您调整图像大小以适合您的布局和设计。

在此示例中，图像的宽度设置为 300 像素，图像的高度设置为 200 像素。

结论

HTML 图像概念是网页设计和开发的重要方面。它们用于将图像嵌入到网页中，以便于显示和共享图片和图形。通过了解不同类型的图像并正确使用它们，您可以为您的网站增加额外的视觉吸引力，并以有力的方式传达信息或表达情感。无论是使用内联图片还是背景图片，添加替代文本或调整大小，这些概念都是创建视觉效果惊人且用户友好的网站的关键。

但不要只相信我们的话，您自己试试吧！尝试使用 HTML 图像，看看它们如何增强您网站的整体外观。通过每一行代码，您离创建一个您的访问者会喜欢的美观且引人入胜的网站又近了一步。请记住，图像具有唤起情感和传达信息的力量，因此请明智地使用它们并将它们作为您网页设计策略的重要组成部分。通过正确组合 HTML 和图像，您将创建一个脱颖而出并给访问者留下持久印象的网站。

我们在开发网站时，一般会在图片上加一个过光效果，目的是为了，让用户明白我的鼠标移动到这里了，同时还能增加网页上的美观效果。下面是它的实现基础代码，大家可以看看了解了解。

html部分

<div class="box">
<div class="light">
</div>
</div>

创建一个box,包裹一个light

css部分

*{
padding: 0;
margin: 0;
}
html{
display: flex;
justify-content: center;
}
.box{
position: relative;
margin-top: 30px;
width: 300px;
height: 200px;
background-color: green;
overflow: hidden;
}
.light{
content: '';
display: block;
position: absolute;
top: -20%;
left: -100%;
width: 350px;
height: 100px;
transform: rotate(-45deg);
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
/* 过度实现部分 */
/* transition: 0.8s; */
}
.box:hover .light{
/* 过度实现部分 */
/* transform: translate(200%,200%) rotate(-45deg); */
animation: cross 0.5s;
}
@keyframes cross{
from{
}
to{
top: 80%;
left: 100%;
transform: rotate(-45deg);v
}
}

想要通过过度效果实现的同学，将动画效果注释掉，释放过度部分的注释就可以了。

实现原理

将ligth盒子设置为宽350px,高100px的长方形，通过添加渐变实现光影效果，再将其逆时针旋转45度定位于box盒子的左上方，然后通过“动画”或者“过度”效果使其向右下方移动。（动画效果在鼠标离开box的时候，会有一个光影返回去的效果。）

在线咨询

上一篇：HTML5从入门到精通，零基础学员必看
下一篇：html实现点击图片放大功能

您的项目需求

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

整合营销服务商