<!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. QueryRunner(DBUtils) 结果集实例

    转自:http://www.cnblogs.com/myit/p/4272824.html#   单行数据处理:ScalarHandler    ArrayHandler    MapHandler  ...

  2. Linux 系统下安装 mysql5.7.25(glibc版)

    前言:经过一天半的折腾,终于把 mysql 5.7.25 版本安装上了 Amazon Linux AMI release 2017.09 系统上,把能参考的博客几乎都看了一遍,终于发现这些细节问题,然 ...

  3. github创建本地库后关联远程库

    在进行新项目开发时,有时候并不一定先创建远程库,而是先在本地将项目创建,到一定阶段后再与远程库关联.下面步骤解决本地库与远程库在这种情形. 1. 初始化本地库,既然项目已经创建了,相信这个也已经知道了 ...

  4. android 拍照和从相册选择组件

    android 拍照及从相册选择组件 单独封装到一个 activity 中便于更好的复用 拍照或从相册选择成功后使用 EventBus 发出广播回传图片路径,和调用者充分解耦合 根据传入参数支持裁剪和 ...

  5. ztree树样式的设计

    ztree的功能虽然很是强大,但是唯一有一点就是样式有点普通,所以如果我们需要修改样式,那么就只能进行样式重新覆盖了 样式代码,这些都是根据实际样式进行覆盖 /** * tree的选中样式 */ .c ...

  6. 使用git配合idea使用oschina代码仓库初级教程

    http://git.oschina.net/ 这个是开源中国的代码仓库是免费的,可以建100和仓库,私有也是免费的 第一步,创建 oschina代码仓库,这里就忽略了.很简单.去注册一个简单几步就可 ...

  7. Maven的目录结构和常用命令

    一.Maven项目的目录结构  1.顶级目录结构   src:该目录主要存放的是项目的源代码文件. target:该目录是项目编译后产生的一个目录,主要存放的是编译后的.class文件. pom.xm ...

  8. Exception from System.loadLibrary(smjavaagentapi) java.lang.UnsatisfiedLinkError: no smjavaagentapi in java.library.path

    可能原因: 缺少smjavaagentapi.jar文件或者libsjavaagentapi.so缺少相关的依赖包. 解决方法: 1. 检查sso的lib下面是否有smjavaagentapi.jar ...

  9. [转]NLog 自定义字段 写入 oracle

    本文转自:http://www.cnblogs.com/skyapplezhao/p/5690695.html 1.通过Nuget安装NLog 下载,简单入门 请参照 我刚才转的几篇文章,下面我直接贴 ...

  10. 快速清除SQL2008日志文件

    USE [master] --把数据库调整为简单模式 GO ALTER DATABASE krisvision SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DA ...