使用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属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...
随机推荐
- Devexpress中统一设置字体样式的方法
#region 设置默认字体.日期格式.汉化dev DevExpress.Utils.AppearanceObject.DefaultFont = new System.Drawing.Font(&q ...
- /data/tomcat8/bin/setenv.sh
--问题 Java HotSpot(TM) 64-Bit Server VM warning: ignoring option MaxPermSize=512m; support was remove ...
- WinForm之GDI手动双缓冲技术
private void button1_Click(object sender, EventArgs e) { Bitmap bmp = new Bitmap(this.picturebox.Wid ...
- (转)Linux服务器SNMP常用OID
原文:https://www.haiyun.me/archives/linux-snmp-oid.html 收集整理一些Linux下snmp常用的OID,用做服务器监控很不错.服务器负载: 1 2 3 ...
- line-height详解
line-height详解 要说line-height就必须要知道这几个概念了: 顶线.中线.基线.底线. 这也就是在vertical-align中可能用到的top,middle,baseline和b ...
- Jmeter断言实例—响应断言
断言有很多种,最最最常用的一种就是响应断言,目前我用的最多是这一种,下面列举一个运用响应断言的实例 对相应的请求添加断言 **Main sample and sub-samples:断言应用于主采样器 ...
- Redis介绍与安装
一.redis简介 (一)什么是redis 1.redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value 内存数据库. 2.特点:读写性能强悍 支持丰 ...
- Mybatis Dao开发的两种方式(一)
原始Dao的开发方式: 1.创建数据库配置文件db.properties jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localh ...
- js emoji表情长度判断
1.需求:输入框长度限制为10个字符,包括表情.超出长度提示. 注:iPhone手机自定义的表情,有四个小人的,三个小人的,主要是长度还都不一样.有的表情可能一个就超出了长度限制(10),比如
- Android OpenGL教程-第五课【转】
第五课 3D空间: 我们使用多边形和四边形创建3D物体,在这一课里,我们把三角形变为立体的金子塔形状,把四边形变为立方体. 先看看三角形的顶点变成啥了 private float[] mTriangl ...