目录
- 语法
- 转换
- 平移
- 旋转
- 缩放
- 复合属性的顺序问题
- 过渡动画
- 帧动画
- 案例
- 案例1-热点图dot(缩放)
- 案例2-热点图dot(缩放)
- 案例3-开红包(旋转)
- 问题
- 问题1-transform不起作用
- 问题2 - 过渡动画不起效果
语法
转换
css3中的转换允许我们对元素进行旋转、缩放、移动或倾斜。它分为2D转换 或 3D转换，一般与动画结合使用。
平移
语法
transform:translate(x,y)
- 以元素
当前的位置为相对参照，进行水平、垂直方向移动；x 表示水平方向移动，y 表示垂直方向移动；若是只设置一个值则代表水平移动； - 单位
- px
- 百分比:x、y的取值如果是百分比，则是相对于
元素本身尺寸
旋转
语法
rotateX() /* 沿X轴旋转 */
rotateY() /* 沿Y轴旋转 */
rotateZ() /* 沿Z轴旋转 */
rotate() /* 默认沿着z轴旋转 */
- 取值
- 角度值为正数，表示顺时针旋转；
- 角度值为负数，表示逆时针旋转；
缩放
语法
transform:scale(h,v)
- h表示水平缩放比例，v表示垂直缩放比例 -> 如果设置1个值，表示水平以及垂直
同时缩放 - 取值
- 0-1之间缩小
- 大于1进行放大
复合属性的顺序问题
transform是一个复合属性，可以同时设置平移、旋转、缩放。
需要值得注意的是，变换的执行顺序是从后向前执行的！
过渡动画
语法
transition:all 1s ease 1s;
transition是一个复合属性
- transition-property 指定应用过渡属性的名称 (width ,height,、、、、all表示所有的属性都有过渡效果)
- transition-duration：过渡时间
- transition-timing-function：过渡曲线
- ease --默认 (由慢速开始，加速，慢速结束)
- linear–匀速
- ease-in --慢速开始
- ease-out --慢速结束
过渡属性是谁过渡给谁加！
transition动画的缺点
- [1]动画不能够自动开始(可以借助hover)；
- [2]动画次数只能固定一次，不能循环；
帧动画
帧动画规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式，使用帧动画分为两步：
- [1] 定义帧动画
@keyframes 动画名{ from { // 开始的css样式 } to{ // 结束的css样式 } }@keyframes 动画名{ 0% { // 开始的css样式 } 50%{ // 中间过渡的css样式 } ... 100%{ // 结束的css样式 } } - [2] 使用帧动画
animation是一个复合属性，规定了除animation-play-state属性外的所有属性的简写属性；animation: 动画名 动画一个周期所需时间 动画速度 动画延迟时间 动画次数 停留位置；- animation-name:属性名
- animation-duration:规定动画完成一个周期所花费的
s数； - animation-timing-function: 规定动画的速度曲线
- ease --默认 (由慢速开始，加速，慢速结束)
- linear–匀速
- ease-in --慢速开始
- ease-out --慢速结束
- animation-delay: 规定动画的延迟时间
- animation-iteration-count:规定动画的播放次数
- 1次(默认)
infinite:无数次
- animation-paly-state:规定动画是否正在运行或暂停
- running:正在运行
pause:暂停
- animation-fill-mode: 规定动画结束时的状态
- forwards:设置对象状态为动画
结束时的状态 - backwards(默认): 设置对象状态为动画
开始时的状态
- forwards:设置对象状态为动画
- 注意：若是仅定义帧动画而没有使用，将不会产生任何效果。
案例
案例1-热点图dot(缩放)
现在存在图片
,做成一个呼吸效果的动画，->动画视频链接
实现代码如下：
<body>
<img src="https://cdn.ituibei.cn/dist/welfareAT02/private/C/CFirstLayer_31/img/water_24855.png" alt="">
</body>
<style>
@keyframes dot{
0%{
transform: scale(0);
opacity: 0;
}
100%{
transform: scale(1.3);
}
}
body{
background-color: red;
text-align: center;
padding-top: 100px;
}
img{
animation: dot 0.6s linear infinite;
width:24px;
height: 24px;
}
</style>
实现过程
- 在定义动画时只定义了to(初始样式)，没有定义from(结束样式)，则默认结束样式为当前元素的样式----> img标签没有定义transform与opacity，则结束时的样式为默认值
transform:scale(1); opacity:1; - 动画仅执行一次，此时在运行时这个图片是一个
渐入的感觉-> 动画视频链接
- 在定义动画时只定义了to(初始样式)，没有定义from(结束样式)，则默认结束样式为当前元素的样式----> img标签没有定义transform与opacity，则结束时的样式为默认值
- 只要将动画次数改成无数次，就已经实现了所需效果，但是若是想效果更丝滑一点，可以在from(结束时)方大一下，这样在每次动画结束下次动画开始时会有一个
回缩的效果；100%{ transform: scale(1.3); }
- 只要将动画次数改成无数次，就已经实现了所需效果，但是若是想效果更丝滑一点，可以在from(结束时)方大一下，这样在每次动画结束下次动画开始时会有一个
案例2-热点图dot(缩放)
若是dot为非图片，则一个类似案例1的呼吸动画，实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: #999;
padding-top: 100px;
text-align: center;
}
.fa {
position: relative;
}
.dot {
position: absolute;
width: 8px;
height: 8px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: chartreuse;
}
.wave {
/* 光波最初时与dot大小相同，只是带有阴影 */
position: absolute;
width: 8px;
height: 8px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0 0 12px chartreuse;
animation: bo 1.2s linear infinite;
}
@keyframes bo {
/*
没有设置初始状态，则初始状态为添加动画元素的初始状态
width: 8px;
height: 8px;
opacity: 1;
*/
70% {
width: 30px;
height: 30px;
opacity: 1;
}
100% {
width: 50px;
height: 50px;
opacity: 0;
}
}
.dal {
animation-delay: 0.6s;
}
</style>
</head>
<body>
<div class="fa">
<div class="dot"></div>
<div class="wave"></div>
<div class="wave dal"></div>
</div>
</body>
</html>
案例3-开红包(旋转)
如上图在点击“开”时，希望这个“开”字能够沿着Y轴旋转几圈再进行页面跳转 ->动画视频链接 -> 添加动画效果，实现如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>开红包</title>
</head>
<body>
<div class="bg">
<img
src="https://lp-ag.umcdn.cn/952575f71c38ffee4ef9ccad033f2ed0/98afec881a187b8c7945a3f0eac7e032.png"
class="openbtn"
/>
</div>
<script>
const imgbox = document.getElementsByClassName('openbtn')[0]
imgbox.onclick= function(){
imgbox.setAttribute('class','openbtn rotateClass')
setTimeout(()=>{
imgbox.setAttribute('class','openbtn')
location.href = 'https://www.baidu.com'
},1000)
}
</script>
</body>
<style>
@keyframes torotate{
from{
transform: rotateY(360deg);
}
}
*{
padding:0;
margin: 0;
}
.bg{
position: relative;
height: 100vh;
background: url('https://static.adhudong.com/display/styles/images/bodyBg2.8a73276b.png') no-repeat left top;
background-size: cover;
}
.openbtn{
position: absolute;
top: 175px;
left:calc(50% - 50px);
width: 100px;
height: 100px;
}
.rotateClass{
animation: torotate 0.5s linear infinite;
}
</style>
</html>
问题
问题1-transform不起作用
现在想做一个效果就是 “开”在水平方向居中且一直旋转，实现如下
<body>
<div class="bg">
<img
src="https://lp-ag.umcdn.cn/952575f71c38ffee4ef9ccad033f2ed0/98afec881a187b8c7945a3f0eac7e032.png"
class="openbtn"
/>
</div>
</body>
<style>
@keyframes torotate{
from{
transform: rotateY(360deg);
}
}
*{
padding:0;
margin: 0;
}
.bg{
position: relative;
height: 100vh;
background: url('https://static.adhudong.com/display/styles/images/bodyBg2.8a73276b.png') no-repeat left top;
background-size: cover;
}
.openbtn{
position: absolute;
top: 175px;
left:50%;
transform: translateX(-50%);
width: 100px;
height: 100px;
animation: torotate 0.5s linear infinite;
}
</style>
但是结果却与预期不同，原因是因为在帧动画中 transform这个属性一直在被重新；
解决办法是将translateX(-50%)添加到帧动画中
@keyframes torotate{
from{
transform: translateX(-50%) rotateY(360deg);
}
to{
transform: translateX(-50%) rotateY(0deg);
}
}
问题2 - 过渡动画不起效果
问题：上图在展开和收缩的时候想做一个过渡动画，但是发现设置了不起作用；
原因：过渡属性要有明确的属性值变化；width、height值被撑开但是值没变就没有办法过渡动画了；
总结：内容撑开的盒子没有办法做宽高的过渡动画
