纯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实现3D色子翻转特效
Dec 23 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
在Django的视图中使用数据库查询的方法
2015/07/16 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
python实现可变变量名方法详解
2019/07/01 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
聚美优品恶搞广告词
2014/03/14 职场文书
三年级小学生评语
2014/04/22 职场文书
市场营销专业自荐书
2014/06/10 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
关于诚信的活动方案
2014/08/18 职场文书
法定代表人身份证明书
2014/09/10 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
2014年教师工作总结
2014/11/10 职场文书
社区结对共建协议书
2016/03/23 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
Python+DeOldify实现老照片上色功能
2022/06/21 Python