纯CSS绘制漂亮的圆形图案效果


Posted in HTML / CSS onMay 07, 2014

另外一种也可以用CSS简单的实现的形状是圆形。使用border-radius,你可以画出各种漂亮的圆形图案。

纯CSS绘制漂亮的圆形图案效果

CSS代码

只需要将你的网页元素的每个边的border-radius甚至成50%,你就能得到任意大小的圆:

复制代码
代码如下:

.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* 宽度和高度需要相等 */
}

这确实是非常的简单,但我们无法抵挡在之上使用CSS渐变色和基本旋转动画的诱惑::
复制代码
代码如下:

/* 动画定义 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}</p> <p>/* 旋转,渐变色 */
#advanced {
width: 200px;
height: 200px;</p> <p> background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);</p> <p> animation-name: spin;
animation-duration: 3s; /* 3 seconds */
animation-iteration-count: infinite;
animation-timing-function: linear;
}

哇塞,这就是这个漂亮的CSS圆形了!

用CSS画圆的技术初看起来不像CSS画三角技术那么有用,但在页面设计中仍然不乏它的价值。你可以在页面加载时使用动画圆表现loading…,怎么用,这要看你的创意了。你有好的创意吗?

HTML / CSS 相关文章推荐
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 #HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 #HTML / CSS
css3圆角边框和边框阴影示例
May 05 #HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 #HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 #HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 #HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 #HTML / CSS
You might like
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Python实现Dijkstra算法
2018/10/17 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python调用摄像头的示例代码
2020/09/28 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
求职信怎么写范文
2014/05/26 职场文书
建筑工地大门标语
2014/06/18 职场文书
效能风暴心得体会
2014/09/04 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
民事诉讼代理词
2015/05/25 职场文书
出生证明格式
2015/06/15 职场文书
金榜题名主持词
2015/07/02 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
HTML+JS实现在线朗读器
2022/02/15 Javascript
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android