CSS3学习笔记——渐变、变形、过渡、动画等效果——day five

最新推荐文章于 2024-07-28 18:53:40 发布

谷粟子

最新推荐文章于 2024-07-28 18:53:40 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_38395419/article/details/83312315

版权

这篇博客详细介绍了CSS3中的渐变效果，包括线性渐变和径向渐变；变形效果，如transform、transform-origin及3D变形属性；过渡效果，涵盖transition系列属性；以及动画效果的基础知识，包括关键帧动画的声明和使用。

摘要由CSDN通过智能技术生成

1.transition-property

2.transition-duration

3.transition-timing-function

4.transition-delay

5.简写

六、动画效果

一、CSS3 前缀

在 CSS3 的很多新属性推出时，这些属性还处在不太稳定的阶段，随时可能被剔除。而此时的浏览器厂商为了实现这些属性，采用前缀方法。各大厂商前缀列表如下：

手机等移动端一般采用的是 IOS 或安卓系统，那么基本上它的引擎是 webkit，直接参考-webkit-即可。

被列入标准的 box-shadow 和 opacity 、border-radius属性被列入标准,不需要再使用前缀，所有浏览器都稳定支持。

未被列入标准的写法，注意顺序：

div {

-webkit-border-radius: 50px;

-moz-border-radius: 50px;

border-radius: 50px;

}

二、渐变效果

1.线性渐变

linear-gradient 属性实现背景颜色的渐变功能。默认情况下是to bottom，从上到下。to表示最终要到达的方位。

/*通过角度设置方位，0 ~ 360 度之间，可以是负值，以第一个颜色为原点，在元素上呈现的角度*/ 
background-image: linear-gradient(45deg,orange,green);
/*多色线性渐变，彩虹，多加几个颜色，以颜色过渡。*/
 background-image: linear-gradient(-45deg,orange,green,blue,red);
/*通过百分比设置多色线性位置 */
background-image: linear-gradient(-45deg, orange 0%, green 20%, blue 40%, red 100%);
/*默认情况下：起始颜色的百分比位置是 0%，末尾颜色的百分比位置是 100%，其他位置 按照平均值分配。
也可以使用 px 像素来设定，但计算麻烦点。
结合背景，并使用透明渐变实现强大层次感，百分比多大，占据多大*/ 
background-color: red; 
background-image: linear-gradient(to top right, rgba(0,0,0,0.6), rgba(0,0,0,0));
/*重复渐变属性值*/ 
background-image: repeating-linear-gradient(to top, orange 10px, green 30px);