CSS3动画
2018-09-17 本文已影响6人
puxiaotaoc
一、CSS3 transform 属性
transform属性
translate属性
// 示例
<html>
<head>
<title>transform</title>
<style>
.shape {
width: 100px;
height: 100px;
background: #777;
float: left;
margin-right: 3px;
color: #fff;
line-height: 100px;
text-align: center;
transition: 0.5s;
border: 1px solid #555;
}
.width:hover {
width: 200px;
}
.height:hover {
height: 200px;
}
.bg:hover {
background: #000;
}
.font:hover {
font-size: 20px;
color: yellow;
}
.bd-r:hover {
border-radius: 50px;
}
.translate:hover {
transform: translate(0, 10px);
}
.shadow:hover {
box-shadow: 0px 5px 5px #000;
}
.rotate:hover {
transform: rotate(30deg);
}
.scale:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<div id="test">
<div class="shape width">改变宽</div>
<div class="shape height">改变高</div>
<div class="shape bg">改变背景</div>
<div class="shape font">改变字体</div>
<div class="shape bd-r">改变矩形角</div>
<div class="shape translate">平移</div>
<div class="shape shadow">改变阴影</div>
<div class="shape rotate">旋转</div>
<div class="shape scale">缩放</div>
</div>
</body>
</html>
// transform-style 属性：使被转换的子元素保留其 3D 转换
// flat 子元素将不保留其 3D 位置
// preserve-3d 子元素将保留其 3D 位置
二、CSS3 transition 属性
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property：属性规定应用过渡效果的 CSS 属性的名称，如width；
- transition-duration：规定完成过渡效果需要多少秒或毫秒；
- transition-timing-function：规定速度效果的速度曲线；
- transition-delay：定义过渡效果何时开始；
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
2 linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
3 ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
4 ease-out: cubic-bezier(0, 0, 0.58, 1.0)
5 ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
三、CSS3 animation属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>transform</title>
<style>
#loader {
display: block;
position: relative;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="test" >
<img src="tomcat1.png" style="width:250px;height:250px" id="loader" />
</div>
</body>
</html>
参考链接：
动画素材网
CSS3图片旋转动画
