纯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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
css3实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 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,ajax实现分页
2008/03/27 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php中filter_input函数用法分析
2014/11/15 PHP
PHP安全下载文件的方法
2016/04/07 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
JS实现小米轮播图
2020/09/21 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
Python魔术方法专题
2020/06/19 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
研发工程师的岗位职责
2013/11/18 职场文书
销售演讲稿范文
2014/01/08 职场文书
安全教育感言
2014/03/04 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
党委领导班子整改方案
2014/09/30 职场文书
小学母亲节活动总结
2015/02/10 职场文书
比赛主持人开场白
2015/05/29 职场文书