兔子定位问题

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

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

/*整体设置*/
*{
    width: 100%;
    padding: 0;
    margin:0;
}
 
/*蓝天样式*/
.sky{
    height: 50vh;
    background:-webkit-linear-gradient(top,rgba(196, 228, 253,1) 0%,rgba(255, 255, 255,1) 100%);
    background:-moz-linear-gradient(top,rgba(196, 228, 253,1) 0%,rgba(255, 255, 255,1) 100%);
    background:-o-linear-gradient(top,rgba(196, 228, 253,1) 0%,rgba(255, 255, 255,1) 100%);
    background:linear-gradient(top,rgba(196, 228, 253,1) 0%,rgba(255, 255, 255,1) 100%);
    position: relative;
}
 
/*草地样式*/
.grass{
    height: 50vh;
    background:-webkit-linear-gradient(top,rgba(255, 255, 255,1) 0%,rgba(148, 190, 89,1) 100%);
    background:-moz-linear-gradient(top,rgba(255, 255, 255,1) 0%,rgba(148, 190, 89,1) 100%);
    background:-o-linear-gradient(top,rgba(255, 255, 255,1) 0%,rgba(148, 190, 89,1) 100%);
    background:linear-gradient(top,rgba(255, 255, 255,1) 0%,rgba(148, 190, 89,1) 100%); 
    position: relative;
}
 
/*云朵*/
.cloud{
    width: 100px;
    height: 30px;
    border-radius: 15px;
    background: rgba(255,255,255,1);   
    position:absolute;
    top: 50px;
    left: 100%;
}
.cloud:before,.cloud:after{
    content: "";
    width: 50px;
    height: 40px;
    border-radius: 50px;
    position: absolute;
    transform:rotate(30deg);
    background: rgba(255,255,255,1);
    top: -5px;
    left: 5px;
}
.cloud:after{
    content: "";
    width: 60px;
    height: 60px;
    border-radius: 50%;
    top: -25px;
    left: 30px;
}
 .no1{
    animation:fly 12s linear infinite;
    opacity: 0.7;
    transform:scale(1);
 }
 .no2{
    animation:fly 10s linear infinite;
    opacity: 0.7;
    transform:scale(1.2);
    top: 90px;
 }
 .no3{
    animation:fly 11s linear infinite;
    opacity: 0.8;
    transform:scale(0.9);
    top: 130px;
 }
 .no4{
    animation:fly 12s linear 2s infinite;
    opacity: 1;
    transform:scale(0.8);
    top: 55px;
 }
 .no5{
    animation:fly 16s linear 1s infinite;
    opacity: 0.6;
    transform:scale(0.7);
    top: 100px;
 }
 @keyframes fly{
    0%{
        right: 0px;
    }
    100%{
        left: -100%;
    }
 }
 
 /*图片设置*/
 .grass img.rabbit{
    position: absolute;
    transform:scale(0.1);
    right:200px;
    bottom: 50px;  
 }

想问下为什么缩放scale后兔子定位跑到了窗口上方？

JERRYR00 2017-02-09

源自：CSS3图片切换特效 4-2 作业题

62

收起

5回答

大大菲锅锅哒 2017-03-10 15:51:17

我是将兔子的缩放基点位置放在右下角兔子缩放就不会往上跑了不知道和你的问题是不是一样

1

2

3

4

.rabbit > img{
    transform-origin: right bottom;
    transform: scale(.1);
}

小丸子爱吃菜 2017-02-13 10:31:28

给图片设置高和宽就可以了！

祝学习愉快~

提问者 JERRYR00 #1

为什么缩放就不行呢有什么区别啊

2017-02-13 21:51:16
小丸子爱吃菜回复提问者 JERRYR00 #2

可以进行缩放，同时设置宽和高，这个不冲突的~

2017-02-14 09:18:02

提问者 JERRYR00 2017-02-11 11:45:46

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>rabbit</title>
    <link rel="stylesheet" type="text/css"href="css/style.css">
</head>
<body>
    <section>
        <div class="cloud no1"></div>
        <div class="cloud no2"></div>
        <div class="cloud no3"></div>
        <div class="cloud no4"></div>
        <div class="cloud no5"></div>
    </section>
    <section>
        <img src="image/rabbit.png" class="rabbit">       
    </section>
</body>
</html>

提问者 JERRYR00 2017-02-11 11:44:00

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>rabbit</title>
    <link rel="stylesheet" type="text/css"href="css/style.css">
</head>
<body>
    <section>
        <div class="cloud no1"></div>
        <div class="cloud no2"></div>
        <div class="cloud no3"></div>
        <div class="cloud no4"></div>
        <div class="cloud no5"></div>
    </section>
    <section>
        <img src="image/rabbit.png">       
    </section>
</body>
</html>

小丸子爱吃菜 2017-02-10 09:31:43

将html代码也贴出来，我们需要运行一下查找问题，单看样式表看不出什么问题。

祝学习愉快~

提问者 JERRYR00 #1

贴出来了请看一下是什么问题~

2017-02-11 16:19:43

相似问题

兔子缩放后定位不准

兔子的定位

虽然效果实现了但是感觉问题很多。请老师指导。小兔子位置我使用图块代替。不然您那边不显示兔子。

小白兔的位置问题

关于兔子缩放

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018

参与学习 1887 人
提交作业 4643 份
解答问题 5760 个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

本课精华内容

问答作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号