css3 转换效果
程序员文章站
2022-07-04 09:09:22
...
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>上一篇： LINQ
下一篇： OpenGL学习（2）——绘制三角形