day8 CSS3渐变gradients+CSS3过渡transition-Toy模板网

这篇具有很好参考价值的文章主要介绍了day8 CSS3渐变gradients+CSS3过渡transition。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

CSS3过渡(transitions)

属性

transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。

举例来说：

transition-property: width;：指定过渡效果应用于元素的宽度属性。
transition-duration: 1s;：指定过渡效果持续的时间，这里设置为1秒。
transition-timing-function: linear;：指定过渡效果的时间曲线，这里设置为线性，即匀速运动。
transition-delay: 2s;：指定过渡效果延迟开始的时间，这里设置为2秒。

下图是其实是动态的，可以自己用代码试一下：
css过度效果,记录前端学习,css3,前端,学习

图1（紫色从左到右过渡到粉色）：设置宽度属性的过渡效果为2秒。这意味着当宽度发生改变时，会以2秒的时间进行过渡动画。
当鼠标悬停在元素上时，将宽度增加到300像素。
因此，当鼠标悬停在元素上时，宽度会从100像素平滑地过渡到300像素，过渡时间为2秒。
图二（黑色从左上角到右下角过渡到白色）：在元素的宽度属性上应用一个持续时间为1秒的线性过渡效果，延迟2秒后开始过渡。

线性渐变的语法继续往后看。

#transition {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
    -webkit-transition: width 2s;
}

#transition:hover {
    width: 300px;
}

/* 渐变 */
#transition {
    height: 200px;
    background-image: linear-gradient(to right, plum, pink);
}

/* 在元素的宽度属性上应用一个持续时间为1秒的线性过渡效果，延迟2秒后开始过渡 */
#transition2 {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(to bottom right, black, white);
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* 兼容 Safari 浏览器 */
    -webkit-transition-property: width;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 2s;
}

#transition2:hover {
    width: 300px;
}

CSS3 渐变（Gradients）

线性渐变

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
（无方向时默认从上到下）

下图为彩虹色和包含透明色的示例：

css过度效果,记录前端学习,css3,前端,学习

#rainbow {
    height: 200px;
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    /* 标准必须放在最后 */
}

#transparent {
    height: 200px;
    background-image: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(0, 153, 255, 255));
}

CSS3 径向渐变

径向渐变由它的中心定义。

创建一个径向渐变，必须至少定义两种颜色节点。同时，也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
语法：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

可以自己试试。比如background-image: radial-gradient(circle, pink, lightblue, lightgreen);的效果是这样的：
css过度效果,记录前端学习,css3,前端,学习文章来源地址https://www.toymoban.com/news/detail-797293.html