<!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. 基于python实现Oracle数据库连接查询操作

    使用python语言连接Oracle数据库配置 #coding:utf-8 import cx_Oracle as oracle db=oracle.connect('root/123456@192. ...

  2. JMeter工具接口性能压力测试分析与优化

    最近公司做的项目,要求对相关接口做性能压力测试,在这里记录一下分析解决过程. 压力测试过程中,如果因为资源使用瓶颈等问题引发最直接性能问题是业务交易响应时间偏大,TPS逐渐降低等.而问题定位分析通常情 ...

  3. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred. Please contact your administrator

    问题原因:mysql参数设置问题 检查mysql参数: mysql> SHOW VARIABLES LIKE 'max_allowed_packet'; 修改/etc/my.cnf文件: [my ...

  4. shiyan 3

    //info.h#ifndef INFO_H #define INFO_H #include <string> using std::string; class Info { public ...

  5. JavaScript Ajax 实现学习

    创建异步对象: function createXmlHttp(){ var xhobj=false; try{ xhobj=new ActiveXObject("Msxml2.XMLHTTP ...

  6. JS原型与原型链（好文看三遍）

    一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象. 下面举例说明: function ...

  7. JVM的内存结构

    程序计数器 程序计数器(Program Counter Register)是一块较小的内存空间,它可以看作是当前线程所执行的字节码的行号指示器.字节码解释器工作时就是通过改变这个计数器的值来选取下一条 ...

  8. vuex 实现vue中多个组件之间数据同步以及数据共享。

    http://pan.baidu.com/s/1hrJfpli  demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...

  9. Centos 从零开始 (二)

    因为我是搞 nodejs的 所以以后会安装一些依赖于node的 比如mongodb数据库等. 6:安装nodejs 安装的时候遇到个小问题.yum install nodejs 报错 说没有这个包.然 ...

  10. 微信小程序准备阶段。(一)

    --知识储备--HTML+JS+CSS (一)下载一个微信web开发工具(后续代码都会写在这里边)附上链接:https://mp.weixin.qq.com/debug/wxadoc/dev/devt ...