<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            background-color: lightskyblue;

        }

        .container {

            width: 400px;

            height: 400px;

            border: 1px solid #999;

            box-sizing: border-box;

            border-radius: 50%;

            margin: 200px auto;

            position: relative;

            overflow: hidden;

            background-color: yellow;

            transform: rotate(-80deg);

        }

        .container::before {

            content: "";

            width: 100px;

            height: 100px;

            /*border: 1px solid black;*/

            background-color: deepskyblue;

            border-radius: 50%;

            box-shadow: 0px 0px 0px 10px whitesmoke;

            position: absolute;

            top: 150px;

            left: 150px;

            z-index: 1;

        }

        .one {

            width: 300px;

            height: 300px;

            /*border: 1px solid black;*/

            position: absolute;

            transform: skew(-30deg);

            left: -12px;

            top: -100px;

            background-color: green;

        }

        .one::before {

            content: "";

            width: 300px;

            height: 200px;

            /*border: 1px solid black;*/

            position: absolute;

            top: 159px;

            left: 30px;

            background-color: green;

        }

        .two {

            width: 300px;

            height: 300px;

            /*border: 1px solid black;*/

            position: absolute;

            transform: skew(-30deg, 60deg);

            left: 286px;

            top: 160px;

            background-color: red;

        }

        .two::before {

            content: "";

            width: 40px;

            height: 300px;

            /*border: 1px solid black;*/

            position: absolute;

            top: 26px;

            left: -8px;

            transform: rotate(10deg);

            background-color: red;

        }

        @keyframes autoRotate {

            from {

            }

            to {

                transform: rotate(3600deg);

            }

        }

        .animate {

            animation: autoRotate 30s linear infinite;

        }

    </style>

</head>

<body>

<div class="container animate">

    <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

</div>

</body>

</html>

//利用Css3里面的一些新属性，做了一个谷歌浏览器图标

使用C3的一些新属性绘制谷歌浏览器的图标的更多相关文章

  1. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  2. autocomplete属性在谷歌浏览器不起作用

    大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为&q ...

  3. HTML5新属性在Google浏览器中不能显示的问题

    这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...

  4. HTML5 中的新属性autocomplete="off"失效的解决方法（兼容firefox，IE，360）

    因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...

  5. css3新属性@ text-shadow

    text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...

  6. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

  7. 实现Square类，让其继承自Rectangle类，并在Square类增添新属性和方法，在2的基础上，在Square类中重写Rectangle类中的初始化和打印方法

    实现Square类,让其继承自Rectangle类,并在Square类增添新属性和方法,在2的基础上,在Square类中重写Rectangle类中的初始化和打印方法 #import <Found ...

  8. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  9. （二）给IE6-IE9中的input添加HTML5新属性-placeholder

    同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...

随机推荐

  1. SqlServer数据库《基本》

    数据库简单说就是行.列组成的二维表 把列称为字段.每一行数据成为记录,能标识每一行的唯一字段称为主键 查询数据表时,索引可以提高查询速度,但是索引同时会降低新增和更新数据时的速度,应为还要更新索引. ...

  2. 剑指offer——面试题18:删除链表的节点

    #include"List.h" void DeleteNode(ListNode** pHead,ListNode* pToBeDeleted) { if(*pHead==nul ...

  3. CDH集群安装配置（四）- mysql 的安装

    安装mysql,并且创建相关的表(只需要在chd1上面安装而且需要root权限)1.1 查看Centos自带mysql是否已经安装 yum list installed | grep mysql 卸载 ...

  4. python fileinput处理多文件

    import fileinput with fileinput.input(files=(path1,path2)) as f: for line in f: print(line)

  5. Hibernate的查询的方式

    Hibernate的查询的方式 在Hibernate中提供了很多种的查询的方式.Hibernate共提供了五种查询方式. Hibernate的查询方式:OID查询 OID检索:Hibernate根据对 ...

  6. 宜人贷项目里-----正则匹配input输入月份规则

    在标签上可以直接进行校验如下,如果只调数字键盘type=number不好用可以用type=tel <input name="creditDate" oninput=" ...

  7. JAVA学习5：用Maven创建第一个web项目(2)servlet演示

    上一章用Maven新建了web项目成功后,本文演示在此基础上应用servlet. 1.首先修改pom.xml文件,添加servlet依赖   <project xmlns="http: ...

  8. Oracle 客户端管理软件安装

    1.首先,先说明下为什么要安装Oracle客户端管理工具? 因为Oracle服务端过大,而且消耗的资源过多,大部分公司会把服务端装在公司的服务器上,而不会装在员工的电脑上,所以这个时候就需要使用Ora ...

  9. LinuxShell脚本编程基础1-vi编辑器的使用

    1.输入模式与命令模式的切换 按 [Esc]键 切换到 命令模式: 2.保存与退出 :w mytest.txt 保存文件名 :q 退出 :q! 强制退出 :wq  保存并退出 3.插入文本命令 i 在 ...

  10. Git学习系列之Git产生的背景

    不多说,直接上干货! 史上最浅显易懂的Git教程! 为什么要编写这个教程?因为我在学习Git的过程中,买过书,也在网上Google了一堆Git相关的文章和教程,但令人失望的是,这些教程不是难得令人发指 ...