css动态画圆和和感叹号 |字在一定空间里分散对齐css

/* 动态画圆 */
.div1 {
border-radius: 50%; /* 圆形边框 */
background: #f00; /* 红色背景 */
animation: spin 2s linear infinite; /* 旋转动画 */
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 动态感叹号 */
.div2 {
width: 0;
height: 0;
border-left: 5px solid transparent; /* 左边框 */
border-right: 5px solid transparent; /* 右边框 */
border-bottom: 10px solid #f00; /* 底部边框 */
position: relative;
animation: shake 0.5s linear infinite; /* 摇晃动画 */
}
.div2::before {
content: "!"; /* 感叹号 */
position: absolute;
top: -10px;
left: -5px;
font-size: 20px;
color: #fff; /* 白色字体 */
}
@keyframes shake {
0% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
100% {
transform: translateX(-5px);
}
}

上述代码中，大家使用border-radius属性实现了圆形边框，并通过animation属性让其进行旋转动画。另外，大家还使用了::before伪元素来实现感叹号的添加，并通过animation属性让其进行摇晃动画。

CSS动态画圆和感叹号的实现方式各不相同，但都利用了CSS强大的动画功能，让Web页面更加生动有趣。在实践中，大家还可以根据需求对这些效果进行自由定制和拓展，实现更多有趣的动画效果。