纯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 简写animation
May 10 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 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 全文搜索和替换的实现代码
2008/07/29 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
php分页函数完整实例代码
2014/09/22 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
JQuery选择器特辑 详细小结
2012/05/14 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
python实现下载指定网址所有图片的方法
2015/08/08 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
python 调用有道api接口的方法
2019/01/03 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
纽约海:Sea New York
2018/11/04 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
幼教个人求职信范文
2013/12/02 职场文书
企划专员岗位职责
2013/12/09 职场文书
体育教师自荐信范文
2013/12/16 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
任命书怎么写
2014/06/04 职场文书
房屋租房协议书范本
2014/12/04 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL