过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
/* 过渡 */
/* transition: 过渡属性 过渡时间 运动曲线 何时开始 */
/* transition: width 3s ease 0s, height 2s; */
transition: all 1s;
}
.box:hover{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
box.onmouseover = function(){
box.style.backgroundColor = "skyblue";
}
</script>
</body>
</html>2D变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 800px;
height: 600px;
border: 1px solid #000;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: #f00;
/* 2D变形 */
/* 平移 */
transform: translate(100px, 200px);
transform: translateX(200px);
/* 盒子水平垂直居中 */
/* 1.计算 */
/* margin: 200px auto; */
/* 2.定位+外边距 */
/* position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px; */
/* 3.定位 + 平移 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></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>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #f00;
transition: all 1s;
/* 倾斜 */
/* transform: skew(45deg); */
}
div:hover {
/* 缩放 */
/* transform: scale(0.5,0.5); */
/* 旋转 */
transform: rotate(45deg);
}
</style>
</head>
<body>
<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>Document</title>
<style>
.box {
width: 400px;
height: 400px;
transition: all 10s linear;
/* 改变变形原点 */
transform-origin: right;
}
.box div {
float: left;
width: 200px;
height: 200px;
background-color: springgreen;
}
.box div:nth-child(1) {
border-radius: 0 200px;
}
.box div:nth-child(2) {
border-radius: 200px 0;
}
.box div:nth-child(3) {
border-radius: 200px 0;
}
.box div:nth-child(4) {
border-radius: 0 200px;
}
.box:hover {
transform: rotate(3600deg) scale(0, 0);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></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>Document</title>
<style>
.door {
width: 1000px;
height: 800px;
border: 1px solid #ccc;
margin: 100px auto;
/* 保留子元素3d位置 */
transform-style: preserve-3d;
perspective: 1000px;
}
.left {
width: 500px;
height: 800px;
background-image: url(../images/01.png);
float: left;
transition: all 1s;
transform-origin: left;
}
.right {
width: 500px;
height: 800px;
background-image: url(../images/02.png);
float: left;
transition: all 1s;
transform-origin: right;
}
.door:hover .left {
transform: rotateY(-60deg);
}
.door:hover .right {
transform: rotateY(60deg);
}
</style>
</head>
<body>
<div class="door">
<div class="left"></div>
<div class="right"></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>Document</title>
<style>
.box {
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
transition: all 3s;
/* transform: rotateX(145deg) rotateZ(200deg); */
/* 保留子元素3d位置 */
transform-style: preserve-3d;
/* 视距 */
/* perspective: 1000px; */
}
.box div {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
}
.box:hover {
transform: rotateX(360deg) rotateZ(360deg);
}
.box1 {
transform: translateZ(100px);
background-color: red;
}
.box2 {
transform: rotateX(180deg) translateZ(100px);
background-color: orange;
}
.box3 {
transform: rotateY(90deg) translateZ(100px);
background-color: skyblue;
}
.box4 {
transform: rotateY(-90deg) translateZ(100px);
background-color: seagreen;
}
.box5 {
transform: rotateX(90deg) translateZ(100px);
background-color: yellow;
}
.box6 {
transform: rotateX(-90deg) translateZ(100px);
background-color: purple;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</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>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 0;
left: 0;
/* 动画 */
/* animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; */
animation: change 5s linear 0s infinite;
animation-fill-mode: forwards;
}
.box:hover{
/* 暂停动画 */
animation-play-state: paused;
}
/* 规定动画 */
@keyframes change {
/* 关键帧 */
0% {
left: 0;
}
49%{
transform: rotateY(0deg);
}
50% {
left: 900px;
transform: rotateY(180deg);
}
99%{
transform: rotateY(180deg);
}
100% {
left: 0;
transform: rotateY(0deg);
}
}
</style>
</head>
<body>
<div class="box">--></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>Document</title>
<style>
body {
background-color: #ddd;
}
.box {
width: 200px;
height: 200px;
margin: 200px auto;
background-color: #fff;
border-radius: 50%;
position: relative;
overflow: hidden;
box-shadow: 0 0 40px 10px gray;
}
.box2 {
width: 600px;
height: 600px;
border-radius: 230px 250px;
background-color: springgreen;
position: absolute;
top: 200px;
left: -200px;
animation: move 10s linear 0s forwards;
}
@keyframes move {
0% {
top: 200px;
left: -200px;
}
100% {
top: 0;
transform: rotate(1800deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>