青州易达网络提供网站建设、关键词排名、企推宝推广、域名注册、网站空间、云服务器、企业邮箱、微信公众号、小程序开发,欢迎注册购买,我们期待与您的合作。热线电话:18953612398

青州网络公司

青州易达网络科技有限公司

注册购买
  公司简介 网站价格 客户案例 公司动态 网站常识 联系我们
  网站知识
     搜索引擎 / Search
     推广文库 / SEO
     推荐工具 / Tools
     网站教程 /Tutorial
  
 
   您的位置在:首页 > 青州易达网络科技有限公司 > 网站知识
   网站知识
旋转的四叶草div+css
[ 来源:青州易达网络科技有限公司   发布日期:2019-4-9 14:44:58 ]
.

旋转的四叶草效果


<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
 <body>

<style>
        *{margin: 0;padding: 0;}
        html,body{display: flex;width: 100%;height: 100%;background: #ccc;align-items: center;}
        .cloverBox{
            position: absolute;
     top: 0; left:  0; bottom: 0; right: 0;   margin: auto;


          
             
            width: 400px;
            height: 400px;
            transform: rotate(0deg); 
        }
        .clover{
            width: 50%;
            height: 50%;
            float: left;
            transition: all 10s;
            cursor: pointer;
        }
        .c1{background: #A82125;border-radius: 0 50% 0 50%;}
        .c1:hover {transform:translateX(20px);transform:rotate(360deg);}
        .c2{background: #DFD03E;border-radius: 50% 0 50% 0;}
        .c3{background: #88DD3E;border-radius: 50% 0 50% 0;}
        .c4{background: #1EA8D7;border-radius: 0 50% 0 50%;}
    </style>


        <div class="cloverBox">
            <div class="clover c1"></div>
            <div class="clover c2"></div>
            <div class="clover c3"></div>
            <div class="clover c4"></div>
        </div>
    </body>
    
</html>
青州网站建设关键词排名优化企推宝商贸推广域名注册
首页 | 人才招聘 | 域名空间 | 网页设计案例 | 网站知识
地址:山东省青州市泰丰购物广场1237-2   邮编:262500   E- Mail:278439672@qq.com   在线Q Q:点击发送消息给对方 
业务咨询: 18953612398   站点地图 青州做网站
Copyright (c) 2010-2030 青州网站建设 . All rights reserved
青州易达网络科技有限公司 鲁ICP备12012080号-1