CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
transform:
平移:translate(50px,100px) 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
旋转:rotate(30deg) 顺时针旋转的元素
缩放:scale(2,3) 转变宽度为原来的大小的2倍,和其原始大小3倍的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>转换</title>
<style>
div{
width: 200px;
height:200px;
background-color: pink;
}
.a1:hover{
transform: translate(300px,300px)
}
.a2:hover{
transform: rotate(40deg);
}
.a3:hover{
transform: scale(2,3);
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3" style="position: fixed; top:300px; left: 100px;"></div>
</body>
</html>
css3 过渡 transition
transition 简写属性,用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay 规定过渡效果何时开始。默认是 0。
time 规定在过渡效果开始之前需要等待的时间,以秒或毫秒计。
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
要实现这一点,必须规定两项内容:
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
div{
width: 100px;
height: 100px;
transition: width 2s,height 2s,transform 2s;
background-color: red;
}
div:hover{
transform: rotate(30deg) ;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
css3动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。 请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。 0% 是动画的开始,100% 是动画的完成。 为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
语法
@keyframes animationname {keyframes-selector {css-styles;}}
值 | 描述 |
---|---|
animationname | 必需。定义动画的名称。 |
keyframes-selector |必需。动画时长的百分比。 合法的值:0-100%from(与 0% 相同)to(与 100% 相同)| |css-styles |必需。一个或多个合法的 CSS 样式属性。|
@keyframes 创建动画
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
执行动画
div{
animation: myfirst 5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
@keyframes donghua {
0% { background-color: red;
transform: rotate(30deg) ;
}
23%{background-color: green;}
45%{background-color: pink;}
100% {background-color: yellow; }
}
div{
width: 100px;
height: 100px;
animation: donghua 1s;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>