CSS3-渐变，过渡，3d动画

css渐变色
线性渐变
/* 渐变麻烦写法 */
.box1{
background: -webkit-gradient(linear,left center ,right center,from(red),to(yellow),color-stop(0.4,blue),color-stop(0.6,green));
}
值：线性渐变，开始位置，结束位置，开始颜色，结束颜色，插入颜色（位置，颜色）···【先x轴后y轴】
/* 渐变麻烦写法 */
.box2{background:linear-gradient(to left top,red,yellow,blue,green)
值：开始位置，颜色1，颜色2，颜色3···
经向渐变
/* 渐变麻烦写法 */
background:-webkit-gradient(radial,150 150,10,150 150,300,from(white),to(red),color-stop(0.4,blue));
值：径向渐变，内圆坐标，内圆半径，外圆坐标，外圆半径，开始颜色，结束颜色，插入颜色（位置，颜色）···
/* 渐变麻烦写法 */
background:radial-gradient( circle at 30%,yellow,blue);
值：中心点位置，颜色1，颜色2，颜色3··

svg画图
特点：
1.svg支持IE9以上
2.svg叫做伸缩矢量图形
3.svg可以通过文本编辑器来创建
4.可以被搜索，索引，脚本化和压缩
5.svg图形放大缩小尺寸不会失帧
定义
<svg class="can"></svg>创建画布
绘制图形
线体
<line x1="50" y1="50" x2="200" y2="200" stroke="red"
stroke-width="3"></line>
值：x1，y1表示起始位置坐标
x2，y2表示终止位置坐标
stroke线体颜色
stroke-width线体粗细
圆
<circle cx="100" cy="100" r="30" stroke="red" fill="pink"></circle>
值：cx,cy圆的中心点坐标 r圆的半径 fill填充颜色
椭圆
<ellipse cx="100" cy="100" rx="60" ry="40" fill="blue"><ellipse>
值：rx水平半径 ry垂直半径
矩形
<rect x="50" y="50" width="100" height="150" rx="20" ry="90"></rect>
值：x,y表示矩形的起始位置坐标 width宽度 height高度 rx ， ry 圆角弧度
多边形
<polygon points="0,100 100,10 200,50 100,150 50,100 "></polygon>
值：xy以逗号分隔，多个值以空格分隔（x1,y1 x2,y2 x3,y3）
路径
[ M开始位置 Z结束位置 ]
L直线 H水平线 V垂直线
C曲线 S平滑曲线 Q贝塞尔曲线 A椭圆曲线
阴影
<filter id="f1" x="0,0" y="0" width="200%" height="200%">
<feOffset result="offOut" dx="20" dy="20" in="SourceGraphic"></feOffset>
<feGaussianBlur result="blurout" stdDeviation="10" in="offOut"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>
</filter>
<rect x="0" y="0" width="100" height="100" fill="red" stroke="yellow" filter="url(#f1)" ></rect>
值：x,y表示起始位置坐标 width宽度 height高度 feOffset偏移位置 dx ，dy是xy轴的偏移量
feGaussianBlur模糊效果 stdDeviation模糊度 feBlend组合成整个面积 in关联多个标签


过渡
1.transition-property指定过渡属性
none不指定动画延迟效果 all所有都加上
2.transition-duration过渡时间
单位：秒数s
3.transition-timing-function动画速率
linear线性 ease平滑
ease-in由慢到快 ease-in-out由慢到快再到慢
4.transition-delay延迟时间
单位：秒数s
变换transform
1.translate（x,y,z）移动默认会给x轴
单位：像素或百分比
translate（）translateY（）垂直移动 translate（）前后移动
2.scale（x,y,z）缩放默认xyz轴都缩放
单位：数字，可以为小数，不可以为负数
scaleX（）宽度缩放 scaleY（）高度缩放 scaleZ（）厚度缩放
3.rotate(x,y,z)旋转默认z轴
单位：角度deg
rotateX（）水平旋转 rotateY（）垂直旋转 rotateZ（）中心点旋转
4.skew（x，y）扭曲
单位：角度deg 默认给X轴
skwX() 水平扭曲 skewY() 垂直扭曲
5.matrix（1，0，0，1，0，0）矩阵
值：宽度缩放垂直扭曲水平扭曲高度缩放水平移动垂直移动

3d
transform-style:presrve-3d 开启3d
transform-origin：x y z 偏移中心点
动画：不需要任何事件操作
1.animation-name 动画名称
2.animation-duration 动画时间单位：秒数s
3.animation-timing-function 动画速率
4.animation-delay延迟时间单位：秒数s
5.animation-iteration=count 循环次数单位：整数数字 infinite无限循环
6.animation-direction 是否要反向运动
normal 正常 alternate正反交替注意：循环次数必须大于2，才能正反交替
7.animation-paly-state动画状态
running 运动 paused 停止
8.animation-fill-model 动画时间之外状态
none不设置 backwards 开始位置 forwards 结束位置
执行动画
@keyframes +名称{
方法1 form{}
to{}
方法2 0%{} 50%{} 100%{}
}

CSS3-渐变，过渡，3d动画相关推荐

CSS3的过渡和动画
过渡和动画都是CSS3的重要部分,今天有时间,了解些相关内容并记录下. 在开始之前,首先看看CSS3的转化. 转化 CSS3的转化分为以下几种: translate 移动 rotate 旋转 scal ...
CSS_渐变过渡_动画
1.渐变指的是:颜色从一个方向到另一个方向进行改变,从一个角度到另外一个角度进行改变线性渐变:方向径向渐变:从中心向四周进行改变背景产生的====由浏览器进行加载显示的====比较均匀,兼容性 ...
c语言实现图片过渡效果飞入,用css3实现转换过渡和动画效果
为什么要用css动画替换js动画导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
css3实现3D动画
使用 CSS3 可以实现 3D 动画效果.要实现 3D 动画,需要使用 CSS3 中的 transform 属性. 要将一个元素变为 3D 元素,可以使用 transform: perspective ...
原 CSS3中的过渡,css3之过渡
CSS3的过渡和转换 CSS3的过渡和转换 1.过渡什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性描述 css transition 简写属性,用 ...
09.CSS3渐变、过渡、转换、动画
CSS3渐变 (1).什么是渐变 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradi ...
CSS3渐变、过渡、转换、动画
1.CSS3渐变 (1).什么是渐变 CSS3渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用CSS3渐变(gradie ...
CSS3新增属性——过渡和动画（2D属性，3D动画）
目录 CSS3 一.过渡 1. 属性 2. 花费时间 3. 运动曲线 4. 何时开始二.2D属性 2. translate(移动) 2. rotate(旋转) 3. scale(缩放) 4. tr ...
过渡动画 css3渐变
1. 过渡动画:是从一个状态渐渐过渡到另一个状态可以使我们的页面边得更加的好看,动感十足,低版本浏览器不支持这个属性不影响页面布局经常和hover 一起搭配使用 /* ...
CSS3动画(2D/3D转换、过渡、动画和多列)
[index.html] <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...

CSS3-渐变，过渡，3d动画

CSS3-渐变，过渡，3d动画相关推荐

最新文章

热门文章