css
主页 > 网页 > css >

CSS3实现360度循环旋转功能的代码

2022-01-27 | 秩名 | 点击:

1.整个div360度旋转

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<style type="text/css">

.div3 {

    position:absolute;

    z-index:3;

    left:40px;

    top:40px;

    font-weight:bold;

    background:red;

    animation: myfirst2 15s infinite linear;

}

@keyframes myfirst2

{

from {transform: rotate(0deg);}

to {transform: rotate(359deg);}

}

  

@keyframes myfirst

{

from {transform: rotate(0deg);}

to {transform: rotate(-359deg);}

}

</style>

<div class="div3">旋转吧</div>

效果图:

2.div内的文字不动,底边的图片旋转

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<html>

<head>

<style type="text/css">

body {

    background:#000a2d;

}

.div2 {

    position:absolute;

    z-index:2;

    left:40px;

    top:40px;

    font-weight:bold;

    height:400px;

    width:400px;

    animation: myfirst2 15s infinite linear;

}

.div3 {

    position:absolute;

    z-index:3;

    left:11%;

    top:22%;

    font-weight:bold;

    color:#fff;

    background:red;

}

@keyframes myfirst2

{

from {transform: rotate(0deg);}

to {transform: rotate(359deg);}

}

  

@keyframes myfirst

{

from {transform: rotate(0deg);}

to {transform: rotate(-359deg);}

}

</style>

</head>

  

<body>

  

<div class="div3">最上层</div>

<div class="div2"><img src="./centerBg3.png" style="width:100%;height:100%;"></div>

</body>

</html>

效果

原文链接:https://www.jb51.net/css/808691.html
相关文章
最新更新