兔子缩放后定位不准

兔子缩放后定位不准,bottom:50px ,right:200px

没用

或許冭假 2017-01-05

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

161

收起

5回答

小丸子爱吃菜 2017-01-07 11:02:53

兔子本身的图片比较大，你虽然对它进行了缩放，但是缩放的只是该元素，并不是图片，图片只是该元素的背景图片。

解决办法：用img标签引入图片，对图片的宽高进行设置或者对img标签进行缩放，这样兔子就可以正常显示在页面中了。

祝学习愉快！

收起回答

提问者或許冭假 2017-01-06 21:57:56

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

* {
    margin: 0;
    padding: 0;
}
 
/*蓝天*/
body > div:first-of-type {
    position: relative;
    /*overflow: hidden;*/
    width: 100vw;
    height: 50vh;
    background: linear-gradient(to bottom, rgb(196, 228, 253), #ffffff);
}
 
/*蓝天*/
body > div:last-of-type {
    position: relative;
    bottom: 0;
    width: 100vw;
    height: 50vh;
    background: linear-gradient(to bottom, #ffffff, rgb(148, 190, 89));
}
 
/*云的样式*/
body > div:first-of-type > div > div.cloud,
body > div:first-of-type > div > div.cloud:before,
body > div:first-of-type > div > div.cloud:after,
body > div:first-of-type > div > div.cloud > div {
    width: 0;
    height: 0;
    border: 2.5vw solid transparent;
    border-radius: 2.5vw;
    background: white;
}
 
body > div:first-of-type > div > div.cloud {
    position: relative;
}
 
body > div:first-of-type > div > div.cloud:before {
    position: absolute;
    display: block;
    content: '';
    top: -2vw;
    left: -5.5vw;
    transform: scale(.6);
}
 
body > div:first-of-type > div > div.cloud:after {
    position: absolute;
    display: block;
    content: '';
    top: -1.2vw;
    left: -4.9vw;
    transform: scale(0.5);
}
 
body > div:first-of-type > div > div.cloud > div:first-of-type {
    position: absolute;
    top: -1.3vw;
    left: -6.5vw;
    transform: scale(0.4);
}
 
body > div:first-of-type > div > div.cloud > div:last-of-type {
    position: absolute;
    top: -1.4vw;
    left: -.7vw;
    transform: scale(0.5);
}
 
/*设置云为绝对定位*/
body > div:first-of-type > div {
    position: absolute;
    right: -10vw;
}
 
/*云的摆放位置*/
body > div:first-of-type > div:nth-of-type(1) {
    top: 5vh;
    transform: scale(0.8);
}
 
body > div:first-of-type > div:nth-of-type(2) {
    top: 7vh;
    transform: scale(0.6);
}
 
body > div:first-of-type > div:nth-of-type(3) {
    top: 9vh;
    transform: scale(0.6);
}
 
body > div:first-of-type > div:nth-of-type(4) {
    top: 11vh;
    transform: scale(.4);
}
 
body > div:first-of-type > div:nth-of-type(5) {
    top: 13vh;
    transform: scale(.5);
}
 
/*云的动画通用设置*/
body > div:first-of-type > div {
    will-change: animation;
    animation: cloud_animation ease-in-out infinite;
}
 
body > div:first-of-type > div:nth-of-type(1) {
    animation-duration: 11s;
}
 
 
body > div:first-of-type > div:nth-of-type(2) {
    animation-duration: 6s;
    animation-delay: 2s;
}
 
 
body > div:first-of-type > div:nth-of-type(3) {
    animation-duration: 9s;
    animation-delay: 4s;
}
 
 
body > div:first-of-type > div:nth-of-type(4) {
    animation-duration: 8s;
    animation-delay: 1s;
}
 
body > div:first-of-type > div:nth-of-type(5) {
    animation-duration: 7s;
    animation-delay: 1.5s;
}
 
/*动画的关键帧*/
@keyframes cloud_animation {
    from {
        right: -10vw;
    }
    to {
        right: 110vw;
    }
}
 
/*兔子*/
body > div:last-of-type > div.rabbit {
    position: absolute;
    max-width: 100px;
    max-height: 100px;
    transform: scale(.1);
    bottom: 50px;
    right: 200px;
    transform-origin: left top;
    background: url("../images/rabbit.png") no-repeat center;
}

收起回答

提问者或許冭假 2017-01-06 21:57:23

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>蓝天白云</title>
    <link rel="stylesheet" href="css/cloud.css"/>
</head>
<body>
<!--蓝天-->
<div>
    <div>
 <!--云-->
 <div class="cloud">
            <div></div>
            <div></div>
        </div>
    </div>
    <div>
 <!--云-->
 <div class="cloud">
            <div></div>
            <div></div>
        </div>
    </div>
 
    <div>
 <!--云-->
 <div class="cloud">
            <div></div>
            <div></div>
        </div>
    </div>
 
    <div>
 <!--云-->
 <div class="cloud">
            <div></div>
            <div></div>
        </div>
    </div>
    <div>
 <!--云-->
 <div class="cloud">
            <div></div>
            <div></div>
        </div>
    </div>
 
</div>
<!--绿地-->
<div>
 <!--兔子-->
 <div class="rabbit"></div>
</div>
</body>
</html>