【css】旋转,亮度变化

发布时间 2023-05-17 12:13:26作者: Esai-Z

先定位

1 position: absolute;//绝对定位(很重要)
2     left: 124px;//定位位置,一般为盒子宽高的一半,可以是50%,50%
3     top: 102px;
4     transform: translate(-50%, -50%);//变换方向
5     //旋转
6     animation: round 10s infinite linear;
7     //亮度变化
8     animation: hightLight 2s infinite linear;

在外侧加入:

 1 //旋转:
 2 @keyframes round {
 3   0% {
 4     transform: translate(-50%, -50%) rotate(0);
 5   }
 6   100% {
 7     transform: translate(-50%, -50%) rotate(360deg);
 8   }
 9 }
10 
11 //亮度变化
12 @keyframes hightLight {
13   0% {
14     filter: brightness(0.8);
15   }
16   50% {
17     filter: brightness(2);
18   }
19   100% {
20     filter: brightness(0.8);
21   }
22 }