css学习三

css动画效果

3个重要的属性

1.变形（transform）

2.转换（transition）

3.动画（animation）

 

变形（transform）

1.旋转（rotate）

2.扭曲（skew）

3.缩放（scale）

4.移动（translate）

5.矩阵变形*（matrix）

 

语法

transform ： none  |   <transform-function>[<transform-fuction>]*

 

transform属性可以指定为关键字值none 或一个或多个<transform-function>值。


none:表示不变换；


<transform-function>表示一个或多个变换函数，以空格分开*；

 

角度单位

度：deg

梯度：grad

圈：turn

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lianxi1.css">
</head>
<body>
<div id="fangkuai">
    <div class="yanse1">
        <div class="yanse2">
        </div>
    </div>
</div>
<br>
<br>
<br>
<br>
<div id="fangkuai1">
    <div class="yanse3">
        <div class="yanse4">
        </div>
    </div>
</div>
<br>
<br>
<br>
<br>
<div id="fangkuai2">
    <div class="yanse5">
        <div class="yanse6">
        </div>
    </div>
</div>
<br>
<br>
<br>
<br>
<div id="fangkuai3">
    <div class="yanse7">
        <div class="yanse8">
        </div>
    </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="kuai1">
    <div class="kuai2"></div>
    <div class="kuai3"></div>
    <div class="kuai4"></div>
</div>
</body>
</html>

 

#fangkuai{
    width: 150px;
    height: 150px;
    margin:0 auto;
}
.yanse1{
    width: 150px;
    height: 150px;
    border: 1px solid;
}
.yanse2{
    width: 150px;
    height: 150px;
    background-color: chartreuse;
    transform:translate(80px,0px);
}
#fangkuai1{
     width: 150px;
     height: 150px;
     margin:0 auto;
 }
.yanse3{
    width: 150px;
    height: 150px;
    border: 1px solid;
}
.yanse4{
    width: 150px;
    height: 150px;
    background-color: chartreuse;
    transform:scale(0.5,0.4);
}
#fangkuai2{
    width: 150px;
    height: 150px;
    margin:0 auto;
}
.yanse5{
    width: 150px;
    height: 150px;
    border: 1px solid;
}
.yanse6{
    width: 150px;
    height: 150px;
    background-color: chartreuse;
    transform:skew(1deg,5deg);
}
#fangkuai3{
    width: 150px;
    height: 150px;
    margin:0 auto;
}
.yanse7{
    width: 150px;
    height: 150px;
    border: 1px solid;
}
.yanse8{
    width: 150px;
    height: 150px;
    background-color: chartreuse;
    transform:rotate(40deg);
}
#kuai1{
    width: 150px;
    height: 150px;
    margin:0 auto;
}
.kuai2{
    width: 150px;
    height: 150px;
    background-color:yellow;
    transform:rotate(40deg) translate(59px,95px);
}
.kuai3{
    width: 150px;
    height: 150px;
    background-color: chartreuse;
    transform:rotate(50deg) translate(-8px,-15px);
}
.kuai4{
    width: 150px;
    height: 150px;
    background-color: blue;
    transform:rotate(60deg) translate(-107px,-90px);
}

 

posted @ 2019-05-30 22:53  张宗珂  阅读(162)  评论(0)    收藏  举报