<!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. date时间设置

    date +%F时间日期   date  +%Y -%m-%d   年月日 date  +%T   显示时间   HMS几点几分几秒 -%H  为小时 %w  周几 date   -d   “-1da ...

  2. sql语句之group_concat函数

    MySQL中group_concat函数 完整的语法如下: group_concat([DISTINCT] 要连接的字段 [Order BY ASC/DESC 排序字段] [Separator '分隔 ...

  3. Java/Android 网络请求框架/库

    Android 图片缓存框架  最上面的最优先 com.facebook.fresco:fresco:0.12.0                7.26.2016最新 Universal-Image ...

  4. signed char型内存位bit表示

    signed char型内存 80 81 82 83 84 85 86 87 88 89 8a 8b 8c 8d 8e 8f 90 91 92 93 94 95 96 97 98 99 9a 9b 9 ...

  5. Java学习之路(四)：面向对象

    Java中的面向对象 概念:面向对象的原本的意思是“”万物皆对象“” 面向对象思想的特点: 是一种更符合我们思想习惯的思想,将复杂的事情简单化 使我们角色发生了转换,将我们从执行者变成了指挥者 面向对 ...

  6. 关于echar彩色柱状图颜色配置问题

    在做配置页面的时候,有这样一个需求,用户可以选择配置是单色柱状图或者彩色的柱状图,并且颜色可以自定义的 思路:首先默认构建一个一个空的图表,然后根据记录上一次操作保存过来的参数重新组建option的值 ...

  7. js模块加载框架 sea.js学习笔记

    seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...

  8. 关于Jquery事件绑定的心得

    今日在工作的时候,遇上了一些和事件绑定有关的问题无法解决,于是在网上找到了以下资料,稍加整理了下. 对于事件绑定,jQuery的 bind / unbind 大多数时候可能并不会用到,取而代之的是直接 ...

  9. React.js 小书 Lesson25 - 实战分析：评论功能（四）

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...

  10. android studio应用修改到android源码中作为内置应用

    1. 方法一:导入,编译(太麻烦,各种不兼容问题) android studio和eclipse的应用结构目录是不同的,但是在android源码中的应用基本上都是使用的eclipse目录结构(在/pa ...