纯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代码实现的动画导航
Oct 31 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
img的onload的另类用法
2008/01/10 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
python 查找字符串是否存在实例详解
2017/01/20 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
python字符串常用方法
2018/06/14 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
采购内勤岗位职责
2013/12/10 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
主题酒店策划书
2014/01/28 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
职位说明书范文
2014/05/07 职场文书
文明市民先进事迹
2014/05/15 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android