Web 应用视觉

:before和:after伪类。这些伪类用来在选择元素之前和之后添加一些内容。:before和:after必须配合content来使用。这个属性通常用来给元素添加内容诸如图片或者文字。当:before和:after伪类用来添加某些形状而不是图片或文字时，content属性仍然是必需的，但是它的值可以是空字符串

例:.heart:before {
            content: "";
            background-color: yellow;
            border-radius: 25%;
            position: absolute;
            height: 50px;
            width: 70px;
            top: -50px;
            left: 5px;
}

通过rotate()实现旋转功能

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

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

例如:        animation-name设置动画的名称， 也就是要绑定的选择器的@keyframes的名称。

      animation-duration设置动画所花费的时间。

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

     例如:     animation-iteration-count: 3;

                           在这里动画会在运行 3 次后停止，如果想让动画一直运行，可以把值设置成 infinite。

               animation-timing-function规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。如果要 描述的动画是一辆车在指定时间内（animation-duration）从 A 运动到 B，那么animation-timing-function表述的就是车在运动中的加速和减速等过程。

{默认的值是ease，动画以低速开始，然后加快，在结束前变慢。其它常用的值包括ease-out，动画以高速开始，以低速结束;ease-in，动画以低速开始，以高速结束；linear，动画从头到尾的速度是相同的。}

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

关于设置的CSS动画重置:  

通过把animation-fill-mode设置成forwards来实现。animation-fill-mode指定了在动画结束时元素的样式。你可以向这样设置它：

animation-fill-mode: forwards;  使其不重置动画.

 

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

淡化元素: opacity 可以使其标记的元素产生渐隐效果