本文主要是介绍css特效基础，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

css特效基础

CSS 径向渐变

径向渐变由其中心定义。

如需创建径向渐变，您还必须定义至少两个色标。

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认地，shape 为椭圆形，size 为最远角，position 为中心。

旋转变形2D

将transform属性的值设置为rotate()，即可实现旋转变形

transform：rotate(45deg)旋转45度，角度正顺时针，角度负逆时针

可以使用transform-origin属性设置自己的自定义变换原点

缩放变形2D

将transform属性的值设置为scale()，即可实现缩放变形，表示缩放倍数，当数值小于1时，表示缩小元素;大于1表示放大元素

斜切变形2D

将transform属性的值设置为skew(),即可实现斜切变形

transform:skew(10deg， 20deg);

x，y斜切角度

位移变形2D

将transform属性的值设置为translate()，即可实现位移变形，表示x，y移动多少像素

和相对定位很像

3D旋转

将transform属性的值设置为rotateX( )或者rotateY(),即可实现绕横轴、纵轴旋转

perspective属性用来定义透视强度，可以理解为“人眼到舞台的距离”，单位是px

（外部盒子必须设置perspective）

动画过渡

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

transition: width 1s linear 0S;

width属性参与过渡 过渡时长 变化速度曲线 延长时间（多久开始）

所有数值类型的属性，都可以参与过渡，比如width、height、left、 top、 border-radius

背景颜色和文字颜色都可以被过渡

all表示所有属性参与过渡

transition- property
哪些属性要过渡
trans ition-duration
动画时间
动画变化曲线(缓动效果)
transition-delay
延迟时间

这篇关于css特效基础的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！