2021-11-12

2023-12-29 21:52:10

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>

码农公寓

Html基础-定位、动画详解与举例

一、定位

二、动画animation

相关文章