[已解决]【《零基础入门学习Web开发》第007讲：前端攻城狮的自我修养-作业1小蝴蝶问题】

月牙儿 · 发表于 2019-2-8 21:05:55

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

我看着跟答案改的没什么不一样啊？为什么翅膀显示不对呢？

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-手绘蝴蝶</title>
<link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/style.css">

<style type="text/css">
html {
      box-sizing: border-box;
}

*, *:before, *:after {
      box-sizing: inherit;
}

html, body {
      height: 100%;
}

body {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-perspective-origin: 50% 50%;
      perspective-origin: 50% 50%;
      -webkit-perspective: 800px;
      perspective: 800px;
}

.butterfly {
      -webkit-animation: hover 250ms cubic-bezier(0.48, 0.01, 0.54, 1) infinite;
      animation: hover 250ms cubic-bezier(0.48, 0.01, 0.54, 1) infinite;
      -webkit-animation-direction: alternate;
      animation-direction: alternate;
      -webkit-animation-fill-mode: reverse;
      animation-fill-mode: reverse;
      position: relative;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transform: rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateY(0px);
      transform: rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateY(0px);
      width: 30px;
}
.butterfly::before {
      background: #362c13;
      border-radius: 50%;
      content: '';
      display: block;
      height: 110px;
      left: 50%;
      margin-left: -10px;
      outline: 1px solid transparent;
      position: absolute;
      top: -15px;
      -webkit-transform: rotatey(100deg);
      transform: rotatey(100deg);
      width: 20px;
      z-index: 2;
}
</style>
</head>

<body>
<div class="butterfly">
      <div class="wing">
         <div class="bit"></div>
      </div>
      <div class="wing">
         <div class="bit"></div>
      </div>
</div>
<div class="shadow"></div>

</body>
</html>

最佳答案

月排行榜 / 总排行榜

不二如是

2019-2-10 09:12:15

1、发代码建议使用“添加代码文字”：

2、需要修改三个位置：

A. 第8行的注释错了，HTML的正确注释语法应该是<!—注释的内容 -->

B. 第75、79行的注释去掉，小蝴蝶的翅膀就回来了

C. 第88行的提醒框太烦人了，把它注释掉

跳转到最佳答案楼层

不二如是 · 发表于 2019-2-10 09:12:15

1、发代码建议使用“添加代码文字”：

2、需要修改三个位置：

A. 第8行的注释错了，HTML的正确注释语法应该是<!—注释的内容 -->

B. 第75、79行的注释去掉，小蝴蝶的翅膀就回来了

C. 第88行的提醒框太烦人了，把它注释掉

月牙儿 · 发表于 2019-2-10 13:54:51

不二如是发表于 2019-2-10 09:12
1、发代码建议使用“添加代码文字”：

我跟答案修改一样可是小蝴蝶翅膀还是显示不全

账号		自动登录	找回密码
密码			立即注册