纯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 相关文章推荐
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 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
Zerg兵种介绍
2020/03/14 星际争霸
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
5款非常棒的Python工具
2018/01/05 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
车间工艺员岗位职责
2013/12/09 职场文书
2014年保管员工作总结
2014/11/18 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
叶问观后感
2015/06/15 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
python not运算符的实例用法
2021/06/30 Python