css css2 css3_CSS圈子-白红宇

css css2 css3

A while back I shared a . Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There's another common shape that's easy to create, and that is the circle. Using border-radius, you can create wonderful CSS circles.

不久前，我分享了一种的。在过去的一年中，我发现CSS三角形非常有效，尤其是在寻找使用同样的指针模式创建工具提示或设计元素时。还有另一个易于创建的常见形状，那就是圆形。使用border-radius，您可以创建精美CSS圆。

CSS (The CSS)

Setting the border-radius of each side of an element to 50% will create the circle display at any size:

将元素各边的边界半径设置为50％，将创建任意大小的圆形显示：

.circle {	border-radius: 50%;	width: 200px;	height: 200px; 	/* width and height can be anything, as long as they're equal */}

It's really that simple...but I can't let this post go without touching on and :

真的就这么简单...但是我不能不谈和而放弃这篇文章：

/* Create the animation blocks */@keyframes spin {	from { transform: rotate(0deg); }	to { transform: rotate(360deg); }}/* Spinning, gradient circle; CSS only! */#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;}

Voila. There's an awesome CSS circle!

瞧有一个很棒CSS圈子！

CSS circles don't immediately appear as useful as CSS triangles, but they surely have value within design. An animated set of circles could act as a loading animation; creative use of the circle is up to you. Can you think of a good CSS circle usage? Share!

CSS圆并没有像CSS三角形那样立即有用，但是它们肯定在设计中具有价值。一组动画的圆可以充当加载动画；圈子的创意使用取决于您。您能想到CSS圈的良好用法吗？分享！

翻译自:

css css2 css3