web前端入门之html+css实例-css动画1

web前端入门之html+css实例-css动画

学习笔记+实例1

1、linear-gradient()
linear-gradient(to right,red,yellow,blue,green);;
linearground(方向，色1，色2，色3…，末色)
相当于：linear-gradient(to right,red 0%,yellow 33.3%,blue 66.6%,green 99.9%);
默认方法，颜色均分渐变：

linear-gradient(to right,red 10%,yellow 20%,blue 30%,green 60%);
linear-gradient(方向，色1止位，色2起位，色3 起位，末色起位)
自定义起止位，其中的百分数是整体的线性元素百分数所表示的位置

方向属性：
to right（从左至右）
to left（从右至左）
deg(顺时针0deg、45deg、90deg、180deg、270deg、360deg）例：linear-gradient(45deg,red,yellow,blue,green)

2、transparent是全透明黑色(black)，等同于rgba(0,0,0,0)
3、animation的几种常用属性（默认值通常省略）
例：animation: animate 2s linear infinite;

1. animation-name 动画名称
2. animation-duration 执行一次需要的时间，即一个周期
3. animation-delay 开始前延迟的时间
4. animation-timing-function 以什么运行速度完成一个周期：
   （1）linear:表示动画从头到尾的速度都是相同的。
   （2）ease-in:表示动画以低速开始。
   （3）ease-out:表示动画以低速结束。
   （4）ease-in-out:表示动画以低速开始和结束。
5. animation-iteration-count(动画播放次数)
   （1）forwards:表示动画结束后，元素直接接使用当前样式。
   （2）backwards:表示在动画延迟时间元素使用关键帧中from的属性值或者to属性值（当animation-direction为reverse或者alternate-reverse时）
6. animation-direction(是否轮流反向播放动画)
   默认值是normal，动画正常播放。如果动画只播放一次，则该属性无效。
   常用的属性值为：
   （1）reverse:表示动画反向播放。
   （2）alternate:表示动画在奇数次播放时为正向播放，为偶数次播放时为反向播放。
   （3）alternate-reverse: :表示动画在奇数次播放时为反向播放，为偶数次播放时为正向播放。
   4、filter函数
   filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
   本次所用到的属性是:

• [1] hue-rotate（）：给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
• [2] blur():给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，
  所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

其余属性可参考：CSS3 filter(滤镜) 属性

5、伪元素::before,::after
看到过:before和:after,特地查了一下，单冒号是css2的写法，css3采用双冒号写法更为规范

.loader::after{
    content: '';
    position: absolute;
    background: #000;
    border-radius: 50%;
    z-index: 100;
}

content属性：

1. 默认为inline，至少要写个content=’ '，不能省略
2. css content: "(" attr(href) ")";引用文中某一个超链接的href
3. content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");引用媒体文件（URL/URI）
4. counter（）调用计数器，不适用列表实现序号功能
   未列举完，使用伪元素可以实现再在前面加上图标icon或者图片等功能，详细可参照博客::before和::after伪元素的用法
   6、z-index属性
   元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
   注：

• [1] 元素可拥有负的 z-index 属性值。
• [2] z-index 仅能在定位元素上奏效（例如 position:absolute;）
  顺便写了个小实例
  加载的渐变环
  
  2、给这个圆加上动画，色相旋转

@keyframes animate{
    from{
        transform: rotate(0deg);
        filter: hue-rotate(0deg);
    }to{
        transform: rotate(360deg);
        filter: hue-rotate(360deg);
    }
}

3、等大遮罩，遮掉圆，露出边界（我是这么做的，当然也可以写个小一点的遮罩），为了避免遮罩把边界发光遮住了，所以堆叠顺序设置好

.loader::before, .loader::after{
    content: '';
    position: absolute;
    background: #000;
    border-radius: 50%;
	z-index: 1;
}
.loader::before {
    top: 6px;
    left: 6px;
    bottom: 6px;
    right: 6px;
}

4、渐变发光

.loader::after{
	top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: linear-gradient(45deg,black 40%, #e5f403);
    filter: blur(30px);
    z-index: -1;
}

其中的top等定位是模糊的边界，相对于盒子loader的定位