<!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. Django get_object ,get_queryset方法

    Django提供了很多通用的基于类的视图(Class Based View),可以帮我们简化执行以下操作的代码.这些基于类的视图还提供了get_queryset, get_context_data和g ...

  2. [转] Hive函数大全

    1.内置运算符 1.1关系运算符 运算符 类型 说明 A = B 所有原始类型 如果A与B相等,返回TRUE,否则返回FALSE A == B 无 失败,因为无效的语法. SQL使用”=”,不使用”= ...

  3. Robot Framework（用户关键字）

    在 Robot Framework 中关键字的创建分两种:系统关键字和用户关键字.系统关键字需要通过脚本开发相应的类和方法,这个我们将在后面的章节介绍.用户关键字的创建就要简单得多,它主要利用现有的系 ...

  4. selenium+Python(处理html5的视频播放）

    Webdriver支持在指定的浏览器测试HTML5,另外可以用JavaScript来测试这些功能,这样就可以在任何浏览器上测试HTML5 多数浏览器使用控件来播放视频,但是不同浏览器需要使用不同的插件 ...

  5. 解决JavaScript拖动时同时触发点击事件的BUG

    在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件 ...

  6. 关于定位和z-index的一些小经历

    今天在工作过程中,遇到这么一个奇葩问题,搞了好一阵子才找到原因,遂总结了一下... 先上DEMO: <div style="width:800px; height:400px;&quo ...

  7. SQL Cookbook—字符串

    1.遍历字符串2.计算字符在字符串中出现的次数3.从字符串中删除不需要的字符4.将字符和数字数据分离5.判别字符串是不是字母数字型的6.提取姓名的大写首字母缩写7.按字符串中的部分内容排序8.按字符串 ...

  8. Android OpenGL教程-第四课【转】

    第四课 旋转: 在这一课里,我将教会你如何旋转三角形和四边形.左图中的三角形沿Y轴旋转,四边形沿着X轴旋转. 我们增加两个变量来控制这两个对象的旋转.这两个变量加在程序的开始处其他变量的后面.它们是浮 ...

  9. ORM框架SQLAlchemy的使用

    ORM和SQLAlchemy简介 对象关系映射(Object Relational Mapping,简称ORM),简单的来说,ORM是将数据库中的表与面向对象语言中的类建立了一种对应的关系.然后我们操 ...

  10. WPF基础控件

    1.所有基础控件结束(英文) http://www.dotnetperls.com/tooltip-wpf 2.wpf- DataGrid 常用属性和事件 3.