css应用视觉设计

应用视觉设计：创建一个 CSS 线性渐变

HTML元素的背景色并不局限于单色。css还提供了颜色过渡，也就是渐变。可以通过background里面的linear-gradient()来实现线性渐变，下面是它的语法：

background:linear-gradient(gradient_direction,颜色1，颜色2，颜色3，...)

第一个参数指定了颜色过渡的方向-它的值是角度，90deg代表垂直渐变，45deg的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序：

例子：

background:linear-gradient(90deg,red,yellow,rgb(204,204,255));

应用视觉设计：使用 CSS 线性渐变创建条纹元素

repeating-linear-gradient()函数和linear-gradient()很像，主要区别就是repeating-linear-gradient()有很多参数，为了便于理解，只用到角度值和起止渐变颜色值。

角度就是渐变的方向。起止渐变颜色值代表渐变颜色及其宽度值，由颜色值和起止位置组成，起止位置用百分比或者像素值表示。

例子：渐变开始于0像素位置的yellow，然后过渡到距离开始位置40像素的blue。由于下一个起止渐变颜色值的起止位置也是40像素，所以颜色直接渐变成第三个颜色值green，然后过渡到距离开始位置80像素的red

repeating-linear-gradient( 45deg, yellow 0px, blue 40px, green 80px)

repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px )

如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹

应用视觉设计：通过添加细微图案作为背景图像来创建纹理

添加一个精致的背景图，可以增加页面的质感，让页面更美观。关键是要找到一个平衡点，抢了内容的风头，宣兵夺主可就不妙了。

background属性支持使用url()函数通过链接的方式引入一个指定纹理或样式的图片。图片链接地址在括号内，一般会用引号抱起来

用body选择器设置整个页面的background为url （https://i.imgur.com/MJAkxbh.png指定的图片。）

body{
     background:url(https://i.imgur.com/MJAkxbh.png);
}

应用视觉设计：使用 CSS Transform scale 属性可以更改元素的大小

css属性transform里面的scale()函数，可以用来改变元素的显示比例。下面的例子把页面的段落元素放大了2倍：

p{
    transform:scale(2); //scale() 调整元素的缩放比例
}

应用视觉设计：使用CSS Transform scale 属性在悬停时缩放元素

transform属性有很多函数，可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类描述元素的指定状态如 :hover时，transform属性可以方便的给元素添加交互

下面是当用户悬停段落元素时，段落大小缩放到原始大小2.1倍的例子：

p:hover{
     transform:scale(2.1); //缩放比例为2.1
}

应用视觉设计：使用 CSS Transform skex 属性沿X轴倾斜元素

接下来要介绍的transform属性是skewX,skewX使选择的元素沿着X轴(横向)翻转指定的角度。

下面的代码沿着X轴翻转段落元素-32度

p{
     transform:skewX(-32deg);//沿着X轴旋转-32度
}

应用视觉设计：使用 CSS 创建一个图形

术语表：

blur-radius => 模糊半径，

spread-radius => 辐射半径，

transparent => 透明的，

border-radius => 圆角边框

通过使用选择器选择不同的元素并改变其属性，你可以创造一些有趣的形状。

比如新月：你可以使用box-shadow属性来设置元素的阴影，border-radius属性控制元素的圆角边框。

首先你将会创建一个圆的、透明的对象，它具有模糊阴影并略微向两边递减。如你所见，这个阴影其实就是新月形状。

为了创建一个圆形的对象，border-radius应该被设置成50%。

你应该还记得之前关卡的box-shadow属性以及它的依次取值 offset-x、offset-y、blur-radius、spread-radius和颜色值。其中blur-radius和spread-radius是可选的。

box-shadow:offset-x offset-y blur-radius spread-radius color;
box-shadow:25px 10px 0px 0px yellow;

<style>
.content{
     position:absolute;
     top:0;
     right:0;   
     bottom:0;
     left:0;
     margin:auto;
     height:100px;
     width:100px;

     background-color:transparent; //原图形透明
     border-radius:50%;盒子的圆滑度
     box-shadow:25px 10px 0px 0px blue;
}


</style>
<div class="content"></div>

应用视觉设计：使用 CSS 和 HTML 创建更复杂的形状

世界上最流行的形状非心形莫属，用纯CSS创建一个心形。需要先了解 :before和 :after伪类。

这些伪类用来在选择元素之前和之后添加一些内容。在下面的例子里，:before伪类元素用来给class为heart的元素添加一个正方形

.heart{
      position:absolute;
      margin:auto;
      top:0;
      bottom:0;
      right:0;
      left:0;
      width:50px;
      height:50px;
      
      background-color:pink;
      transform:rotate(-45deg);
}
.heart:before{
      content:"";
      background-color:pink;
      border-radius:50%;
      position:absolute;
      height:50px;
      width:50px;
      bottom:25px;
      left:0px;
}

.heart:after{
      content:"";
      background-color:pink;
      border-radius:50%;
      position:absolute;
      height:50px;
      width:50px;
      top:0px;
      right:25px;
}

:before和:after必须配合content来使用。这个属性通常用来给元素添加内容诸如图片或文字。

当:before和:after伪类用来添加某些形状而不是图片或文字时，content属性仍然是必须的，但是它的值可以是空字符串。

在上面的例子，class为heart元素的:before伪类添加了一个粉色的正方形，正方形的height和width分别为50px。由于设置了其边框半径为50%，所以正方形为圆形，同时其相对位置为距离left0px，以及向top偏移25px。

class为heart元素的:after伪类添加了一个粉色的正方形，正方形的height和width分别为50px。由于设置了其边框半径为50%，所以正方形为圆形，同时其相对位置为距离left 0px，bottom偏移25px

应用视觉设计：了解 CSS 的关键帧和动画是如何工作的

如果要给元素添加动画，你需要了解animation属性以及@keyframes规则。

animation属性控制动画的外观，@keyframes规则控制动画中各阶段的变化。总共有8个animation属性。

• animation-name设置动画的名称，也就是要绑定的选择器的@keyframes的名称
• animation-duration设置动画所花费的时间
• animation-fill-mode:forwards; 设置动画结束始终高亮
• animation-iteration-count:infinite;设置动画播放次数,infinite无限循环播放

@keyframes能够创建动画。创建动画的原理是将一套css样式逐渐变化为另一套样式。具体是通过设置动画期间对应的frames的css的属性，以百分比来规定改变的时间，或者通过关键词 from 和 to，等价于0%和100%。打个比方，css里面的0%属性就像是电影的开场镜头。css里面的100%属性就是元素最后的样子，相当于电影里面的片尾。css在对应的时间内给元素过渡添加效果。

• opacity:0.1;设置动画元素隐身度

<style>
div{
      height:40px;
      width:70%;
      background:black;
      margin:50px auto;
      border-radius:5px;
}

#rect{
      animation-name:rainbow;
      animation-duration:4s;
}
@keyframes rainbow{
      0%{
            background-color:blue;
      }
      50%{
            background-color:green;
      }
      100%{
            background-color:yellow;
      }
}
</style>
<div id="rect"></div>

应用视觉设计：使用CSS动画更改按钮的悬停状态

你可以在按钮悬停时使用@keyframes改变按钮的颜色

下面是在图片悬停时改变图片宽度的例子

<style>
     img:hover{
          animation-name:width;
          animation-duration:1s;         
     }
     @keyframes width{
          100%{
               width:40px;
          }
     }
</style>
<img src="https://bit.ly/smallgooglelog" alt="Google‘s Logo" />

下面是在按钮悬停时改变按钮颜色的例子

<style>
     button{
          border-radius:5px;
          color:white;
          background-color:#0f5897;
          padding:5px 10px 8px 10px;
     }

     button:hover{
          animation-name:background-color;
          animation-duration:1s;
     }
     @keyframes background-color{
          100%{
               background-color:#4791d0;
          }
     }
</style>
<button>注册</button>

应用视觉设计：修改动画的填充模式

注意动画在1s之后重制了，所以按钮又变回了原来的颜色。而我们想要的效果是按钮在悬停时始终高亮。

这可以通过吧animation-fill-mode设置成forwards来实现

animation-fill-mode指定了在动画结束时元素的样式。你可以像这样设置它：

animation-fill-mode:forwards;

应用视觉设计：使用 CSS 动画创建运动

当元素的position被指定，如fixed或者relative时，css偏移属性right、left、top、bottom可以用在动画规则里创建动作。

就像下面的例子展示的那样，你可以在50%keyframes处设置top属性为50px，在开始(0%)和最后(100%)keyframes处设置为0px，以产生项目向下运动，然后返回的动作效果。

@keyframes rainbow{
     0%{
          background-color:blue;
          top:0px;
     }
     50%{
          background-color:green;
          top:50px;
     }
     100%{
          background-color:yellow;
          top:0px;
     }
}

应用视觉设计：通过从左到右淡化元素来创建视觉方向

改变动画元素的opacity，使其在到达屏幕右侧时渐隐。

在展示的动画里，具有渐变背景的圆形元素在50%标记的@keyframes规则处向右移动。

<style>
#ball{
      width:70px;
      height:70px;
      position:absolute;
      left:20%;
      border-radius:50%;
      background:linear-gradient(
            35deg,
            #ccffff,
            #ffcccc
      );
      animation-name:fade;
      animation-duration:3s;
}
@keyframes fade{
      100%{
            left:60%;
            opacity:0.1;
      }
}
</style>
<div id="ball"></div>

应用视觉设计：使用无限的动画计数制作永不停止的动画

animation-iteration-count，这个属性允许你控制动画循环的次数。

animation-iteration-count:3; //动画会播放3次
animation-iteration-count:infinite; //动画会一直运行

应用视觉设计：使用无限的动画计数制作 CSS 心跳

用animation-iteration-count 属性创造持续动画的例子，它基于前面创建的心形。

心跳动画的每一秒包含两个部分。

heart元素(包括:before和:after)使用transform属性改变其大小，背景div使用background属性改变其颜色

<style>
.back{
     position:fixed;
     padding:0;
     margin:0;
     top:0;
     left:0;
     width:100%;
     height:100%;
     background:white;
     animation-name:backDiv;
     animation-duration:1s;
     animation-iteration-count:infinite;
}
.heart{
     position:absolute;
     margin:auto;
     top:0;
     right:0;
     bottom:0;
     left:0;
     background-color:pink;
     height:50px;
     width:50px;
     transform:rotate(-45deg);
     animation-name:beat;
     animation-duration:1s;
     animation-iteration-count:infinite;
}
.heart:after{
     content:"";
     background-color:pink;
     border-radius:50%;
     width:50px;
     height:50px;
     position:absolute;
     top:0px;
     left:25px;
}
.heart:before{
     content:"";
     width:50px;
     height:50px;
     border-radius:50%;
     background-color:pink;
     position:absolute;
     bottom:25px;
     left:0px;
}
@keyframes backDiv{
     50%{
          background:#ffe6f2;
     }
}
@keyframes beat{
     0%{
          transform:scale(1) rotate(-45deg);
     }
     50%{
          transform:scale(0.6) rotate(-45deg);
     }
}
</style>
<div class="back"></div>
<div class="heart"></div>

应用视觉设计：以可变速率来给元素添加动画

改变相似元素的动画频率的方法有很多。目前接触到的就有animation-iteration-count和@keyframes。

举例说明，动画包含了两个小星星，每个小星星都在20%@keyframes处变小并且opacity变为20%，也就是一闪一闪的动画效果。你可以通过改变其中一个星星的@keyframes规则以使两个小星星不同的频率闪烁。

应用视觉设计：以可变速率来给多个元素添加动画

通过改变多个元素的animation-duration来达到同样的效果。

每个星星的animation-duration属性为不同值使其具有不同的闪烁频率

应用视觉设计：使用关键字更改动画定时器

在css动画里，animation-timing-function规定动画的速度曲线。

速度曲线定义动画从一套css样式变成另一套所用的时间。

如果要描述的动画是一辆车在指定时间内（animation-duration）从A运动到B，那么animation-timing-function表述的就是车在运动中的加速和减速等过程。

已经有了很多预定义的值可以直接使用于大部分场景。

比如，默认值ease，动画以低速开始，然后加快，以结束前变慢

ease-out，动画以高速开始，以低速结束；

ease-in，动画以低俗开始，以高速结束

linear，动画从头到尾的速度都是相同的

<style>
.balls{
     width:50px;
     height:50px;
     border-radius:50%;
     background:linear-gradient(
          35deg,
          #ccffff,
          #ffffcc
     );
     position:absolute;
     margin-top:50px;
     animation-name:bounce;
     animation-duration:2s;
     animation-iteration-count:infinite;
}
.ball1{
     left:27%;
     animation-timing-function:linear;
}
.ball2{
     left:56%;
     animation-timing-function:ease-out;
}
@keyframes bounce{
     0%{
          top:0px;
     }
     100%{
          top:249px;
     }
}
</style>
<div class="balls ball1"></div>
<div class="balls ball2"></div>

应用视觉设计：学习贝塞尔曲线的原理

除了animation-timing-function定义不同时间内的动画速度。css还提供了贝塞尔曲线(Bezier curves)来更出色的控制动画的速度曲线

在css动画里，用cubic-bezier来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在1*1坐标系统内，曲线的X轴代表动画的时间间隔(类似于时间比例尺)，Y轴代表动画的改变。

cubic-bezier函数包含了1*1网格里的4个点：p0、p1、p2、p3.

其中p0和p3是固定值，代表曲线的起始点和结束点，坐标值依次是(0,0)和(1,1)。你只需要设置另外两点的x值，y值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。在css里面通过(x1,y1,x2,y2)来确定p1和p2.综上，下面就是css贝塞尔曲线的例子

animation-timing-function:cubic-bezier(0.25,0.25,0.75,0.75);

在上面例子里，两个点的x和y值相等(x1=0.25=y1 和 x2=0.75=y2)，如果你还记得初中几何，结果是从原点到点(1，1)的一条直线。动画速度呈线性，效果和linear一致。换言之，元素匀速运动

应用视觉设计：使用贝塞尔曲线移动图形

前面涉及的ease-out预定义值描述了动画以告诉开始低俗结束。ease-out预定义值可以用贝塞尔曲线函数实现。

通俗的讲，将一条直线放在范围只有1的坐标轴中，并从中间拿p1和p2两个点来拉扯 （X轴的取值区间是[0,1]，Y轴任意），最后形成的曲线就是动画的贝塞尔加速度曲线。

animation-timing-function:cubic-bezier(0,0,0.58,1); //高速开始，低速结束 ease-out

应用视觉设计：使用贝塞尔曲线让运动更加自然

当animation-iteration-count值为 infinite 时animation-timing-function会自动循环 keyframe。由于是在动画周期中间（50%处）设置的 keyframe 规则，最终的结果是球向上和球向下是两个同样的动画过程。

cubic-bezier(0.3, 0.4, 0.5, 1.6);

注意 y2 的值是大于 1 的。虽然贝塞尔曲线是在 1*1 的坐标系统内 x 值只能在 0 到 1，但是 y 值是可以大于 1 的。这样才能模拟杂耍球运动。