纯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教程:新增加的结构伪类
Apr 02 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 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
example2.php
2006/10/09 PHP
用PHP将数据导入到Foxmail
2006/10/09 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
PHP PDO操作总结
2014/11/17 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
python 剪切移动文件的实现代码
2018/08/02 Python
对Python中plt的画图函数详解
2018/11/07 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
Python绘制数码晶体管日期
2021/02/19 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
小学教师寄语大全
2014/04/03 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2015年公司新年寄语
2014/12/08 职场文书
保险内勤岗位职责
2015/04/13 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android