Fork me on GitHub

简易的CSS3动画

原创 字数统计: 1.2k   |   阅读时长: 7分

QQ截图20210107230538

一些简单的小动画。

1、3D旋转正方体

20212112121

简单来说，就是弄清楚X,Y,Z坐标轴，以及旋转的方向。
具体实现的时候可以在浏览器开发工具里实时调控，查看移动每个坐标的结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Rotating Cube</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background: deepskyblue;
			}
			/* flex布局使cube居中 */
			.wrap{
				height: 100vh;
				display: flex;
				justify-content: center;
			    align-items: center;
			}
			
			.cube{
				width: 200px;
				height: 200px;
				position: absolute;
				transform-style: preserve-3d;
				transform: rotateX(-45deg) rotateY(0deg) rotateZ(-45deg);
				animation: cube_action 8s linear infinite;
			}
			
			.cube .side{
				width: 100%;
				height: 100%;
				color: white;
				position: absolute;
			    box-sizing: border-box;
				border: 4px solid yellow;
				border-radius: 10px;
				padding: 10px;
				opacity: 1;
			}
			.cube .side:hover{
				opacity: .7;
			}
			
			/* 把六个面展开 */
			.cube-front{
				background: orange;
				transform: rotateY(180deg) translateZ(100px);
			}
			.cube-back{
				background: red;
				transform: rotateY(0deg) translateZ(100px);
			}
			.cube-left{
				background: green;
				transform: rotateY(-90deg) translateZ(100px);
			}
			.cube-right{
				background: blue;
				transform: rotateY(90deg) translateZ(100px);
			}
			.cube-top{
				background: limegreen;
				transform: rotateX(90deg) translateZ(100px);
			}
			.cube-bottom{
				background: gray;
				transform: rotateX(-90deg) translateZ(100px);
			}
			@keyframes cube_action{
				0%{
					/* transform: rotateX(-45deg) rotateY(0deg) rotateZ(-45deg); */
					transform: rotate3d(0,0,0,0deg);
				}
				100%{
					transform: rotate3d(1,1,1,360deg);
					/* transform: rotateX(-45deg) rotateY(360deg) rotateZ(-45deg); */
				}
			}
			/* 鼠标悬停暂停动画 */
			/* .cube:hover{
				animation-play-state: paused;
			} */
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="cube">
				<div class="side cube-front">
					<h2>Front</h2>
					<p>Where there is a will,there is a way!</p>
				</div>
				<div class="side cube-back">
					<h2>Back</h2>
					<p>Where there is a will,there is a way!</p>
				</div>
				<div class="side cube-left">
					<h2>Left</h2>
					<p>Where there is a will,there is a way!</p>
				</div>
				<div class="side cube-right">
					<h2>Right</h2>
					<p>Where there is a will,there is a way!</p>
				</div>
				<div class="side cube-top">
					<h2>Top</h2>
					<p>Where there is a will,there is a way!</p>
				</div>
				<div class="side cube-bottom">
					<h2>Bottom</h2>
					<p>Where there is a will,there is a way!</p>
				</div>
			</div>
		</div>
	</body>
</html>


2、折扇效果

2021000000000F

13个<li>标签，以底部为旋转基点进行旋转，可以更改基点从而达到不同的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折扇效果</title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			body{
				background: black;
			}
			ul{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				position: relative;
			}
			ul li{
				position: absolute;
				list-style:none;
				width: 35px;
				height: 280px;
				background: yellow;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				transition: 1s;
				box-shadow: 0px 0px 10px white;
				/* 旋转基点 */
				transform-origin: center bottom;
				border-radius: 15px;
			}
			ul:hover li:nth-child(1){
				background: red;
				transform: rotate(15deg);
			}
			ul:hover li:nth-child(2){
				background: orange;
				transform: rotate(30deg);
			}
			ul:hover li:nth-child(3){
				background: greenyellow;
				transform: rotate(45deg);
			}
			ul:hover li:nth-child(4){
				background: plum;
				transform: rotate(60deg);
			}
			ul:hover li:nth-child(5){
				background: skyblue;
				transform: rotate(75deg);
			}
			ul:hover li:nth-child(6){
				background: navajowhite;
				transform: rotate(90deg);
			}
			ul:hover li:nth-child(7){
				background: red;
				transform: rotate(-15deg);
			}
			ul:hover li:nth-child(8){
				background: orange;
				transform: rotate(-30deg);
			}
			ul:hover li:nth-child(9){
				background: greenyellow;
				transform: rotate(-45deg);
			}
			ul:hover li:nth-child(10){
				background: plum;
				transform: rotate(-60deg);
			}
			ul:hover li:nth-child(11){
				background: skyblue;
				transform: rotate(-75deg);
			}
			ul:hover li:nth-child(12){
				background: navajowhite;
				transform: rotate(-90deg);
			}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>

3、缩放线效果

liqin20210107

利用两个div的边框实现。
div2的左右边框: transform:scaleY(0) –> scaleY(1)（Y轴方向从无到有）
div2的上下边框: transform:scaleX(0) –> scaleX(1)（X轴方向从无到有） 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>缩放线效果</title>
		<style type="text/css">
		   *{
			   padding: 0px;
			   margin: 0px;
		   }	
		   body{
			   background: skyblue;
		   }
		   .dirbox{
			   width: 500px;
			   height: 248px;
			   margin: 100px auto;
			   box-shadow: 3px 10px 20px black;
			   overflow: hidden;
			   position: relative;
		   }
		   .dirbox:hover img{
			   transform: scale(1.4);
			   transition: 1s;
		   }
		   .dirbox div{
			   position: absolute;
			   top: 0;
			   left: 0;
			   bottom: 0;
			   right: 0;
			   margin: auto;
			   opacity: .7;
		   }
		   .dirbox .br1{
			   width: 450px;
			   height: 180px ;
			   border-top: 4px dashed lightblue;
			   border-bottom: 4px dashed lightblue;
			   transform: scaleY(0);
			   transition: 1s;
		   }
		   .dirbox:hover .br1{
			   transform: scaleY(1);
		   }
		   .dirbox .br2{
			   width: 380px;
			   height: 250px ;
			   border-left: 5px dashed lightblue;
			   border-right: 5px dashed lightblue;
			   transform: scaleX(0);
			   transition: 1s;
			}
			.dirbox:hover .br2{
			   transform: scaleX(1);
			}
		</style>
	</head>
	<body>
		<div class="dirbox">
			<img src="img/liqin.jpg" >
			<div class="br1"></div>
			<div class="br2"></div>
		</div>
	</body>
</html>

赞

赏杯Java？٩(๑^o^๑)۶

创作不易，感谢支持！

扫一扫，分享到微信

微信分享二维码

Show Tags:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

<br>我必须承认<br><br>生命中大部分时光是属于孤独的，<br><br>努力成长<br><br>是在孤独里可以进行的最好的游戏。