CSS从入门到精通——动画:简单的小动画

最新推荐文章于 2024-06-22 17:21:25 发布

Flec-hazo

最新推荐文章于 2024-06-22 17:21:25 发布

阅读量530

点赞数 5

文章标签： css 前端 html 学习

本文链接：https://blog.csdn.net/m0_73614626/article/details/139711740

版权

任务描述

本关任务：用 CSS3 实现简单的小动画。效果图如下：

相关知识

为了完成本关任务，你需要掌握：1.创建动画，2.绑定元素。

创建动画

用 @keyframes来创建一个动画，然后把这个动画绑定到一个元素上就有效果了。

需要实现的效果图如下：

基本的html结构如下：

<p>@keyframes</p>
p{ font-size: 14px}

效果图如下：

先用@keyframes创建一个动画，这个动画表示字体会从20px变成40px。代码如下：

@keyframes bigfonts{
  from { font-size: 20px;}
   to  { font-size: 40px;}
}

说明：

@keyframes表示创建动画，动画名称是 bigfonts；
from表示这个动画的开始，to表示这个动画的结束；
动画发生的时间也可以用百分比来表示，0%是动画的开始，100%是动画的结束。from和to相当于0%和100%；

绑定元素

然后将动画bigfonts绑定到p元素上就可以了。代码如下：

p:hover{
   animation: bigfonts 2s ease;  
}

效果已经实现了。这里说明一下animation的属性值：

bigfonts是动画的名称；
2s是动画一次完成的时间；
ease表示动画的速度曲线，动画以低速开始，然后加快，在结束前变慢。默认也是ease；

编程要求

根据提示，在右侧编辑器补充代码，实现当滑动到p元素上时，宽度从100px变为400px的效果。要求如下：

动画名称为changeColor；
动画一次完成的时间为2s；
动画的速度曲线为ease-in;
这里动画的开始，结束用from，to；

为了方便评测， CSS 都是需要以分号;结尾的。

效果如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document
    </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: orange;
        }

        /************* Begin ************/
        /* 创建动画 */
        @keyframes changeColor {
            from {
                width: 100px;
            }
            to {
                width: 400px;
            }
        }


        /*绑定元素*/
        p:hover {
            animation: changeColor 2s ease-in;
        }


        /************** End **************/


    </style>
</head>
<body>
<p></p>
</body>
</html>

Flec-hazo

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS从入门到精通——动画:简单的小动画

为了完成本关任务，你需要掌握：1.创建动画，2.绑定元素。来创建一个动画，然后把这个动画绑定到一个元素上就有效果了。本关任务：用 CSS3 实现简单的小动画。根据提示，在右侧编辑器补充代码，实现当。为了方便评测， CSS 都是需要以分号。创建一个动画，这个动画表示字体会从。
复制链接

扫一扫