zoukankan      html  css  js  c++  java
  • css3模仿大风车

    <style>

    .box{

    width: 400px;

    height: 400px;

    margin: 100px auto;

    transition: 5s linear;

    }

    .box div{

    width: 180px;

    height: 180px;

    margin: 10px;

    border: 1px solid #000;

    box-sizing: border-box;

    float: left;

    background: #f00;

    }

    .box div:nth-of-type(1),.box div:nth-of-type(4){

    border-radius: 0 70%;

    }

    .box div:nth-of-type(2),.box div:nth-of-type(3){

    border-radius: 70% 0;

    }

    .box:hover{

    transform: rotate(720deg);

    }

    </style>

     

    <div class="box">

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    </div>

  • 相关阅读:
    Linux下搭建PHP环境的参考文章小记
    jQuery遇到问题的小记
    小程序 login
    小程序编辑器vscode
    弹性布局详解——5个div让你学会弹性布局
    vue在页面嵌入别的页面或者是视频2
    VUE设置浏览器icon图标
    遮罩层出现后不能滚动 添加事件@touchmove.prevent
    vue 在script里写页面跳转
    axios post、get 请求参数和headers配置
  • 原文地址:https://www.cnblogs.com/zhuyuanyuan/p/7790377.html
Copyright © 2011-2022 走看看