百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

居然可以通过动画快速学习 css

myzbx 2025-03-11 19:10 14 浏览

文/ 阿里 淘系 F(x)Team - 旭伦

随着业务对前端的需求越来越多,作为前端三大法宝之一的css也越变越复杂。给初学的同学们带来了一定的压力。css具体到每一个属性也都没有多复杂,主要问题在于知识点比较多。好不容易把主要知识点学完了,一看网上的题,或者是一看大师们写的css的书,又被淹没到新的海洋中。

其实人类的大脑不善于记忆零散的知识点,但是如果有一条逻辑线能够将这些知识串联起来,就能大大方便大脑的记忆和搜索。这个线索要有逻辑,最好还有趣。

刚好,css的动画就是这样一条有趣的线索,可以在动画的变化中理解css属性。

比如我们知道css增加了圆角矩形的border-radius属性,那么设置不同大小的圆角,是什么样的效果呢?与其一次次地改大小去试验,不如我们做成一个动画让其一目了然:


我们还可以让其移动位置中变形:


甚至我们还能让其转圈:


CSS动画快速扫盲

在串起其它属性之前,我们先理解下动画。

动画的核心关键词在于“动”。 我们要回答几个问题:

  • What: 什么东西动?
  • Where: 往哪里动?
  • When: 什么时候动?动多久?
  • How: 怎么动?
  • How much: 动多少次?

这些问题的结果,就构成了一个动画的构成要素。

首先是动的主体是什么?就是我们的HTML标签,或者是标签构成的复杂组件之类的。对我们来说,主要就是

和. 第二,往哪里动?这就是要变化的css属性。这也是我们想用来串起来的css的知识点。 第三,什么时候动?我们需要指定动画的时长,起始的时机等等。这是纯动画的技术属性。 第四,怎么动?是匀速动,还是加速动,还是先加速再减速,还是要搞个贝塞尔曲线之类的,这也是动画的技术属性。 第五,动多少次?是一次,还是多次,还是一直动下去?这也是纯动画的技术属性。

transition动画

我们先学习一个简单的css属性动画,叫做transition。 它就是由上面的4个属性组成的:

  • transition-property: 指定要变的css属性值
  • transition-duration: 动画时长
  • transition-timing-function: 动画的快慢变化
  • transition-delay: 动画起始的延迟时间

我们来看个例子:

        #hellocss {
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: linear;
            transition-delay: 1s;
        }

这个动画指定的意思是说,如果宽度width变化了,则延迟一秒运行5秒宽度变化的动画。变化速度是匀速的。

为了看得清楚,我们设一个初始的width,再加上一个背景色和前景色:

    

既然是动画,那么要有变化。 于是我们写两句javascript:

    <script>
        function trans1(){
            let hcss1 = document.getElementById("hellocss");
            hcss1.style.width = "100px"; 
        }
    </script>

然后找个事件来触发这个变化,比如我们在页面加载时来做:

  
    
Hello,HTML
Hello,CSS
<script> function trans1(){ let hcss1 = document.getElementById("hellocss"); hcss1.style.width = "100px"; } </script>

完整的代码如下:



  
    
    
  
  
    
Hello,HTML
Hello,CSS
<script> function trans1(){ let hcss1 = document.getElementById("hellocss"); hcss1.style.width = "100px"; } </script>

熟练了之后,我们也可以将4个属性简写成一个:

transition: width 5s linear 1s;

如果没有延时,第4项可以不写。 如果采用先慢后快的ease方式,第3项也可以省略。 如果第一项是什么变都动,可以写成all。 但是第二项动画时长不能不写,不写默认是0秒,就啥也没有了。

所有的可以线性计算的属性都可以用来进行动画。除了宽、高、位置等容易理解的坐标属性,颜色属性也是经常被用来做动画的好场景。 我们来看一个从蓝底黄字到白底黑字的动画过程:



  
    
    
  
  
    
Hello,HTML
Hello,CSS
<script> function trans1(){ let hcss1 = document.getElementById("hellocss"); hcss1.style.backgroundColor = "white"; hcss1.style.color="red"; } </script>

keyframes动画

上面的transition比较简单,针对于比如要循环多少次,或者变过去还要再变回来,或者中间要变几次等,我们就需要指定更多的属性。这些需求就由keyframes动画来满足。

keyframes动画的好处就是起点和终点都在keyframes中指定,不用再写事件去改变了, 全部在css中完成:

        @keyframes color_change{
            from {
                background-color: blue;
                color: yellow;
            }
            to {
                background-color: white;
                color: black;
            }
        }

然后我们在一个css选择器里面去引用定义好的keyframes动画,同时指定动画时长、变化曲线和延时:

        #hellocss {
            animation-name: color_change;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-delay: 1s;
        }

到了keyframes动画,我们终于可以指定播放多少次了,比如连播三次:

        #hellocss {
            animation-name: color_change;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-iteration-count: 3;
        }

甚至可以无限性地播放下去:

            animation-iteration-count: infinite;

光循环播还不过瘾,我们还想先正着变,然后再变回来,我们可以将方向设为交替播放:

animation-direction: alternate;

把上面的综合在一起,大家跑起来看看:



  
    
    
  
  
    
Hello,HTML
Hello,CSS

而其实呢,from和to,分别是0%和100%的别名,也可以这么写:

      @keyframes color_change {
        0% {
          background-color: blue;
          color: yellow;
        }
        100% {
          background-color: white;
          color: black;
        }
      }

这样我们可以增加百分比,让变化变得更有趣一些:

      @keyframes color_change {
        0% {
          background-color: blue;
          color: yellow;
        }
        50% {
          background-color: yellowgreen;
          color: red;
        }
        100% {
          background-color: white;
          color: black;
        }
      }

最后,如果想让动画播放暂停怎么办? 我们可以通过修改animationPlayState属性为paused来实现,比如我们让点击第一个div来实现暂停功能:

  
    
Hello,HTML
Hello,CSS
<script> function trans1() { let hcss1 = document.getElementById("hellocss"); hcss1.style.animationPlayState = "paused"; } </script>

通过动画形象理解css属性

变形 - 圆角矩形


我们现在终于可以看看开篇时的第一个动画是如何写成的了:

      @keyframes color_change {
        0% {
          background-color: blue;
          color: yellow;
          border-radius: 0px;
        }
        50% {
          background-color: yellowgreen;
          color: red;
        }
        100% {
          background-color: palegoldenrod;
          color: black;
          border-radius: 100px;
        }
      }

平面移动:transform:translate属性

最简单的平移方式就是使用transform:translate属性。比如我们开篇的第二个动画:

我们先让变色的圆角矩形向下移100px,然后再右移100px:

            0% {
                background-color: blue;
                color: yellow;
                border-radius: 0px;
                transform:translate(0px,0px)
            }
            50% {
                background-color: yellowgreen;
                color: red;
                transform:translate(0px,100px)
            }
            100% {
                background-color: palegoldenrod;
                color: black;
                border-radius: 100px;
                transform:translate(100px,100px)
            }
        }

旋转:transform:rotate属性

最后我们看旋转属性。


        @keyframes color_change{
            0% {
                background-color: blue;
                color: yellow;
                border-radius: 0px;
                transform:translate(0px,0px);
                transform:rotate(0deg);
            }
            50% {
                background-color: yellowgreen;
                color: red;
                transform:translate(0px,100px);
                transform:rotate(90deg);
            }
            100% {
                background-color: palegoldenrod;
                color: black;
                border-radius: 100px;
                transform:translate(100px,100px);
                transform:rotate(180deg);
            }
        }

通过动画学习盒子模型

让我们回归基础,通过动画来了解盒子模型。

所谓盒子,最基础的就是宽和高。 这没啥可说的,来个宽高动画先体验一下:



  
    
    
  
  
      
Hello Box


除了宽高之外,盒子有边框,边框内部有padding,边框外面还有margin。

包括边框在内,都分为top, bottom, left, right四个方向:

        border-width: 5px;
        border-top-color: #f5222d;
        border-bottom-color: #cf1322;
        border-left-color: #a8071a;
        border-right-color: #820014;
        padding: 10px;
        margin: 15px;

我们现在给边框加上颜色和形状,带着margin和padding动起来看看效果:

代码如下:



  
    
    
  
  
    
Hello Box

打开chrome的开发者工具,我们可以更清楚地看清content, padding, border, margin, 之间的关系:


Border取5px只是为了让其更容易被识别,但是太丑了,我们将其改为2px。效果就好得多了:

相关推荐

砌体植筋拉拔试验检验值到底是6.0KN,还是10.2KN,如何计算确定

砌体拉结筋植筋养护完成后,需对所植钢筋进行拉拔试验,以检验植筋的锚固强度是否满足设计要求。检测时,按照一定的抽样比例进行拉拔试验。根据《混凝土结构后锚固技术规程》JGJ145-2013,以同品种、同...

柴油机功率如何计算?计算柴油机功率需要哪些参数?

在汽车领域,对于柴油机功率的计算是一项重要的工作,它有助于我们更好地了解柴油机的性能和适用场景。下面我们就来详细探讨一下柴油机功率的计算方法以及所需的参数。首先,我们要了解计算柴油机功率常用的公式。在...

变压器短路阻抗的作用和计算方法(变压器短路阻抗的作用和计算方法是什么)

变压器短路阻抗的作用和计算方法短路阻抗是在负载试验中测量的一项数据,它是二次侧短接并流过额定电流时,一次侧施加的电压与额定电压的的百分数。那么测量变压器的短路阻抗有什么意义呢?其实变压器的阻抗电压乃是...

9.35m层高高支模支撑架计算书(支模架多高属于高支模)

某工厂新扩建的建筑面积为1989.2m^2,建筑物总体分为2层,但局部为4层。建筑物檐高19.4m,建筑物总高23m。建筑物呈长方形设置,长度为48.20m,宽度为23.88m,结构形式为框架结构...

吊篮(悬挂装置前梁加长)安全复核计算书

吊篮(悬挂装置前梁加长)安全复核计算书一种超常规搭设的高处作业吊篮,因使用要求将吊篮悬挂装置前梁加长设置,本计算书针对这种工况的校核,以作参考。计算依据:1、《高处作业吊篮》GB/T19155-...

电功率计算公式精编汇总(电功率计算视频讲解)

一、电功率计算公式:1在纯直流电路中:P=UIP=I2RP=U2/R式中:P---电功率(W),U---电压(V),I----电流(A),R---电阻(Ω)。2在单相交流电路中:P=UIcosφ...

灌注桩承载力检测方法及步骤(灌注桩承载力不够怎么办)

检测灌注桩的承载力是确保基础工程安全可靠的关键环节,检测结果的精细能准确为我们提供可靠的数据,让我们能准确判断桩基础的承载力,方便后续施工安排,同样也能让我们根据数据分辨出有问题桩基,采取可靠有效的措...

很哇塞的体积计算方法:向量叉乘 很哇塞的体积计算方法

高中数学必看:向量叉乘,体积的神。大家都知道a、b的向量是什么意思,但是a、b的向量又是什么?很多同学都不知道,向量的向量在高中阶段非常有用,虽然它是大学的知识,在高中阶段可以干两件事。·第一件事,表...

施工升降机基础(设置在地库顶板回顶)计算书

施工升降机基础(设置在地库顶板回顶)计算书计算依据:1、《施工现场设施安全设计计算手册》谢建民编著2、《建筑地基基础设计规范》GB50007-20113、《混凝土结构设计标准》GB/T50010-2...

剪力墙水平钢筋根数如何计算?(剪力墙水平钢筋绑扎搭接规范)

剪力墙水平钢筋根数的计算需综合考虑墙高、起步距离、间距及构造要求等因素,具体步骤如下及依据:1.基本计算公式水平钢筋根数计算公式为:根数=(墙高-起步距离)/间距(墙高-起步距离)/间距...

直流电路常用计算公式(直流电路常用计算公式有哪些)

1、电阻导体阻碍电流通过的能力叫做电阻,用字母R表示,单位欧(Ω)。R=ρl/s式中R-导体的电阻,欧(Ω);ρ-导体的电阻率,欧·米(Ω·m);l-导体的长度,米(m);s-导体的截面积,平方米(m...

电气主电路图的绘制特点(电气原理图主电路)

1、电气主电路图中的电气设备、元件,如电源进线、变压器、隔离开关、断路器、熔断器、避雷器等都垂直绘制,而母线则水平绘制。电气主电路图除特殊情况外,几乎无一例外地画成单线图,并以母线为核心将各个项目(如...

中考总复习:物理专题 功和机械能 (功的计算、功率、动能、势能)

中考物理专题:功与机械能解析一、力学中的功——能量转化的桥梁功是力对物体能量变化的量度,需满足两要素:作用在物体上的力、物体沿力方向移动距离。例如推箱子时,若箱子未移动,推力不做功;若箱子滑动,推力做...

40亿QQ号,不超过1G内存,如何去重?

分享一道网上很火的面试题:40亿QQ号,不超过1G的内存,如何去重?这是一个非常经典的海量数据去重问题,并且做了内存限制,最多只能1GB,本文跟大家探讨一下~~一、常规思路我们日常开发中,如果谈到去重...

填充墙体拉结筋植筋深度、孔径、拉拔试验承载力计算!

今天分享下植筋间距及保护层要求:根据JGJ145-2013混凝土后锚固技术规程要求植筋与混凝土结构边缘不应小于5mm,植筋为两根及以上时水平间距为不应小于5d(d为钢筋直径)。根据混凝土结构后锚固技...