纯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动画效果抖动解决方法
Sep 03 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 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+memcache实现的网站在线人数统计代码
2014/07/04 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
Python Property属性的2种用法
2015/06/21 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
办公室年终个人自我评价
2013/10/28 职场文书
交通安全教育制度
2014/02/02 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
学校党员干部承诺书
2015/05/04 职场文书
运动会表扬稿范文
2015/05/05 职场文书
2016年情人节问候语
2015/11/11 职场文书
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android