<!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. css一些常用技巧代码

      图片等比例自动缩放 img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } 多行省略  最后line-clamp设 ...

  2. vue,新手上路，基础，常见问题

    1. 报这个错的  都是关键字问题,不要用关键字 做为组件的名字,不然肯定都会报错,如果找不到就一个字母的看,我就是 忘记改组件的名字导致报错,这个问题   改个名字就好,切记改全不然只有页面报错,文 ...

  3. APP高级抓包

    1.fiddler的证书安装问题时密码问题 问题:我手机下载了fiddler证书 从设置里面安装证书 可是需要输入密码 我没有设置过密码 不知道密码是什么 请问有人遇到过这样的问题的?求解决方法 因为 ...

  4. Ubuntu 16.04安装SecureCRT替代XShell

    XShell应该是最强大的,在Ubuntu下只有SecureCRT能实现跨平台(Linux/Windows/Mac),并且可以实现Tab的功能等.当然,还有其它的类似PuTTY这些.Windows下建 ...

  5. webpack查缺补漏

    webpack是模块化打包工具,通过webpack,可以使得我们更加方便地组织代码.压缩.转译等等. 但是学习webpack也需要一定的成本,这里记录使用webpack许久以来一些模糊的知识点,方便以 ...

  6. AngularJs学习笔记--Injecting Services Into Controllers

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.injecting_controllers 把service当作被依赖的资源加载到con ...

  7. Netty构建Http服务器

    Netty 是一个基于 JAVA NIO 类库的异步通信框架,它的架构特点是:异步非阻塞.基于事件驱动.高性能.高可靠性和高可定制性.换句话说,Netty是一个NIO框架,使用它可以简单快速地开发网络 ...

  8. Unity游戏接入Steam成就

    在接入Steam成就,其实有些地方是有坑点的,而且steam官网给的是c++代码的接入教程.如果是老鸟的话,接入还并不是很难. 但是对于新手其实还是比较痛苦的,网上这方面的资料很少.这里我给总结下,u ...

  9. Android如何避免输入法弹出时遮挡住按钮或输入框

    在AndroidManifest.xml中为对应的activity添加android:windowSoftInputMode="adjustResize" 在AndroidMani ...

  10. 深入理解JavaScript系列（46）：代码复用模式（推荐篇）

    介绍 本文介绍的四种代码复用模式都是最佳实践,推荐大家在编程的过程中使用. 模式1:原型继承 原型继承是让父对象作为子对象的原型,从而达到继承的目的: function object(o) { fun ...