一、CSS3渐变(Gradients)
1.1、简介:
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示安稳的过渡。
1.2、欣赏器兼容性
1.3、线性渐变(linear gradients)
语法1:
- background: linear-gradient(to direction, color-stop1, color-stop2, ...);
复制代码 说明: derection表现的是指向方向
- left:渐变方向为从右到左
- right:渐变方向为从左到右
- top:渐变方向为从下到上
- bottom:渐变方向为从上到下
- left top:渐变方向为从右下到左上
- top right:渐变方向为从左下到右上
- right bottom:渐变方向为从左上到右下
- bottom left:渐变方向为从右上到左下
实例:
- background: linear-gradient(to left, red, green, yellow);
复制代码 语法2:
- background: linear-gradient(angle, color-stop1, color-stop2, ...);
复制代码 说明: angle表现的是角度指向
- 0deg:渐变方向为从下到上
- 90deg:渐变方向为从左到右
- 180deg:渐变方向为从上到下
- 270deg:渐变方向为从右到左
实例:
- background: linear-gradient(45deg, red, green, yellow);
复制代码 重复线性渐变:
- background: repeating-linear-gradient(to direction/angle, color deg1, color deg2, ...);
复制代码 说明: deg表现的是l两两颜色之间渐变的距离,可以设百分比值,也可以设px值
实例:
- background-image: repeating-linear-gradient(to left, red, yellow 10%, green 20%); background-image: repeating-linear-gradient(80deg, red, yellow 20px, green 35px);
复制代码 1.4、径向渐变(radial gradients)
语法1:
- background: radial-gradient(x-deg y-deg at position, start-color, ..., last-color);
复制代码 说明:
- position:设置圆心的位置
- x-deg:设置x轴距离圆心的位置
- y-deg:设置y轴距离圆心的位置
- x-deg=y-deg:形状为圆形
- x-deg!=y-deg:形状为椭圆形
实例:
- background: radial-gradient(20px 50% at 50% 50%,#000,#fff,blue);
复制代码 重复径向渐变:
- background: repeating-linear-gradient(x-deg y-deg at position, color deg1, color deg2, ...);
复制代码 说明: deg表现的是l两两颜色之间渐变的距离,可以设百分比值,也可以设px值
实例:
- background: repeating-radial-gradient(20px 50% at 50% 50%,#ea00f9 0%,#e90101 10%,#14fffa 20%)
复制代码 二、CSS3过渡(Transition)
2.1、简介:
CSS3 渐变(gradients)可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。
2.2、欣赏器兼容性
2.3、过渡属性
- transition-property(必选):规定应用过渡的 CSS 属性的名称。
- transition-duration(必选):界说过渡效果耗费的时间。默认是 0。
- transition-timing-function(可选):规定过渡效果的时间曲线。默认是 “ease”。
- ease:默认先慢,再快,再慢
- linear:匀速
- ease-in:由慢到快。
- ease-out:由快到慢。
- ease-in-out:由慢到快再到慢。
- transition-delay(可选):规定过渡效果何时开始。默认是 0。
实例:
- div{ transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s;}
复制代码 简写语法:
- transition : [ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ] ;
复制代码 注意:
transition-property 和 transition-duration 是必填选项!
实例:
- div{ transition-property: width 1s; transition-property: width 1s linear 2s;}
复制代码 三、CSS3动画(Animate)
3.1、简介:
CSS3 动画(animate)可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
3.2、欣赏器兼容性
3.3、动画属性
创建属性:@keyframes,一般写在css末了
- @keyframes myfirst{ 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}}
复制代码 其他属性:
- animation-name(必选):规定 @keyframes 动画的名称。
- animation-duration(必选):规定动画完成一个周期所耗费的秒或毫秒。默认是 0。
- animation-timing-function(可选):规定动画的速度曲线。默认是 “ease”。
- ease:默认先慢,再快,再慢
- linear:匀速
- ease-in:由慢到快。
- ease-out:由快到慢。
- ease-in-out:由慢到快再到慢。
- animation-delay(可选):规定动画何时开始。默认是 0。
- animation-fill-mode(可选):规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
- animation-iteration-count(可选):规定动画被播放的次数。默认是 1,infinite无限循环。
- animation-direction(可选):规定动画是否在下一周期逆向地播放。默认是 “normal”,alternate反向播放,。
- animation-play-state(可选): 规定动画是否正在运行或暂停。默认是 “running”,paused暂停。
简写语法:
- transition : [ animation-name ] || [animation-duration ] || [...] ;
复制代码 注意:
animation-name 和 animation-duration 是必填选项!
实例:
- div{ animation: myfirst 5s linear; animation: myfirst 5s linear 2s infinite alternate;}@keyframes myfirst{ 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}}
复制代码 来源:https://blog.csdn.net/qq_45677671/article/details/111995506
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |