使用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属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...
随机推荐
- 2019.4.2 HTML相关
HTML页面的基本结构 html标签 页面的设置和文件的导入(页面标题) 要显示在页面上的标签 标签 h1---h6:一到六级标题 hr:分割线 br:换行 p:段落 em:斜体 strong:加粗 ...
- 在ionic3+angular4项目中添加自定义图标
在阿里图标库下载自己所需要的图标解压为一下目录 把iconfont.xx文件全部放到src/assets/fonts/文件夹下,可以全部替换里面的文件,但是要把之前iconfont.css文件下的文件 ...
- C# 直接创建一个DataTable,并为之添加数据(自定义DataTable) 转
DataTable dt=new DataTable("cart"); DataColumn dc1=new DataColumn("prizename",Ty ...
- 【DB2】普通用户最小查询权限分配
1. 通过实例用户或者有dbadm权限的用户连接数据库 db2 connect to <db-name> 2. 分配普通用户连接权限db2 "grant connect on d ...
- selenium IDE 命令 一
Actions 描述了用户所会作出的操作.Action 有两种形式: action和actionAndWait, action会立即执行,而actionAndWait会假设需要较长时间才能得到该act ...
- 027-MyBatis相关配置模板
SqlMapConfig.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE confi ...
- git 学习之基础知识
在前面的一个帖子中我们知道了不同的版本控制系统的不同,在这个帖子中我们会大致的了解到它们是管理各个版本的,这对我们学习 git 是很有帮助的. 对于集中式的版本控制系统来说每次的更新主要记录内容的具体 ...
- orcale 之 集合操作
集合操作就是将两个或者多个 sql 查询的结果合并成复合查询.常见的集合操作有UNION(并运算).UNION ALL.INTERSECT(交运算)和MINUS(差运算). UNION UNION 运 ...
- SSO单点登录的实现原理是怎样的
单点登录在现在的系统架构中广泛存在,他将多个子系统的认证体系打通,实现了一个入口多处使用,而在架构单点登录时,也会遇到一些小问题,在不同的应用环境中可以采用不同的单点登录实现方案来满足需求.我将以我所 ...
- 获取URL中某个参数的值
JS代码: function getQueryString(name){ var reg = new RegExp("(^|&)" + name + "=([^& ...