09day-css动画效果

过渡效果的设置
transition: ease开始和结束慢速
运动曲线
linear 匀速
ease 开始和结束慢
设置圆角
border-radius :50px;
阴影
box-shadow: 10px(水平) 10px(垂直) 10px(羽化) 10px(阴影) red 颜色
inset(内阴影)
指定第几个div
div:nth-child(1~10){}
变换,位移
transform: translate(50px,50px) 不影响文档流
旋转
transform: rotate(30deg)
缩放
transform:scale(0.5,0.2);
斜切
transform:skew(30deg,0);
位移
translate(度数) z y
css3有哪些新增的特性？
1.css权重
2.新增选择器
3.css3圆角，阴影，rgba(颜色表示法)
4.transition过渡动画
5.transform 变换
6.animation 动画

元素旋转
x轴旋转 transform:perspective(800px) rotatey

CSS过渡动画：
transition:width 3s ease,height 3s ease 1s，background-color 3s ease 2s; 宽先变，用时3s,高1s后变,颜色2s后变
圆角：
border-radius:1s ease 3s;
transition:all 3s ease;一起变
运动曲线:
div:nth-child(1) 第一个div
box-shadow:左右，垂直，阴影清楚与否，阴影大小
insert 内阴影
transition:all 1s linear:匀速
transition:all ls ease; 中间快
transition:all 1s ease-in;越来快，突然停
transition:all 1s ease-out;越来慢，慢慢停
transition:all 1s ease-in-out;同ease
贝塞尔曲线：回弹
display:none;默认隐藏
display:block;出现
变形：
transform:translate(30px,20px); 水平，垂直位移不影响别的
旋转：
transform:rotate(30deg) 转30度
transform:scale(0.5,3) 缩放
transform:skew(30deg,0) 水平斜切45度，垂直不变

transform-style:preserve-3d;
默认Z轴旋转
transform:perspective(800px) rotateX(45deg) X轴旋转

变形中心点：
transition-origin:left center; 沿着左边中心点转
transition-origin:left top; 左上角
transition-origin:50px 50px;
transition:all 1s ease;
transform:rotate(90deg);

背面可见：(默认)
transition:all 1s ease;
transform-style:preserve-3d;
transform:perspective(800px) rotateY(0deg);
transform-visibility:hidden; 背面不可见
transition:rotateY(180deg); 翻转

position:relative; 相对定位父类定义，相对body
position:absolute; 绝对定位相对父类
text-align:center; 文字居中

animation动画：
animation:moving 1s ease 1s 5(infinite) alternate forwards; 一次1s,5次(不限次),原路返回，停后不跳回
animation-play-state:paused; 鼠标移入暂停
running; 移入开动
@keyframes moving{
from{
width:100px;
}
to{
width:50px;
}
}
border-radius:50px; 圆

最后编辑于：2018.11.01 09:37:38