css动画w变t再变u

在前端开发和网页设计中，我们常常会使用CSS来制作各种动画效果。其中一个常见的动画效果是 w 变 t 再变 u，即一个物体在原地不断地变换形状。

    .Box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        animation: change 2s linear infinite;
    }
    @keyframes change {
        0% {
            border-radius: 0;
        }
        25% {
            border-radius: 50%;
            transform: rotate(45deg);
        }
        50% {
            border-radius: 0;
            transform: rotate(90deg);
        }
        75% {
            border-radius: 50%;
            transform: rotate(135deg);
        }
        100% {
            border-radius: 0;
            transform: rotate(180deg);
        }
    }

通过向一个 div 元素添加上述 CSS 样式，我们可以制作出一个在原地不断变形的红色正方形，动画效果就是 w 变 t 再变 u。

上述代码中，我们使用了 CSS3 的 @keyframes 动画特性，来定义动画从起始状态到结束状态中每一步的样式规则。并且在 .Box 元素中使用了 animation 属性来应用上述动画规则，并设置了动画时间、速度和循环次数。

通过这种方式，我们可以轻松制作出各种复杂的动画效果，增加网页的视觉吸引力和用户体验。