css中的基本简单动画与过度效果
css的过渡动画效果：
transform: translate()
transform: translate()
translateX() => 水平偏移 translateY() => 垂直偏移 translate(x,y) => 水平垂直偏移
里面可以写px或者百分比 百分比参照的是当前盒子的宽和高 所以可以使用translate(-50%, -50%)让定位的盒子水平垂直居中
移动的元素不会对其他盒子造成影响
transform: scale()
取值说明:
scaleX() => 水平缩放 scaleY() => 垂直缩放 scale(倍数) => 整体缩放
里面直接写数值即可 不需要添加单位 可以接受小数
transform-origin: 取值;
取值说明:
方位名词: left right top bottom center
具体的像素: 基于盒子的左上角为原点 X水平向右 Y垂直向下
transform: skew()
取值说明: 1. 斜切的角度 单位是deg 2. skewX() Y轴向X轴倾斜多少度 skew谁 谁的轴保持不变 另外一个轴朝这个轴倾斜对应的角度即可
连写属性：
当元素有多种2D转换的时候 需要采用连写的方式 中间空格隔开
当元素发生了旋转,那么其内部的坐标系也跟着发生了旋转 (推荐先写translate 在写rotate)
当多个转换场景的时候,后面的transform需要将前面的transform的效果复制下来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>魔方案例</title> <style> * { margin: 0; padding: 0; } .box { width: 300px; height: 300px; margin: 100px auto; /* perspective: 500px; */ transition: all 5s; /* 假3d */ /* position: relative; */ /* 真3d */ transform-style: preserve-3d; transform-origin:center center ; } .box:hover { transform: rotateX(360deg) rotateY(360deg); } .m { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .m:nth-child(1) { background-color: red; transform: rotateX(90deg) translateZ(150px); } .m:nth-child(2) { background-color: orange; transform: rotateX(-90deg) translateZ(150px); } .m:nth-child(3) { background-color: yellow; transform: rotateY(-90deg) translateZ(150px); } .m:nth-child(4) { background-color: green; transform: rotateY(90deg) translateZ(150px); } .m:nth-child(5) { background-color: lightgreen; transform: translateZ(150px); } .m:nth-child(6) { background-color: blue; transform: translateZ(-150px); } </style> </head> <body> <div class="box"> <div class="m"></div> <div class="m"></div> <div class="m"></div> <div class="m"></div> <div class="m"></div> <div class="m"></div> </div> </body> </html>
八卦图动画旋转案例
：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用一个盒子实现八卦图旋转</title>
<style>
/* 添加动画 */
/* 声明动画 */
@keyframes baguatu {
100%{
transform:rotatez(360deg)
}
}
/* 这里为了防止看的不明显一直选装就用：hover来展示 */
div:hover{
animation: baguatu 2s infinite linear;
}
</style>
<style>
div{
margin: 100px auto;
width: 150px;
height: 300px;
border-left: 150px solid black;
background-color: #fff;
border-radius: 50%;
position: relative;
}
div::before{
position: absolute;
top: 0;
left: -50%;
content:"";
width: 25px;
height: 25px;
background-color: #ffffff;
border: 60px solid #000;
border-radius: 50%;
}
div::after{
position: absolute;
bottom: 0;
left: -50%;
content:"";
width:30px;
height:30px;
background-color: #000;
border: 60px solid #fff;
border-radius: 50%;
}
div::before{
position: absolute;
top: 0;
left: -50%;
content:"";
width:30px;
height:30px;
background-color: #ffffff;
border: 60px solid #000;
border-radius: 50%;
}
</style>
</head>
<body style="background-color: #ccc;">
<div></div>
</body>
</html>
关注走一走，一起谈论前端技术
本文地址：https://blog.csdn.net/youknow156/article/details/107301312
上一篇： javaScript事件循环机制
下一篇： 两两交换链表中的节点