跳舞的线

最新推荐文章于 2021-03-12 09:16:15 发布

K.Dream

最新推荐文章于 2021-03-12 09:16:15 发布

阅读量1.1k

点赞数

分类专栏： html css

原文链接：https://youtu.be/gFVqgbQG0Zs

版权

css 同时被 2 个专栏收录

85 篇文章 0 订阅

订阅专栏

html

84 篇文章 0 订阅

订阅专栏

跳舞的线

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

代码区

以下代码为本人填写，转载请注明教程地址和本贴地址

html

<!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/style.css">
</head>
<body>
    <div class="loader">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span> <!--Number:15-->
    </div>
</body>
</html>

CSS

body{
    margin: 0; /*外边距*/
    padding: 0; /*内边距*/
    display: flex; /*弹性盒模型*/
    justify-content: center; /*主轴对齐方式*/
    align-items: center; /*交叉轴对齐方式*/
    min-height: 100vh; /*最小高度*/
    background-color: #89179e; /*背景颜色*/
}
.loader{
    position: relative; /*相对定位*/
    width: 300px; /*宽度*/
    height: 300px; /*高度*/
    transform-style: preserve-3d; /*保留3D状态*/
    transform: perspective(500px) rotateX(60deg); /*变化：视距500px X轴旋转60度*/
}
.loader span{
    position: absolute;
    display: block; /*块模型*/
    border: 2px solid #fff; /*边框 2px 实线 颜色*/
    box-sizing: border-box; /*宽度定位*/
    border-radius: 50%; /*边框圆角*/
    animation: cc 3s ease-in-out infinite; /*动画（ 名字 时间 开始-结束过渡时间 重复）*/
}
@keyframes cc{ /*动画*/
    0%,100%{
        transform: translateZ(-100px); /*Z轴移动*/
    }
    50%{
        transform:translateZ(100px); 
    }
}
.loader span:nth-child(1){ /*第一个元素*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation-delay: 1.4s; /*延时播放*/
}
.loader span:nth-child(2){
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    animation-delay: 1.3s;
}
.loader span:nth-child(3){
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    animation-delay: 1.2s;
}
.loader span:nth-child(4){
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    animation-delay: 1.1s;
}
.loader span:nth-child(5){
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    animation-delay: 1s;
}
.loader span:nth-child(7){
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    animation-delay: 0.9s;
}
.loader span:nth-child(8){
    top: 60px;
    left: 60px;
    right: 60px;
    bottom: 60px;
    animation-delay: 0.8s;
}
.loader span:nth-child(9){
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    animation-delay: 0.7s;
}
.loader span:nth-child(10){
    top: 80px;
    left: 80px;
    right: 80px;
    bottom: 80px;
    animation-delay: 0.6s;
}
.loader span:nth-child(11){
    top: 90px;
    left: 90px;
    right: 90px;
    bottom: 90px;
    animation-delay: 0.5s;
}
.loader span:nth-child(12){
    top: 100px;
    left: 100px;
    right: 100px;
    bottom: 100px;
    animation-delay: 0.4s;
}
.loader span:nth-child(13){
    top: 110px;
    left: 110px;
    right: 110px;
    bottom: 110px;
    animation-delay: 0.3s;
}
.loader span:nth-child(14){
    top: 120px;
    left: 120px;
    right: 120px;
    bottom: 120px;
    animation-delay: .2s;
}
.loader span:nth-child(15){
    top: 130px;
    left: 130px;
    right: 130px;
    bottom: 130px;
    animation-delay: .1s;
}
.loader span:nth-child(6){
    top: 140px;
    left: 140px;
    right: 140px;
    bottom: 140px;
    animation-delay: 0s;
}