如何书写css3中的渐变：
viabackground:-webkit-gradient(linear, 0 0, 0 100%, from(＃2074af), to(＃2c91d2));
第一个参数：表示的是渐变的类型
linear线性渐变
第二个参数：分别对应x，y方向渐变的起始位置
第三个参数：分别对应x，y方向渐变的终止位置
第四个参数：设置了起始位置的颜色
第五个参数：设置了终止位置的颜色
Css3的一些动画属性：
transform:变形（一般写在css中的div里面）
CSS3中主要包括 旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg)
扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(30deg,20deg) 缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4)
移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离
改变起点位置 transform-origin: bottom left;
transition:在一定的时间区间内平滑的过渡
例题：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#d1{ width:100px; translate是transform的一个属性值 height:100px; background-color:rgb(0,204,255); margin:200px 400px; transition:6s all linear;} #d1:hover{ transform:rotate(72deg) scale(1.2) translate(0px,200px) ; background-color:rgb(255,0,0); border-radius:100%; } |
自定义旋转动画：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<style> #d1{ width:100px; height:100px; background-color:rgb(0,204,255); margin:200px 400px; -webkit-animation:donghua 20s infinite(循环次数) linear;} @-webkit-keyframes donghua { 0%{ transform:rotateYY(0deg);} 50%{ transform:rotateYY(170deg);} 100%{ transform:rotateY(360deg);} } |
