好看到爆炸的footer

特别声明:这是别人写的,因为是好久之前的东西了,忘记原作者的文章地址了,此博客只是想记录一下,方便我日后CV,因为忘记原作者的博客地址,所有不能给你挂上了,不好意思,但是你的成果我会永远牢记,(就像:有的人已经死了但他活着),谢谢你placelove

html部分:

<div class='footer'>
      <span class="scroll"></span>
      <!-- <span id="star-five" class="scroll"></span> -->
      <el-divider></el-divider>
      <span>法律声明</span>
      <el-divider direction="vertical"></el-divider>
      <span>友情链接</span>
      <el-divider direction="vertical"></el-divider>
      <span @click="drawer = true">联系我</span>
      <br/>
      <br/>
      <span class="copyright">版权所有 JEmbrace</span>
      <el-drawer
        title="联系我"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
        <p class='info'>
          <i class="el-icon-phone"></i>电话:18822299999<br/>
          <i class="el-icon-message"></i>邮箱:18822299999@163.com<br/>
        </p>
      </el-drawer>
  </div>

css部分:

  .footer{
        height: 150px;
        text-align: center;
        font-size: 16px;
        padding: 0px 100px;
        position: relative;
    }
    .footer{
      cursor: pointer;
    }
    .copyright{
      font-size: 12px;
    }
    .info{
      font-size: 14px;
      color: #72767b;
      line-height: 25px;
    }
    .footer .scroll{
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 5px;
      border:2px solid #eaeaea;
      /* background-color: rgba(216, 16, 109,0.6); */
      position: absolute;
      left: 5%;
      top: -25px;
      z-index: 10;
      animation: scrollA infinite 20s linear alternate;
    }
    @keyframes scrollA {
      0% {left: 5%;transform: rotate(180deg);};
      10% {left: 5%;transform: rotate(270deg);}
      20% {left: 5%;transform: rotate(450deg);}
      25% {left: 10%;transform: rotate(540deg);}
      30% {left: 20%;transform: rotate(720deg);}
      35% {left: 30%;transform: rotate(900deg);}
      40% {left: 40%;transform: rotate(1080deg);}
      45% {left: 50%;transform: rotate(1260deg);}
      50% {left: 60%;transform: rotate(1440deg);}
      55% {left: 70%;transform: rotate(1620deg);}
      60% {left: 80%;transform: rotate(1800deg);}
      80% {left: 90%;transform: rotate(2610deg);}
      90% {left: 90%;transform: rotate(2340deg);}
      100% {left: 90%;transform: rotate(2520deg);}
    }

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
根据引用和引用的内容,你可以使用flex布局来实现让footer居于网站底部的效果。你需要将父容器的display属性设置为flex,flex-direction属性设置为column,以及设置min-height属性为100%。然后将子容器的flex属性设置为1,这样子容器会占据剩余的所有空间,将footer的flex属性设置为0,使其固定在底部。这样就可以实现footer始终在页面底部的效果。 根据引用的内容,你还可以将footer作为一个组件进行封装,并在父组件中使用。在父组件中,你可以使用具名插槽来传递数据给footer组件,并在footer组件内部使用作用域插槽来接收并展示这些数据。这样可以更加灵活地控制footer的内容和样式。 总之,无论是使用flex布局还是进行组件封装,你都可以实现一个自适应的footer,并让它居于网站底部。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue设置footer保持在底部​](https://blog.csdn.net/HHCS231/article/details/124080434)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue3学习笔记](https://blog.csdn.net/qq_44523450/article/details/124102498)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值