Html基础-定位、动画详解与举例
一、定位
1.固定定位
2.相对定位
3.绝对定位
4.静态定位(默认情况下,不做定位)
5.粘性定位(新出的模式,兼容性不强,还是保留原来的位置)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
/* 固定定位 相对于浏览器定位,脱离正常的文档流必须配合left,right进行操作*/
/* position: fixed; */
/* 相对于自己当前的位置进行定位
往左边实际往右边走,不会脱离文档流,只是样子改变了 left right 等
position: relative;
*/
/* 相对于设置了定位的父元素或者祖先元素进行定位
如果没有找到根就相对于html文档定位,会脱离正常的文档流
position: absolute;
*/
.parent{
width: 300px;
height: 400px;
background-color: red;
position:relative;
/* 只是作为一个工具而已,做参考 */
}
img{
width: 100px;
height: 100px;
bottom: 0;
right: 0;
position: absolute;
}
</style>
<body>
<div class="parent">
<img src="../imag/e.jpeg" alt="">
</div>
</body>
</html>
固定定位: 相对于浏览器定位,脱离正常的文档流必须配合left,right进行操作*/
position: fixed;
相对定位: 相对于自己当前的位置进行定位
往左边实际往右边走,不会脱离文档流,只是样子改变了 left right 等
position: relative;
绝对定位: 相对于设置了定位的父元素或者祖先元素进行定位
如果没有找到根就相对于html文档定位,会脱离正常的文档流
position: absolute;
二、动画animation
动画名称
animation-name: cutton;
动画时间
animation-duration: 3s;
动画变换速度 ease由快到慢到快 默认ease linear线性平均移动 ease-in ease-on也可以
设置贝塞尔曲线
cubic-bezier(0.77,0.13,0.55,1.79);
animation-timing-function: ease;
延迟时间
animation-delay: 2s;
动画循环次数 ,infinite无限循环
animation-iteration-count: 3;
运动方向,奇数次正常运动,偶数次反方向运动 alternate往返运动,reverse反方向运动,
奇数次反方向,偶数次正常 alternate-reverse,normal正常*/
animation-direction: alternate;
保留最后一帧的效果的位置
animation-fill-mode:forwards;
基本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.content{
width: 100px;
height: 100px;
background-color: skyblue;
animation: cutton 5s;
}
@keyframes cutton{
0%{
transform: translate(0,0);
}
33.3%{
transform: translate(200px,100px);
}
100%{
transform: translate(100px,100px);
}
}
</style>
<body>
<div class="content"></div>
</body>
</html>
css制作下载loading图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.loading{
width: 150px;
height: 150px;
position: relative;
margin: 100px auto;
}
.circle{
width: 150px;
height: 150px;
position: absolute;
left: 0;
top: 0;
}
@keyframes cutton{
0%{
opacity: 1;
}
100%{
opacity: 0.1;
}
}
.small{
width: 30px;
height: 30px;
background-color: skyblue;
border-radius: 50%;
}
.circle:nth-child(1){
transform: rotate(0deg);
animation: cutton 2s infinite 0.1s;
}
.circle:nth-child(2){
transform: rotate(45deg);
animation: cutton 1s infinite 0.2s;
}
.circle:nth-child(3){
transform: rotate(90deg);
animation: cutton 1s infinite 0.3s;
}
.circle:nth-child(4){
transform: rotate(135deg);
animation: cutton 1s infinite 0.4s;
}
.circle:nth-child(5){
transform: rotate(180deg);
animation: cutton 1s infinite .5s;
}
.circle:nth-child(6){
transform: rotate(225deg);
animation: cutton 1s infinite .6s;
}
.circle:nth-child(7){
transform: rotate(270deg);
animation: cutton 1s infinite .7s;
}
.circle:nth-child(8){
transform: rotate(315deg);
animation: cutton 1s infinite .8s;
}
</style>
<body>
<!-- .loading>(div.circle>.small)*8 -->
<div class="loading">
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
</div>
</body>
</html>
css动画自主练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
.control {
margin: 100px auto;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
font-family: "仿宋";
}
.textfont {
width: 50px;
height: 50px;
float: left;
font-size: 20px;
left: 50%;
top: 50%;
margin-left: 10px;
}
@keyframes cutton {
0% {
transform: scale(1);
color: rgb(134, 187, 141);
-webkit-text-stroke: 1px #35832d;
}
50% {
transform: scale(1.5);
-webkit-text-stroke: 1px #9cdb49;
color: rgb(143, 209, 187);
text-shadow: 0px 0px 10px rgb(23, 122, 98),
1px 2px 13px rgb(28, 207, 162), 4px 7px 15px rgb(14, 255, 195);
}
100% {
transform: scale(0.8);
color: rgb(0, 0, 0);
-webkit-text-stroke: 0.3px #ffffff;
}
}
@keyframes cutton_2 {
0% {
transform: scale(1);
color: pink;
-webkit-text-stroke: 1px #c493ec;
}
50% {
transform: scale(1.5);
-webkit-text-stroke: 1px #8244b6;
color: pink;
text-shadow: 0px 0px 10px rgb(95, 48, 172),
1px 2px 13px rgb(120, 74, 230), 4px 7px 15px rgb(126, 14, 255);
}
100% {
transform: scale(0.8);
color: rgb(0, 0, 0);
-webkit-text-stroke: 0.3px #ffffff;
}
}
@keyframes cutton_3 {
0% {
transform: scale(1);
color: rgb(247, 208, 81);
-webkit-text-stroke: 1px #db4c47;
}
50% {
transform: scale(1.5);
-webkit-text-stroke: 1px #e98b87;
color: rgb(247, 208, 81);
text-shadow: 0px 0px 10px rgb(243, 34, 34),
1px 2px 13px rgb(185, 90, 142), 4px 7px 15px rgb(196, 139, 156);
}
100% {
transform: scale(0.8);
color: rgb(0, 0, 0);
-webkit-text-stroke: 0.3px #ffffff;
}
}
@keyframes cutton_4 {
0% {
transform: scale(1);
color: yellow;
-webkit-text-stroke: 1px #3a77fc;
}
50% {
transform: scale(1.5);
-webkit-text-stroke: 1px #2a98ff;
color: yellow;
text-shadow: 0px 0px 10px rgb(223, 218, 149),
1px 2px 13px rgb(230, 219, 74), 4px 7px 15px rgb(243, 212, 37);
}
100% {
transform: scale(0.8);
color: rgb(0, 0, 0);
-webkit-text-stroke: 0.3px #ffffff;
}
}
.textfont:nth-child(1) {
animation: cutton 0.5s infinite 0.2s;
}
.textfont:nth-child(2) {
animation: cutton_2 0.5s infinite 0.3s;
}
.textfont:nth-child(3) {
animation: cutton_3 0.5s infinite 0.4s;
}
.textfont:nth-child(4) {
animation: cutton_4 0.5s infinite 0.5s;
}
</style>
<body>
<div class="control">
<div class="textfont">L</div>
<div class="textfont">O</div>
<div class="textfont">V</div>
<div class="textfont">E</div>
</div>
</body>
</html>