1.transform变形
transform变形 - 锐客网 div{
width: 100px;
height: 100px;
background-color: red;
margin:50px auto 0;
transition: all 500ms ease;
}
.box1:hover{
transform: rotate(360deg);
}
.box2:hover{
transform: scale(0.5,0.2);
}
.box3:hover{
transform: skew(0,45deg);
}
.box4:hover{
transform: translate(50px,50px);
}2. 变形的中心点
变形中心点 - 锐客网 div{
width: 200px;
height: 200px;
background-color: gold;
float: left;
margin: 30px;
transition: all 500ms ease;
}
div:hover{
transform: rotate(90deg);
/*负数可以改变旋转的方向，负数是逆时针*/
}
div:nth-child(2){
transform-origin: left top;
}
div:nth-child(3){
transform-origin:50px 50px;
}3. 元素的旋转
元素旋转 - 锐客网 .box{
width:300px;
height: 300px;
background-color: gold;
margin: 50px auto 0;
transition: all 500ms ease;
}
.box{
/*transform:rotate(45deg);
默认沿z轴旋转*/
/*perspective设置透视距离，经验数800px比较符合人眼的透视效果*/
/*transfor:*/
}4.图片文字的遮罩
图片文字的遮罩 - 锐客网 .img{
width: 122px;
height: 122px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.img:hover{}
.pic{
width: 122px;
height:122px;
}
.pic-info{
width:122px;
/*height: 100px;
*/
background-color: rgba(234,234,234,0.5);
position: absolute;
left: 0;
top: 122px;
transition: all 500ms ease;
}
.img:hover .pic-info{
top: 60px;
}
p{
margin: 5px;
line-height: 30px;
}
文章图片
【js动画】图片说明：这是一张画的图片
5. 背面可见
背面可见 - 锐客网 .box{
width: 300px;
height: 300px;
background-color: gold;
text-align: center;
line-height: 50px;
font-size: 50px;
transition: all 500ms ease;
transform-style: preserve-3d;
transform:perspective(800px) rotateY(0deg);
/*设置盒子备件是否可见*/
backface-visibility: hidden;
}
.con{
width: 300px;
height: 300px;
margin: 50px auto 0;
border:1px solid black;
}
.con:hover .box{}
div元素6. css3 过渡动画
css3过渡动画 - 锐客网 .box{
width:100px;
height: 100px;
background-color: gold;
/*transition: width 500ms ease,height 500ms ease 500ms,background-color 500ms ease 1s,border-radius 500ms ease,border-radius 500ms ease 1s;
*/
/*产生动画的位置动画消耗的时间运动的曲线延迟的时间(不写就是不延迟) 用逗号分隔，写下一个*/
transition: all 500ms ease;
}
.box:hover{
width: 500px;
height: 300px;
background-color: #abf;
border-radius: 50px;
/*圆角*/
}7. 简单的制作了一个 loading 的动态图
文章图片
图片.png 代码如下：
loading标志 - 锐客网 .big{
width: 700px;
height: 300px;
border: solid 1px black;
text-align: center;
position: relative;
margin: 50px auto 40px;
}
.one{
display: inline-block;
margin: 50px auto 40px;
width: 20px;
height: 90px;
margin-right: 30px;
border-radius: 50px;
background-color: red;
animation: loading 1s ease infinite alternate;
transform: scaleY(1);
}
.two{
background-color: orange;
animation: loading 1s ease 0.2s infinite alternate;
}
.three{
background-color: yellow;
animation: loading 1s ease 0.6s infinite alternate;
}
.four{
background-color: green;
animation: loading 1s ease 0.8s infinite alternate;
}
.five{
background-color: blue;
animation: loading 1s ease 1s infinite alternate;
}@keyframes loading{
from{
transform: scaleY(1);
}
to{
transform: scaleY(0.38);
}
}
p{
position: absolute;
top: 180px;
left: 310px;
}loading……
