CSS3永动机

正在努力的路路

于 2020-12-11 13:39:28 发布

阅读量133

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_51562385/article/details/111033601

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

标题CSS3 动画的永动

标题html部分

// An highlighted block
<!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>
    <link rel="stylesheet" href="css/css.css">
    
</head>
<body>
    <div class="container">
       <div class="loader">
            <div class="ball">
                
            </div>
        </div>
    </div> 
    
</body>
</html>

标题css部分

// An highlighted block
*{
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #1c2f3f;
}

.loader{
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 20px solid  transparent;
    border-bottom-color: #06c8f9;
    border-right-color: #06c8f9;
    transform: rotate(45deg);
    /* border: 1px solid #000; */
    /* 分别是 动画名称 时间 无限次数 中间快俩头慢 反向运动 */
    animation-name: move; 
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    
}
.container{
    /* 镜像 */
    -webkit-box-reflect:below 5px
    -webkit-linear-gradient(transparent 10%,rgba(0,0,0,0.5));
    /* filter: blur(3px); 可以设置一个模糊度 */
}
.ball{
    position: absolute;
    /* border: 1px solid #000; */
    top:0;
    left: 0;
    width: 200px;
    height: 200px;
    animation-name: reveres;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

.ball::before{
    /* 设置小球 */
    position: absolute;
    content: '';
    width: 30px;
    height: 30px;
    bottom: 20px;
    left: 26px;
    border-radius: 50%;
    background-color: white;
}
@keyframes move{
  0%{
      transform: rotate(0);
  }
  100%{
       transform: rotate(90deg);
  }
}
@keyframes reveres{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(-180deg);
    }
}