请选择 进入手机版 | 继续访问电脑版

CSS3_渐变、过渡和动画

[复制链接]
暖男先生 发表于 2021-1-1 17:49:11 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一、CSS3渐变(Gradients)

1.1、简介

  CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示安稳的过渡。
1.2、欣赏器兼容性



  • ie9及更早版本不支持渐变属性
1.3、线性渐变(linear gradients)

语法1:
  1. background: linear-gradient(to direction, color-stop1, color-stop2, ...);
复制代码
说明: derection表现的是指向方向


  • derection(方向)单边取值:

  • left:渐变方向为从右到左
  • right:渐变方向为从左到右
  • top:渐变方向为从下到上
  • bottom:渐变方向为从上到下


  • derection(方向)对角取值:

  • left top:渐变方向为从右下到左上
  • top right:渐变方向为从左下到右上
  • right bottom:渐变方向为从左上到右下
  • bottom left:渐变方向为从右上到左下
实例:
  1. background: linear-gradient(to left, red, green, yellow);
复制代码
语法2:
  1. background: linear-gradient(angle, color-stop1, color-stop2, ...);
复制代码
说明: angle表现的是角度指向


  • angle(方向)角度取值:

  • 0deg:渐变方向为从下到上
  • 90deg:渐变方向为从左到右
  • 180deg:渐变方向为从上到下
  • 270deg:渐变方向为从右到左
实例:
  1. background: linear-gradient(45deg, red, green, yellow);
复制代码
重复线性渐变:
  1. background: repeating-linear-gradient(to direction/angle, color deg1, color deg2, ...);
复制代码
说明: deg表现的是l两两颜色之间渐变的距离,可以设百分比值,也可以设px值
实例:
  1. 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:
  1. background: radial-gradient(x-deg y-deg at position, start-color, ..., last-color);
复制代码
说明:


  • x-deg和y-deg和position取值:

  • deg:百分比
  • px:像素
  • 其他距离单位等


  • x-deg和y-deg和position用法:

  • position:设置圆心的位置
  • x-deg:设置x轴距离圆心的位置
  • y-deg:设置y轴距离圆心的位置
  • x-deg=y-deg:形状为圆形
  • x-deg!=y-deg:形状为椭圆形
实例:
  1. background: radial-gradient(20px 50% at 50% 50%,#000,#fff,blue);
复制代码
重复径向渐变:
  1. background: repeating-linear-gradient(x-deg y-deg at position, color deg1, color deg2, ...);
复制代码
说明: deg表现的是l两两颜色之间渐变的距离,可以设百分比值,也可以设px值
实例:
  1. 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、欣赏器兼容性



  • ie9及更早版本不支持渐变属性

2.3、过渡属性



  • transition-property(必选):规定应用过渡的 CSS 属性的名称。
  • transition-duration(必选):界说过渡效果耗费的时间。默认是 0。
  • transition-timing-function(可选):规定过渡效果的时间曲线。默认是 “ease”。

  • ease:默认先慢,再快,再慢
  • linear:匀速
  • ease-in:由慢到快。
  • ease-out:由快到慢。
  • ease-in-out:由慢到快再到慢。


  • transition-delay(可选):规定过渡效果何时开始。默认是 0。
实例:
  1. div{        transition-property: width;    transition-duration: 1s;    transition-timing-function: linear;    transition-delay: 2s;}
复制代码
简写语法:
  1. transition : [ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ] ;
复制代码
注意:
transition-property 和 transition-duration 是必填选项!
实例:
  1. div{        transition-property: width 1s;        transition-property: width 1s linear 2s;}
复制代码
三、CSS3动画(Animate)

3.1、简介

  CSS3 动画(animate)可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
3.2、欣赏器兼容性



  • ie9及更早版本不支持渐变属性

3.3、动画属性

创建属性:@keyframes,一般写在css末了
  1. @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暂停。
简写语法:
  1. transition : [ animation-name ] || [animation-duration ] || [...] ;
复制代码
注意:
animation-name 和 animation-duration 是必填选项!
实例:
  1. 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
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )