css 外圆角旋转,CSS动画实例：旋转的圆角正方形

在页面中放置一个类名为container的层作为效果呈现容器，在该层中再定义十个名为shape的层层嵌套的子层，HTML代码描述如下：

分别为container和shape定义CSS样式规则如下：

.container

{

margin: 0 auto;

width: 650px;

height: 650px;

position: relative;

overflow: hidden;

border: 4px solid rgba(255, 0, 0, 0.9);

display: flex;

padding: 0;

flex: 1;

align-items: center;

justify-content: center;

}

.shape

{

background: radial-gradient(circle, #000, transparent) #f00;

border: 1px solid;

box-sizing: border-box;

border-radius: 5%;

padding: 20px;

}

在CSS样式的作用下，这11个层在浏览器中显示如图1所示。10个层层嵌套的子层显示为10个圆角正方形。

图1  10个圆角正方形

现在让这10个圆角正方形旋转起来，编写关键帧定义为：

@keyframes turn

{

0%   {  transform: rotate(0deg); }

100% {  transform: rotate(360deg); }

}

然后在.shape样式定义中加上一句“animation: turn 30s infinite linear;”，此时，10个圆角正方形会旋转起来，如图2所示。

图2  旋转的红色圆角正方形

图2中旋转的10个正方形的背景色全部为红色，我们想让颜色进行些变化，在编写一个名为rainbow(彩虹)的颜色变化的关键字定义如下：

@keyframes rainbow

{

0%,100% { color: #f00; }

16.667% { color: #ff0; }

33.333% { color: #0f0; }

50.000% { color: #0ff; }

66.667% { color: #00f; }

83.333% { color: #f0f; }

}

再修改shape的样式规则定义为：

.shape

{

background: radial-gradient(circle, #000, transparent)  currentcolor;

border: 1px solid;

box-sizing: border-box;

border-radius: 5%;

padding: 20px;

animation: turn 10s infinite linear,rainbow 10s infinite linear;

}

其中修改了两处：一处是将背景颜色由红色(#f00)改成当前色(currentcolor)，另一处是在动画属性animation中加入了颜色变化的动画定义。

此时，在浏览器中呈现出如图3所示的效果。

图3  旋转的变色圆角正方形

图3中旋转过程中正方形虽然会改变颜色，但10个正方形的颜色仍然一样。为了让各个正方形颜色不同，可以为每个层定义一个变量—n，然后为颜色变化的动画加上属性animation-delay，它的属性值根据变量—n进行计算。

完整的HTML文件内容如下。

旋转的正方形

}.shape{background:radial-gradient(circle, #000, transparent) currentcolor;border:1px solid;box-sizing:border-box;border-radius:5%;padding:20px;animation:turn 30s infinite linear,

rainbow 30s infinite linear

calc(30 * (10 * (10 - var(--n)) * 0.01) * -1s);

}@keyframes turn{0% { transform:rotate(0deg); }100%{transform:rotate(360deg); }}

@keyframes rainbow{0%,100% { color:#f00; }16.667%{color:#ff0; }33.333%{color:#0f0; }50.000%{color:#0ff; }66.667%{color:#00f; }83.333%{color:#f0f; }}