使用C3的一些新属性绘制谷歌浏览器的图标
<!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的一些新属性绘制谷歌浏览器的图标的更多相关文章
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- autocomplete属性在谷歌浏览器不起作用
大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为&q ...
- HTML5新属性在Google浏览器中不能显示的问题
这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...
- HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)
因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...
- css3新属性@ text-shadow
text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...
- css3.0新属性效果在ie下的解决方案(兼容性)
css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...
- 实现Square类,让其继承自Rectangle类,并在Square类增添新属性和方法,在2的基础上,在Square类中重写Rectangle类中的初始化和打印方法
实现Square类,让其继承自Rectangle类,并在Square类增添新属性和方法,在2的基础上,在Square类中重写Rectangle类中的初始化和打印方法 #import <Found ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- (二)给IE6-IE9中的input添加HTML5新属性-placeholder
同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...
随机推荐
- QueryRunner(DBUtils) 结果集实例
转自:http://www.cnblogs.com/myit/p/4272824.html# 单行数据处理:ScalarHandler ArrayHandler MapHandler ...
- Linux 系统下安装 mysql5.7.25(glibc版)
前言:经过一天半的折腾,终于把 mysql 5.7.25 版本安装上了 Amazon Linux AMI release 2017.09 系统上,把能参考的博客几乎都看了一遍,终于发现这些细节问题,然 ...
- github创建本地库后关联远程库
在进行新项目开发时,有时候并不一定先创建远程库,而是先在本地将项目创建,到一定阶段后再与远程库关联.下面步骤解决本地库与远程库在这种情形. 1. 初始化本地库,既然项目已经创建了,相信这个也已经知道了 ...
- android 拍照和从相册选择组件
android 拍照及从相册选择组件 单独封装到一个 activity 中便于更好的复用 拍照或从相册选择成功后使用 EventBus 发出广播回传图片路径,和调用者充分解耦合 根据传入参数支持裁剪和 ...
- ztree树样式的设计
ztree的功能虽然很是强大,但是唯一有一点就是样式有点普通,所以如果我们需要修改样式,那么就只能进行样式重新覆盖了 样式代码,这些都是根据实际样式进行覆盖 /** * tree的选中样式 */ .c ...
- 使用git配合idea使用oschina代码仓库初级教程
http://git.oschina.net/ 这个是开源中国的代码仓库是免费的,可以建100和仓库,私有也是免费的 第一步,创建 oschina代码仓库,这里就忽略了.很简单.去注册一个简单几步就可 ...
- Maven的目录结构和常用命令
一.Maven项目的目录结构 1.顶级目录结构 src:该目录主要存放的是项目的源代码文件. target:该目录是项目编译后产生的一个目录,主要存放的是编译后的.class文件. pom.xm ...
- Exception from System.loadLibrary(smjavaagentapi) java.lang.UnsatisfiedLinkError: no smjavaagentapi in java.library.path
可能原因: 缺少smjavaagentapi.jar文件或者libsjavaagentapi.so缺少相关的依赖包. 解决方法: 1. 检查sso的lib下面是否有smjavaagentapi.jar ...
- [转]NLog 自定义字段 写入 oracle
本文转自:http://www.cnblogs.com/skyapplezhao/p/5690695.html 1.通过Nuget安装NLog 下载,简单入门 请参照 我刚才转的几篇文章,下面我直接贴 ...
- 快速清除SQL2008日志文件
USE [master] --把数据库调整为简单模式 GO ALTER DATABASE krisvision SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DA ...