纯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 完美实现圆角效果
Jul 13 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
自制PHP框架之设计模式
2017/05/07 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
利用python修改json文件的value方法
2018/12/31 Python
python requests指定出口ip的例子
2019/07/25 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
Pycharm github配置实现过程图解
2020/10/13 Python
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
十八大闭幕感言
2014/01/22 职场文书
班级联欢会主持词
2015/07/03 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
Python正则表达式中flags参数的实例详解
2022/04/01 Python
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js