css3样式动画

点击跳转到我的博客

1.基本动画transform

• 视距

perspective: 50px;//视距越小，效果越明显
perspective-origin: left;

• 居中

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);//实现水平居中

• 左右滑动

transition: all 0.5s;  // 过度动画
transform: translate(100px);//向右100px
transform:translateX(100px);//向右100px
transform:translateY(100px);//向下100px
transform:translate(50%);//向下50px,以自己为总的一半

//x是x轴，y是y轴，z只能是px
transform: translate3d(20px,30px,30px);

• 放大

transition: all 0.5s;  // 过度动画
transform: scale(100px);//向右100px
transform:scaleX(100px);//向右100px
transform: scaleY(100px);//向下100px
transform:scale(100px);//向下100px

• 旋转

transition: all 0.5s;  // 过度动画
transform:rotate(100deg);//向右100px
transform: rotateY(40deg);左右padding40deg
transform: rotateX(40deg);上下padding40deg

transform-origin:left ;//设置变形中心点

• 变形，倾斜

transition: all 0.5s;  // 过度动画
transform：skew(40deg);//整体倾斜
transform：skewX(40deg);//仅X倾斜
transform：skewY(40deg);//仅Y倾斜

2.过度动画

• 引用动画

.app{
  width: 100px;
  height: 100px;
  background: palegoldenrod;
  animation: go 2s ease 0s infinite alternate; //动画名称，动画时间，运动曲线，何时开始，播放次数，是否反方向
  transition: all 0.5s; //动画名称，动画时间，运动曲线，何时开始，播放次数，是否反方向
  //transition是过度动画。但是transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。
  //animation 算是真正意义上的CSS3动画。通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。而且关键帧状态的控制是通过百分比来控制的。
 
  //normal,正常运行
  //reverse,反方向运行
  //alternate，先为正常运行，然后反方向运行，左右摇摆
  //alternate-reverse, 先为反方向运行，然后正常运行，左右摇摆
}
@keyframes go{
  from{
    transform: translateX(0);
  }
  to{
    transform: translate3d(600px,0,0) rotate(180deg);
    //注意:后续要添加的动画写在后面，新写的话直接就顶替了
  }
}

3.渐变

//背景渐变：background: linear-gradient(颜色1,颜色2),
//默认是从上往下，改变方向，在颜色1前加上: to 方向
//也可以使用rgba()颜色 
	//径向渐变：background: radial-gradient(red,blue,yellow);
	//字体渐变background: linear-gradient(to right, red, blue);	
	-webkit-background-clip: text;	
	color: transparent;

4.常用属性

contenteditable="true"是否可以编辑
draggable="true"拖放
clip-path: polygon(18% 100%, 50% 50%, 100% 62%);covers动画
!important	优先级别最高
css透明度opacity: 0.5;
<label for=””></label>绑定文本框或者是密码框
表格的跨行，跨列	colspan, rowspan,
怪异盒子	box-sizing: border-box;
word-break: break-word; 长单词换行
超出显示省略号
	white-space:nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
多行文本显示省略号
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
i标签去倾斜font-style:normal ;
中间删除线：text-decoration:line-through;
字和字的中间距离：	letter-spacing：7px；     单词间距word-spacing: 
文本阴影：text-shadow:x方向偏移量 y方向偏移量 阴影长度 阴影颜色
盒子阴影：box-shadow:x方向偏移量 y方向偏移量 阴影长度 阴影颜色
多背景图：background:url(图片1路径) no-repeat x y,背景颜色   url(图片2路径) no-repeat x y;
注：背景颜色放在最后一个背景图的前面 
多背景图片大小：background-size:w h,w h;