CSS 用一个div写个旋转的齿轮（maybe船舵）

来源：互联网发布：怎么用dede建站编辑：程序博客网时间：2024/05/12 20:02

目标：用css写出如下图形

这里写图片描述

思路

分析一下，要写出这个图形并不难，我数数，总共有4个同心圆，和8个圆角矩形，需要8+4=12个DOM节点，似乎离一个还有很远
如果用border写同心圆，可以减少2个圆
如果加上before 和 after 伪类又可以减少2个节点
如果巧用box-shadow ，一个div 足矣！

第一步，画出同心圆

知识点1 ：box-shadow
语法：none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
取值:
inset 默认阴影在边框外。使用inset变成内阴影，背景之上内容之下

offset-x offset-y 分别设置水平和垂直偏移量

blur-radius 模糊半径，值越大，模糊面积越大，阴影就越大越淡

spread-radius 阴影大小取正值时，阴影扩大；取负值

color 阴影的颜色

div{        width: 200px;        height: 200px;        /* 设置div的box-shadow */        box-shadow: 0px 0px 0px 50px  black , 0px 0px 0px 100px  skyblue , 0px 0px 0px 150px  black;        margin: 200px auto;        position: relative;        border-radius: 50%;    }

效果如图：1，2，3分别对应三个box-shadow的值
这里写图片描述

第二步，构建第一个伪类

div::before{        content: "";        display: block;        width: 50px;        height: 50px;        border-radius: 10px;        background: orange;    }

橘黄色的小圆角矩形就被放在 div的左上角了
这里写图片描述

第三步，用box-shadow画出4个锯齿

/* 计算x 和 y的 偏移量 */box-shadow: 75px -195px 0 black,75px 345px 0 black,-195px 75px 0 black,345px 75px 0 black;

很轻松的得到了下面的图
这里写图片描述

第四步，用同样的方法画出构建第二个伪类，再画4个锯齿

这个有点偷懒，由于要转动起来，我的第二个伪类跟第一个伪类写的一模一样

div::after{        content: "";        display: block;        width: 50px;        height: 50px;        border-radius: 10px;        background: blue;        position: absolute;        /* 这里加上定位，让before和after位置一样，同时给div定位relative */        box-shadow: 75px -195px 0 darkblue,75px 345px 0 darkblue,-195px 75px 0 darkblue,345px 75px 0 darkblue;    }

蓝色的块覆盖了刚才写的黄色的块
这里写图片描述

第五步，给伪类添加动画

先定义一个动画

@keyframes rotate{        form{            transform: rotate(0);        }to{            transform: rotate(360deg);        }    }

给before 和 after 添加动画,同时让after 动画延迟1/8的动画时长，等转动起来就完成了！

/* before的动画 */animation: rotate2 10s linear infinite;/* after的动画 */animation: rotate2 10s linear infinite 0.15s;

这里写图片描述

最后完整代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div></div></body><style>    body{        background: skyblue;    }    div{        width: 200px;        height: 200px;        box-shadow: 0px 0px 0px 50px  black , 0px 0px 0px 100px  skyblue , 0px 0px 0px 150px  black;        margin: 200px auto;        position: relative;        border-radius: 50%;    }    div::before{        content: "";        display: block;        width: 50px;        height: 50px;        position: absolute;        border-radius: 10px;        box-shadow: 75px -195px 0 black,75px 345px 0 black,-195px 75px 0 black,345px 75px 0 black;        animation: rotate 10s linear infinite;        /* 旋转点为同心圆的圆心 */        transform-origin: 100px 100px;    }    div::after{        content: "";        display: block;        width: 50px;        height: 50px;        position: absolute;        border-radius: 10px;        box-shadow: 75px -195px 0 black,75px 345px 0 black,-195px 75px 0 black,345px 75px 0 black;        animation: rotate2 10s linear infinite 1.25s;        transform-origin: 100px 100px;    }    @keyframes rotate{        form{            transform: rotate(0);        }to{            transform: rotate(360deg);        }    }    @keyframes rotate2{        form{            transform: rotate(45deg);        }to{            transform: rotate(405deg);        }    }</style></html>

but, 还是不够完美，现在实现的效果要过 1.5 秒后才能before 和 after 一起转圈圈，如果要同步转怎么办嘞

啊~好困，but not perfect，接着写吧 TT

第一步，重新写after 这次我们提前把8个齿轮的位置摆好，再让他们旋转

/*     1.把after定位到圆心的位置，因为后面要旋转，放在其他的位置不好计算shadow的位置    2.把旋转点也 设置在 圆心的位置    3.将after 以圆心为旋转点 旋转45°    4.要注意哦,shadow 的 x 和 y 偏移量 的坐标轴也旋转了45° */div::after{        content: "";        display: block;        width: 50px;        height: 50px;        left: 75px;        top: 75px;        position: absolute;        transform: rotate(45deg);        border-radius: 10px;        transform-origin: 25px 25px;        box-shadow: -270px 0px 0 black,270px 0px 0 black,0px -270px 0 black,0px 270px 0 black;    }

这里写图片描述
再给after设置动画rotate2

 animation: rotate2 10s linear infinite;

然而转着转着就变成了这样
这里写图片描述
好像个靶子，感觉萌萌哒

第二步：给after设置新的动画

/* 还记得我们给 after 已经璇转过45°了吗？这里就不能共用一个动画了 */@keyframes rotate2{        form{            transform: rotate(45deg);        }to{            transform: rotate(405deg);        }    }

最后贴出完整代码后面没有了啊，我看一眼，真的没啦~~ <(￣▽￣)/

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div></div></body><style>    body{        background: skyblue;    }    div{        width: 200px;        height: 200px;        box-shadow: 0px 0px 0px 50px  black , 0px 0px 0px 100px  skyblue , 0px 0px 0px 150px  black;        margin: 200px auto;        position: relative;        border-radius: 50%;    }    div::before{        content: "";        display: block;        width: 50px;        height: 50px;        position: absolute;        border-radius: 10px;        box-shadow: 75px -195px 0 black,75px 345px 0 black,-195px 75px 0 black,345px 75px 0 black;        animation: rotate 10s linear infinite;        transform-origin: 100px 100px;    }    div::after{        content: "";        display: block;        width: 50px;        height: 50px;        left: 75px;        top: 75px;        position: absolute;        transform: rotate(45deg);        border-radius: 10px;        transform-origin: 25px 25px;        background: red;        box-shadow: -270px 0px 0 black,270px 0px 0 black,0px -270px 0 black,0px 270px 0 black;        animation: rotate 10s linear infinite;    }    @keyframes rotate{        form{            transform: rotate(0);        }to{            transform: rotate(360deg);        }    }    @keyframes rotate2{        form{            transform: rotate(45deg);        }to{            transform: rotate(405deg);        }    }</style></html>

the end….(text-align:center)
(* ￣3)(ε￣ *) 古德奈特~

阅读全文

0 0