纯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实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 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获取当前网址及域名的实现代码
2013/06/23 PHP
php限制文件下载速度的代码
2015/10/20 PHP
分享10段PHP常用代码
2015/11/11 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
Nginx实现反向代理
2017/09/20 Servers
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
JS常用算法实现代码
2016/11/14 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
Element Dialog对话框的使用示例
2020/07/26 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
Python 变量的创建过程详解
2019/09/02 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
python怎么删除缓存文件
2020/07/19 Python
高中生自我鉴定范文
2013/10/30 职场文书
销售业务员岗位职责
2014/01/29 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
六五普法学习心得体会
2016/01/21 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python