纯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轻松实现圆角效果
Nov 09 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
CSS3常见动画的实现方式
Apr 14 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/11/13 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
Python smallseg分词用法实例分析
2015/05/28 Python
python实现Decorator模式实例代码
2018/02/09 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
python基础梳理(一)(推荐)
2019/04/06 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
2014学年自我鉴定
2014/02/23 职场文书
临床护理求职信
2014/04/26 职场文书
片区教研活动总结
2014/07/02 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
安全教育片观后感
2015/06/17 职场文书
小学信息技术教学反思
2016/02/16 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android