小编wei*_*nde的帖子

正如标题所描述的，我正在尝试为虚线箭头设置动画。我希望它在这个网站上看起来尽可能接近这个。

我能够制作一个箭头，尽管我不确定这是制作这种箭头的正确方法。我假设我必须用SVG绘制它......

动画看起来也很奇怪，我不知道如何让它更流畅......

我很感激一些帮助家伙:)

这是我制作的 JsFiddle

这是代码：

body {
  margin: 0;
  font-size: 16px;
  line-height: 1.528571429;
  padding: 0;
  height: 100%;
}
body #contact {
  height: calc(100vh - 40px);
  background-color: #ffffff;
}
body #contact .to-top-btn-wrapper {
  position: absolute;
  z-index: 999;
  left: 7%;
  bottom: 15%;
}
body #contact .to-top-btn-wrapper .btn-text-wrapper {
  margin: -35px auto;
}
body #contact .to-top-btn-wrapper .btn-text-wrapper .btn-text {
  font-size: 14px;
  letter-spacing: 0.25em;
  text-align: center;
  color: #676565;
  text-transform: uppercase;
}
body #contact .to-top-btn-wrapper .to-top-btn {
  position: absolute; …

我正在尝试创建一个具有固定页眉和页脚的模态对话框,并且模态对话框内的内容(在本例中为用户列表)是可滚动的...

到目前为止,我最好的尝试给了我图像的结果:

我认为在看到图像后我不必描述问题是什么......我还假设你会知道解决方案看起来像什么...... :)

但只是为了确保我还要写它...模态对话框需要有一个固定的标题(标题为"编辑板","板名"和"板类型"所在的区域)和页脚(区域所在的区域) "保存"按钮位于)必须固定/不可拆卸...唯一必须滚动的是用户列表......

码:

HTML:

<div id="addBoardModal" class="modal modal-fixed-footer">
    <form class="Boards_new" autocomplete="off">
      <div class="modal-header">
        <h5>{{title}}</h5>
        <div class="input-field">
           <!--INPUT FORM-->
        <div class="BoadType">
           <!--RADIAL BUTTON THING--> 
      <div class="modal-content">
            <div class="shareMembers" style="margin-top:18px;">
                <div class="row">
                    <h5 class="left">Share</h5>
                      <!--LIST OF USERS !!!THIS HAS TO BE SCROLLABLE!!!-->
                </div>
            </div>
      <div class="modal-footer">
        <!--JSUT THIS SAVE BUTTON-->
      </div>

CSS:

.modal {
  @extend .z-depth-4;
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fafafa;
  padding: 0;
  max-height: 70%;
  width: 55%;
  margin: auto;
  //overflow-y: auto;
  border-radius: 2px; …