html中如何设计圆形图案,纯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…，怎么用，这要看你的创意了。你有好的创意吗？

html中如何设计圆形图案,纯CSS绘制漂亮的圆形图案效果相关推荐

css让图片显示圆角纯CSS绘制漂亮的圆形图案效果
css让图片显示圆角样式: border-radius:5px 15px 20px 25px;顺序依次是上右下左纯CSS绘制漂亮的圆形图案效果 .circle { border-radius: 5 ...
css 圆形背景icon_纯CSS绘制漂亮的圆形图案效果
另外一种也可以用CSS简单的实现的形状是圆形.使用border-radius,你可以画出各种漂亮的圆形图案. CSS代码只需要将你的网页元素的每个边的border-radius甚至成50%,你就能得 ...
纯css写的类似花纹图案的立体动态旋转
纯css写的类似花纹图案的立体动态旋转动态中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&qu ...
纯 CSS 实现优惠券透明圆形镂空打孔效果
本文同步发布在:纯 CSS 实现优惠券透明圆形镂空打孔效果我们在做商城类项目时,时常会有开发优惠券的需求,那么我们如何通过纯 CSS 来实现类似京东.淘宝的优惠券样式. 下面给大家分享一个纯 CSS ...
CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
干货分享|纯CSS绘制电池充电水波纹动效(uni-app|view组件版)
前言依托于CSS3提供的强大功能,我们可以充分发挥自己的想象力,制作出许多非常惊艳的动效,比如:接下来我要跟大家分享的一个完全用CSS绘制出来的电池充电水波纹动效,还是老规矩,小凡我依然分享的是un ...
碉堡了！纯 CSS 绘制《辛普森一家》人物头像
这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...
html5霓虹效果代码,纯CSS实现酷炫的霓虹灯效果(附demo)
最近关注了油管上的 CSS Animation Effects Tutorial 系列,里面介绍了非常多有意思的 CSS 动效.其中第一个就是很酷炫的霓虹灯效果,这里就实现思路做一个简单的记录和分享. ...
试用php语言写气泡,如何用纯CSS实现语音聊天气泡框效果
本篇文章主要给大家介绍怎么用纯css实现语音聊天气泡框效果. 推荐参考教程:<CSS教程> 语音聊天气泡框效果,在我们日常生活中或者社交网站上,都是非常常见且流行的一种对话框效果. 比如微 ...

html中如何设计圆形图案,纯CSS绘制漂亮的圆形图案效果

html中如何设计圆形图案,纯CSS绘制漂亮的圆形图案效果相关推荐

最新文章

热门文章