css3动画来回摇摆的小球（flex布局，vw与vh，变形等）

2022-07-06 网页编程网 网页编程网

综合应用以下技术：flex布局、vw、vh视口宽度、伪元素选择器、动画、倒影。

<html>
<head>
<meta charset="utf-8">
<style>
*{
margin:0;
padding:0;
}
body{
display:flex;
justify-content:center;
align-items:center;
height: 100vh;/*占满整个视口的百分之百*/

}
.container{
width:200px;
height:200px;
outline:1px solid;/*与border一样，但不占据1px*/

-webkit-box-reflect: below 1px linear-gradient(transparent 10%,gray);
}
.loader{
width:160px;
height:160px;
border:20px solid blue;
border-left-color:transparent;/*透明色*/
border-top-color:transparent;
border-radius:50%;/*设计圆角*/
transform:rotate(45deg);
position:relative;/*子绝父相*/
animation: move1 3s ease-in-out infinite alternate;
}
.ball{
top:0;
left:0;
width:100%;
height:100%;
/*outline:1px solid green;*/
position:absolute;
animation: ballMove 3s ease-in-out infinite alternate;

}
.ball::before{
content:'';
width:30px;
height:30px;
position:absolute;
left:20px;
bottom:20px;
background:red;
border-radius:50%;
}
@keyframes move1{
	0%{
		transform:rotate(0);
	}
	100%{
		transform: rotate(90deg);
	}
}
@keyframes ballMove{
	0%{
		transform:rotate(0);
	}
	100%{
		transform: rotate(-180deg);
	}
}
</style>
</head>
<body>
<div class="container">
	<div class="loader">
		<div class="ball"></div>
	</div>
</div>
<hr />
css3新布局，flex，类似以前的float很麻烦，要清除。flex成了首选。<br />
1.弹性盒布局flex<br />
马上就模直来了。注意，只需修改父元素，即可实现子类的x轴、y轴对齐。
<style>
.container{
display:flex;
justify-content: space-evenly;/*x轴等间距*/
align-items: center;/*y轴*/
width:400px;
height:400px;
}
.item{
width:80px;
height:80px;
outline:1px solid;
}
</style>
<div class="container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

2.css3新单元vw、vh<br />
vw、vh视口宽度，高度<br />
3.变形 <br />
<style>
.test{
width:100px;
height:100px;
background:red;
transition:1s;/*柔和动作*/
}
.test:hover{
transform:rotate(45deg);/*鼠标放上，变形*/
}
</style>
<div class="test"></div>
4.伪元素选择器::，与伪类不一样，伪类是hover，规定是::，但为是了兼容以前部分:也行<br />
<style>
p::first-letter{
font-size:30px;
color: red;
}
p::before{
	content:"$";/*新增元素值，也可设置样式，但宽高不行，是行内元素，要加display变成块*/

}
.test4{
position:absolute;
width:100px;
height:100px;
background:green;
-webit-box-reflect: below 10px;/*倒影*/
animation:move0 5s 3;/*动画名，时间，次数*/
}
@keyframes move0{/*1定义动画，2定义关键帧*/
	0%{
		left:0;
		top:0;
	}
	50%{
		top:0;
		left:300px;
	}
	100%{
		top:300px;
		left:600px;
	}
}
</style>
<p>this is a test</p>
5.动画<br />
定义关键帧：了关键的几帧，剩下的电脑会补全<br />
先定义，再使用<br />
<div class="test4"></div>
6.倒影<br />
兼容性不好<br />
</body>
</html>

阅读原文

阅读 1924

123 显示电脑版