您的位置：首页 > Web前端 > CSS

CSS基础（五） 个人笔记

2017-08-03 11:25 120 查看

变形

平移：元素平移：x方向 y方向

缩放：scale(1.5) 缩放1.5倍。

二维旋转：rotate(180deg) 旋转180°

以x,y轴的旋转：rotatex(180deg)rotatey(180deg)

倾斜：skew(18deg) 倾斜18°

以x,y轴的倾斜：skewx(18deg) skewy(18deg)

过渡动画效果：1:什么属性 2.过渡时间 3.过渡效果

transition: all 1s ease;

实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width: 158px;
height: 183px;
margin: 0 auto;
margin-top: 100px;
border: 1px solid red;
overflow: hidden;
}
img{
/*过渡动画效果 1:什么属性 2.过渡时间 3.过渡效果*/
transition: all 1s ease;
}
img:hover{
/*元素平移：x方向   y方向*/
/*transform: translate(100px,100px);*/

/*元素缩放*/
/*transform: scale(1.5);*/

/*元素二维旋转*/
/*transform: rotate(180deg);*/

/*元素y轴旋转*/
/*transform: rotatey(180deg);*/
/*元素x轴旋转*/
/*transform: rotatex(180deg);*/
/*倾斜*/
/*transform: skew(18deg);*/
/*倾斜y轴*/
/*transform: skewy(18deg);*/
/*倾斜*/
/*transform: skew(18deg);*/
/*倾斜x轴*/
transform: skewx(180deg);

}
</style>
<title>变形效果</title>
</head>
<body>
<div>
<img src="../img/f3_Android1.png" alt="">
</div>
</body>
</html>


动画

@keyframes 名称{

0%{}

·

·

·

100%{}

}

相关属性：

animation-name: colorChange;/使用动画名称/

animation-duration: 2s;/动画持续时间/

animation-timing-function: ease;/动画速度曲线/

animation-delay: 2s;/动画延迟时间/

animation-iteration-count: 1;/动画循环次数 infinite 无限次/

animation-direction: alternate;/动画在下一次是否逆向播放/

实例如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@keyframes colorChange {
0%{
background: url("../img/f3_Android1.png");
background-repeat: no-repeat;
}
20%{
background: url("../img/f3_Android2.png");
background-repeat: no-repeat;
}
50%{
background: url("../img/f3_Android3.png");
background-repeat: no-repeat;
}
50%{
background: url("../img/f3_Android4.png");
background-repeat: no-repeat;
}
80%{
background: url("../img/f3_Android5.png");
background-repeat: no-repeat;
}
100%{
background: url("../img/f3_Android1.png");
background-repeat: no-repeat;
}

}
div{
width: 200px;
height: 200px;
margin: 0 auto;
animation-name: colorChange;/*使用动画名称*/
animation-duration: 2s;/*动画持续时间*/
animation-timing-function: ease;/*动画速度曲
ae9e
线*/
animation-delay: 2s;/*动画延迟时间*/
animation-iteration-count: 1;/*动画循环次数 infinite 无限次*/
animation-direction: alternate;/*动画在下一次是否逆向播放*/
animation-fill-mode: backwards;/*forwards 动画停留在最后一个
backwards 动画停留在第一个*/
}
</style>
<title>动画</title>
</head>
<body>
<div></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 动画
相关文章推荐
新的分享
章节导航