CSS自定义字体与动画：为网页增添独特魅力

CSS高级语法之自定义字体与动画

---

---

前言

在现代网页设计中，CSS（层叠样式表）为我们提供了丰富的工具来打造富有吸引力和独特性的用户体验。其中，自定义字体和动画是两个非常强大的功能。

---

一、CSS自定义字体

为什么要自定义字体

默认的系统字体虽然能够满足基本的阅读需求，但在追求独特品牌形象或特定设计风格时，就显得有些力不从心了。自定义字体可以让网站拥有独一无二的视觉识别性，与品牌的整体风格更好地融合。

如何实现自定义字体

使用@font - face规则

• 首先，你需要有字体文件。常见的字体格式有TrueType（.ttf）、OpenType（.otf）、Web Open Font Format（.woff和.woff2）等。
• 然后，在CSS中使用@font - face规则来定义字体。例如：

 @font-face {
            /*定义服务器字体名称*/
            font-family: 'www';
            src: url("font/HanYiXingKaiJian-1.ttf");
        } 
        @font-face {
            font-family: 'hhh';
            src: url("font/AaFengKuangYuanShiRen-2.ttf");
        }

应用自定义字体

一旦定义了字体，就可以像使用普通字体一样在CSS选择器中应用它。例如：

 .sty2{
        font-family:'hhh';
        font-size: 50px;
        color: greenyellow;
        background-color: pink;
    
    }
    

二、CSS动画

CSS动画的基础概念

CSS动画允许我们在不使用JavaScript（虽然JavaScript也可以创建更复杂的动画，但CSS动画在简单场景下非常方便）的情况下创建动态效果。它通过在一定的时间内改变元素的样式属性来实现动画效果。

创建简单的CSS动画

过渡动画 transition:复合属性

• transition-property:设置那个属性渐变 all所有属性
• transition-duration: 设置过渡时间
• transition-timing-function渐变的函数 linear匀速 ease 慢快慢 ease-in 慢快 ease-out快慢
• transform旋转属性
• transition: all 2s ease-out 是transition的缩写形式

 	transition: all 2s ease-out; 
     transition-property: width;
     transition-duration: 2s;
     transition-timing-function: ease-out; 

定义动画关键帧

使用@keyframes规则来定义动画的关键帧。例如，我们创建一个简单的淡入动画：

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

将动画应用到元素上

定义好关键帧后，我们可以将动画应用到元素上。例如：

div {
 animation: fadeIn 2s ease - in - out;
}

播放动画属性

• 一个时间是动画的持续时间，有两个时间，后面是动画的延迟时间 animation: bbb 6s linear 2s ;
• 动画名称 animation-name: aaa;
• 动画的播放时间 animation-duration: 4s;
• 动漫的快慢 animation-timing-function: linear;
• 动画延迟时间 animation-delay: 2s;
• 动画执行的次数2次，infinite无限 animation-iteration-count: 2;
• 开始–结束结束–开始，设置动画的执行方向 animation-direction: alternate;

更复杂的CSS动画

多个关键帧

我们可以在@keyframes规则中定义多个关键帧来创建更复杂的动画。例如：

  @keyframes aaa {
          /* form（开始）|to（结束）|百分比（到那个阶段） */
          50%{
              width: 80px;
              height: 80px;
              border-radius: 20px;
              background-color: yellow;}
          100%{
              width: 300px;
              height: 300px;
              background-color: green;
              border-radius: 0;
          }
      }

这个动画模拟了一个弹跳的球，在0%时球在初始位置，50%时球向上弹起并且透明度降低，100%时球又回到初始位置并且恢复完全不透明。

动画属性组合

我们可以组合多个动画属性来创建更丰富的动画效果。例如：

div {
  animation: bouncingBall 3s ease - in - out, rotate 5s linear infinite;
}

这里我们将bouncingBall动画和一个名为rotate（假设已经定义好的旋转动画）同时应用到div元素上，一个动画持续3秒，另一个持续5秒并且无限循环。

---

总结

CSS自定义字体和动画为网页设计师提供了广阔的创意空间。通过巧妙地运用这些功能，我们可以创建出令人印象深刻的网站，吸引用户的注意力并提升用户体验。