css 圆形背景icon_纯CSS绘制漂亮的圆形图案效果

另外一种也可以用CSS简单的实现的形状是圆形。使用border-radius,你可以画出各种漂亮的圆形图案。

CSS代码

只需要将你的网页元素的每个边的border-radius甚至成50%，你就能得到任意大小的圆：

复制代码代码如下:

.circle {

border-radius: 50%;

width: 200px;

height: 200px;

/* 宽度和高度需要相等 */

}

这确实是非常的简单，但我们无法抵挡在之上使用CSS渐变色和基本旋转动画的诱惑：:

复制代码代码如下:

/* 动画定义 */

@keyframes spin {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

/* 旋转，渐变色 */

#advanced {

width: 200px;

height: 200px;

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%);

animation-name: spin;

animation-duration: 3s; /* 3 seconds */

animation-iteration-count: infinite;

animation-timing-function: linear;

}

哇塞，这就是这个漂亮的CSS圆形了！

用CSS画圆的技术初看起来不像CSS画三角技术那么有用，但在页面设计中仍然不乏它的价值。你可以在页面加载时使用动画圆表现loading…，怎么用，这要看你的创意了。你有好的创意吗？

css 圆形背景icon_纯CSS绘制漂亮的圆形图案效果相关推荐

css 圆形背景icon_纯CSS3制作精美的圆形扁平风格图标
这是一组使用纯CSS3制作的精美的扁平风格的圆形图标.这些圆形图标都是使用CSS的伪元素来制作,是一套以家居为主题的图标,包括门窗,邮箱,浴室,台灯书柜等等10个图标. 制作方法 HTML结构图标的 ...
css让图片显示圆角纯CSS绘制漂亮的圆形图案效果
css让图片显示圆角样式: border-radius:5px 15px 20px 25px;顺序依次是上右下左纯CSS绘制漂亮的圆形图案效果 .circle { border-radius: 5 ...
CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
[css] 能不能使用纯css使你的浏览器卡死？怎么实现？
[css] 能不能使用纯css使你的浏览器卡死?怎么实现? 可以,用计算属性calc,变量个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与 ...
css动画怎么暂停,纯CSS方式实现CSS动画的暂停与播放！
使用纯 CSS 的方法,能否暂停.播放 CSS 动画?看起来不可能,至少很麻烦. 我们知道,在 CSS3 animation 中,有这样一个属性可以暂停.播放动画: { animation-play- ...
php气泡效果,ps绘制漂亮透明的泡泡效果
今天说说如何用ps绘制漂亮透明的泡泡效果,做法简单,想学的朋友可以看下: 1.首先打开PS软件,新建500x400的图层(大小自定,好操作就行),然后填充蓝色,如下图! 2.新建图层1,选择" ...
html+js画一颗心形,javascript绘制漂亮的心型线效果完整实例
本文实例讲述了javascript绘制漂亮的心型线效果实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: JS心型线 div{ position:absolute; } . ...
css 圆形背景icon_我写CSS的常用套路(附demo的效果实现与源码）
前言本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗.1.交错动画有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇.那么如 ...

css 圆形背景icon_纯CSS绘制漂亮的圆形图案效果

css 圆形背景icon_纯CSS绘制漂亮的圆形图案效果相关推荐

最新文章

热门文章