夏日来临，用边框来设置个吱呀呦呦的大风车

春日部防卫队队长
265 阅读2分钟

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

前言

大家好，我是不吃鱼d猫，最近用高德地图整不会了，写CSS来放松放松，说说边框属性，常见的一些好看的边框图像也可以设置。还记得少儿频道的大风车节目，夏日回忆。今天用边框给大家实现一个大风车。

边框属性

边框的样式border-style

  • border-style:none 默认无边框
  • border-style:dotted 点线边框
  • border-style:dashed 虚线边框，不要与点线记混淆了
  • border-style:solid 实线边框，常用
  • border-style:double 双实线边框 可以单一设置，当然也可以盒子四条边设置不用的样式，顺序依次是上右下左，与padding设置一样，如下图所示，我们设置border-style: solid dotted dashed double;

image.png

  • border-width 设置边框宽度
  • border-color 设置边框颜色，也可以四条边分开设置border-color: red yellow green blue;也可以这样写border-top-color: red;分开设置，中间为方向

image.png

  • border-radius 为圆角边框，常用，在项目开发中常常会见到，一般ui都写好了，但是也要知道是啥，比如设置一个正方形盒子的圆角为该盒子宽度，那么就变成一个圆了，如下图所示，很有意思的

image.png

大风车实现

完整代码

样式实现

主要是用到边框宽度border-width边框属性

<div class="box">
        <div class="box1 boxs"></div>
        <div class="box2 boxs"></div>
        <div class="box3 boxs"></div>
        <div class="box4 boxs"></div>
    </div>

我们将小盒子两条边的宽度设置跟小盒子一样的框，并且将一条边框的颜色改成透明色，也就是transparent这样就得到了下面的图形
image.png
进而得到是个一样的图像，在进行调整就可以得到大风车了
image.png
实则大风车原型是这样

image.png

添加动画

我们让他吱呀呀悠悠的转的话，那么就要添加动画了，也就是css最有趣的部分了

@keyframes turn{
            0%{-webkit-transform:rotate(0deg);}
            25%{-webkit-transform:rotate(90deg);}
            50%{-webkit-transform:rotate(180deg);}
            75%{-webkit-transform:rotate(270deg);}
            100%{-webkit-transform:rotate(360deg);}
        }

我们可以让大盒子中心旋转起来，添加animation:turn 1s linear infinite;，1s旋转360度，循环。前面的文章有讲动画。

总结

CSS是很有意思的，ui组件用多了，可别不知道怎么去修改样式了。逻辑写熟练了，反而觉得css难搞了。

avatar
文章
阅读
粉丝