纯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 简单又实用的5个属性
Mar 04 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 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
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
php统计文章排行示例
2014/03/04 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
jQuery入门知识简介
2010/03/04 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python版本五子棋的实现代码
2018/12/11 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Pycharm github配置实现过程图解
2020/10/13 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
天网面试题
2013/04/07 面试题
总经理助理工作职责
2014/02/06 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers