只需几行CSS就能让你的网页摇身大变。

CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子,可能只是几行代码,但是添加到Web应用程序中,却会让它增色不少。

如下是我们将在本教程中构建的代码

在这个项目中,我们将把过渡效果应用到一个 class box 的元素上面。这个 box 元素内部是垂直和水平居中的文字内容。HTML结构相当简单:

<div class='box'>
  <p>TEXT</p>
</div>
    

CSS代码也一样简单。我们想要使用无衬线字体,并确保div中的段落文本是白色的,可以通过如下代码来实现:

body {
  color: white;
  font-family: Helvetica, Sans-Serif;
    

另外,给box元素添加如下CSS属性:

.box {
  width:200px;                 /* Set the Width of box          */
  height:50px;                 /* Set the Height of box         */
  background:#424242;          /* Dark Grey Background color    */
  transition:all 0.25s ease;   /* Transition settings           */
  display: flex;               /* Use Flexbox on P              */
  align-items: center;         /* Center P                      */
  justify-content: center;     /* Center P                      */
  margin: 10px;                /* Apply a margin around our Box */
        
  • 无论你对CSS的过渡属性熟悉与否,我们在这里都来简要介绍一下,一共分为三步。.第一步,我们需要将它应用到 all变化的属性。接下来,设置过渡时长为0.25秒。最后,将动画函数选为easeease的表现状态就是起止过程比较缓慢,中间过渡迅速。
  • holly high! 目前准备工作都已经就绪,接下来就是添加过渡效果了。到目前为止,div看起来应该像下面这样。

    1. 褪色效果

    首先,添加一个褪色的过渡。新建一个div元素,并为它添加一个名为fade的类:

    <div class='box fade'>
      <p>FADE HERE</p>
    </div>
        

    接下来我们所需要做的就是为这个fade类指定悬停规则。我们需要借助CSS伪类选择器:hover来完成这件事情。这个伪类选择器对所有的元素都有效,并且会在元素处于鼠标指针悬停状态下的时候激活CSS声明。基于此,我们借助:hover选择器将div的透明度改为0.5

    .fade:hover {
      opacity: 0.5;
        

    简单吧。上面这句CSS声明就为div指定了一个悬停效果。如下就是目前它展现的样子。而你之所以能够看到过渡样式,是因为我们一开始在名为box的类中使用了transition:all 0.25s ease;的声明。看下面,是不是一个还不错的褪色效果:

    2. 来点颜色看看

    指定一个变色过渡其实和褪色过渡的过程异曲同工。首先,创建一个div元素,并为它添加一个名为color的类。

    <div class='box color'>
      <p>COLOR HERE</p>
    </div>
        

    同样地,我们也要借助:hover选择器来帮我们完成这件事,但是这一次我们不是改变透明度而是背景色:

    .color:hover {
      background: #FF5722;
        

    如下就是实际效果了:

    3. 一起摇摆

    接下来,来实现一个摆动的效果。这个效果实现起来比前面的两个例子稍显复杂。在这个例子中,我会采用@keyframes来完成。

    @keyframes——赋予你在一个CSS动画序列中控制中间步骤的魔力。

    首先还是一样,你肯定已经听烦了,创建一个div元素,并未它添加一个名为wiggle的类:

    <div class='box wiggle'>
      <p>WIGGLE WIGGLE</p>
    </div>
        

    接下来,我们要做的就是借助@keyframes来创建动画。我们先给动画起个名字,就叫wiggle吧。并在如下的代码中添加抖动效果的实现:

    @keyframes wiggle {
      20%  { transform: translateX(4px);  }
      40%  { transform: translateX(-4px); }
      60%  { transform: translateX(2px);  }
      80%  { transform: translateX(-1px); }
      100% { transform: translateX(0);    }
        

    从上面的代码已经可以看出,@keyframes赋予我们将动画分解成单步,并且精确定义每一步发生了什么的能力。通过百分比的方式指定动画的进度:

  • 20%——div相对于初始位置右移4px。
  • 40%——div相对于初始位置左移4px。
  • 60%——div相对于初始位置右移2px。
  • 80%——div相对于初始位置左移1px。
  • 100%——div恢复到初始位置。
  • 现在我们就能借助:hover选择器来展示 wiggle的动画了:

    .wiggle:hover {
      animation: wiggle 1s ease;
      animation-iteration-count: 1;
        

    我们将animation设置成wiggle。同时希望动画持续1秒的时长,采用ease的动画效果。

    最后,就是指定动画在每次鼠标指针悬停的时候触发一次。

    下图就是最终的动画效果:

    简单地例子已经无法满足你了?

    CSS的真实魔力会出乎你的意料。如果你对它真的很感兴趣的话,出门右转:Master CSS — Learn CSS3, CSS4, Flexbox, Animations, Grids, Frameworks, and More!!

    哦哦差点忘了,看一眼浏览器兼容性吧。。。

    看!支持程度还不错吧!尽管如此,我们在使用的时候还是要考虑到兼容旧版本浏览器,别忘了补齐前缀哦。如下的表格向我们展示了各大浏览器对animation属性和带前缀的animation属性的支持程度:

    浏览器对animation的支持程度。源 W3Schools

    有的同学是不是还没怎么接触过前缀呀,其实它就是一些浏览器在CSS标准出来之前实现的实验属性。借助前缀,能够确保在一些老版本浏览器中体验animation属性。而且在写CSS动画的时候总是加上前缀也是个相当不错的习惯。为了让我们上面实现的wiggle代码能够最大程度上获得浏览器支持,可以将代码改进如下:

    @-webkit-keyframes wiggle {
      20%  { 
        -webkit-transform: translateX(4px);
        transform: translateX(4px);  
      40%  {
        -webkit-transform: translateX(-4px);
        transform: translateX(-4px); 
      60%  {
        -webkit-transform: translateX(2px); transform: translateX(2px);  
      80%  {
        -webkit-transform: translateX(-1px); transform: translateX(-1px); 
      100% { 
        -webkit-transform: translateX(0); transform: translateX(0);
    @keyframes wiggle {
      20%  { 
        -webkit-transform: translateX(4px);
        transform: translateX(4px);  
      40%  {
        -webkit-transform: translateX(-4px);
        transform: translateX(-4px); 
      60%  {
        -webkit-transform: translateX(2px); transform: translateX(2px);  
      80%  {
        -webkit-transform: translateX(-1px); transform: translateX(-1px); 
      100% { 
        -webkit-transform: translateX(0); transform: translateX(0);
        

    别忘了在:hover中也加上前缀:

    .wiggle:hover {
     -webkit-animation: swing 1s ease; animation: wiggle 1s ease;
     -webkit-animation-iteration-count: 1; animation-iteration-count: 1;
        

    正如你所看到的,带有前缀的属性其实和其他CSS属性声明并无差异。唯一的区别在于它们在开头的地方需要加上-webkit-

    想在CodePen当中看看效果?

    老铁没毛病。如你所愿,下面能够看到所有的代码、按钮以及动画。

    See the Pen &amp;amp;amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;#39;&amp;amp;amp;lt;a href=&amp;amp;amp;quot;https://codepen.io/bmorelli25/pen/qXoPYx/&amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;gt;3&amp;amp;amp;quot;&amp;amp;amp;gt;https://codepen.io/bmorelli25/pen/qXoPYx/&amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;gt;3&amp;amp;amp;lt;/a&amp;amp;amp;gt; Simple CSS Hover Transitions&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt; by brandon (&amp;amp;amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;#39;&amp;amp;amp;lt;a href=&amp;amp;amp;quot;https://codepen.io/bmorelli25&amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;gt;@bmorelli25&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt&amp;amp;amp;quot;&amp;amp;amp;gt;https://codepen.io/bmorelli25&amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;gt;@bmorelli25&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt&amp;amp;amp;lt;/a&amp;amp;amp;gt;;) on &amp;amp;amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;#39;&amp;amp;amp;lt;a href=&amp;amp;amp;quot;https://codepen.io&amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt&amp;amp;amp;quot;&amp;amp;amp;gt;https://codepen.io&amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt&amp;amp;amp;lt;/a&amp;amp;amp;gt;;.
    分类:
    前端