小编Man*_*mar的帖子

SVG CSS 多个动画

我创建了一个藏宝图动画,首先,它会以浅灰色显示路径,但随着动画开始,我希望浅灰色的破折号在填充动画“.road”开始时消失或变成黑色。我是当填充动画越过那个位置时,努力让浅灰色破折号“.steps”消失。

svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.road {
  stroke-dasharray: 744;
  stroke-dashoffset: -744;
  animation: draw-road 10s infinite;
}

.steps {
  stroke-dasharray: -744;
  stroke-dashoffset: 744;
  animation: draw-steps 10s reverse;
}

@keyframes draw-road {
  0% {
    stroke-dashoffset: 744;
    stroke: #000000;
  }
  100% {
    stroke-dashoffset: 0;
    stroke: #000000;
  }
}

@keyframes draw-steps {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
Run Code Online (Sandbox Code Playgroud)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
      <style>
        .st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
      </style>
      <g …
Run Code Online (Sandbox Code Playgroud)

css svg

9
推荐指数
1
解决办法
246
查看次数

如何从ionicPopup中删除标题区域

我想完全从离子弹出中删除标题区域.我删除了标题标签并尝试了.但仍然可以看到标题空间可见.这是我的代码.

 var registerPopup = $ionicPopup.show({

        templateUrl: 'templates/register_popup.html',

        scope: $scope

    });
Run Code Online (Sandbox Code Playgroud)

即使我完全删除了标题标签,标题区仍然可见,并带有空白区域,如下图所示.我想从ionicPopup中删除整个标题空间.我怎么才能得到它?代码中会有哪些变化?

在此输入图像描述

css ionic-framework ionic ionic-popup

8
推荐指数
1
解决办法
4628
查看次数

Javascript选择器中的live和not live collection之间有什么区别?

我怎么知道live和not live collection之间的区别.

根据我的研究:

一个活的是:当DOM的变化反映了收藏.修改节点时,内容会受到影响.

A Not Live是:当DOM中的任何更改不影响集合的内容时.

document.getElementsByClassName()是一个HTMLCollection,并且是实时的.

document.getElementsByTagName()是一个HTMLCollection,并且是实时的.

document.getElementsByName()是一个NodeList并且是实时的.

document.querySelectorAll()是一个NodeList,不是实时的.

为什么document.querySelectorAll不活?

我知道 :

HTMLCollection仅包含元素节点 NodeList包含元素节点和文本节点.

javascript

8
推荐指数
1
解决办法
1835
查看次数

重写AngularJs DatePicker弹出窗口以添加新标题

问题就是这一切.

我追求高低,并没有看到一种方法,但是,在我破解模板之前,我以为我会问这里.

只是为了说清楚 - 我希望能够在日期选择器的顶部添加一些文本(这是一个弹出窗口,如果这有任何区别),例如"你的生日是什么时候?".

angularjs angular-ui-bootstrap

8
推荐指数
1
解决办法
4070
查看次数

在悬停时向上移动HTML元素

每当用户将鼠标悬停在它上面时,我试图将HTML移动大约10px.我对w3schools进行了一些研究,但我找不到任何帮助我的信息.他们的大多数动画示例都使用关键帧,我很确定这不是我需要的,因为当有人在元素上盘旋时我正试图触发动画.我可能错了,这就是我在这里发帖的原因.

这是我想要移动的元素:

<div id="arrow">
  <a href="#"><i class="fa fa-arrow-down fa-2x"></i></a>
</div>
Run Code Online (Sandbox Code Playgroud)

对于我的CSS:

#arrow {
  padding-top: 310px;
  color: #5C6B7E;
  position: relative;
  /* some kind of animation property here? */
}

#arrow:hover {
  /* new properties once user hovers */
}
Run Code Online (Sandbox Code Playgroud)

我不确定我需要添加什么来使元素生动起来,w3schools上的例子没有多大帮助.如果有人能指出我正确的方向,我将非常感激.谢谢Stack Overflow.

html css css-animations

8
推荐指数
3
解决办法
2万
查看次数

Flexbox不会包装浏览器调整大小

我试图让我的flexbox在移动设备和窗口大小上调整大小.

对于我的生活,我不知道它为什么不起作用.当浏览器缩小时,flexbox应调整大小并环绕下一行.

演示

这里

CSS/HTML

#flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  width: 1000px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

#left-zone {
  background: #fff;
  height: 75%;
  flex-grow: 0;
  display: flex;
  width: 350px;
  align-items: center;
  justify-content: left;
  min-width: 0;
}

#left-zone .list {
  display: flex;
  list-style: none;
  align-content: stretch;
  flex-direction: column; …
Run Code Online (Sandbox Code Playgroud)

html css html5 css3 flexbox

8
推荐指数
1
解决办法
2218
查看次数

Next.JS 应用程序(带有 Chakra UI)在移动设备上不是全宽

这让我很头疼。也许我只是错过了一些愚蠢的事情,希望你们能提供帮助。

整个 html 元素的宽度约为移动设备屏幕的 80%。

在笔记本电脑上,减小屏幕尺寸并不能重现该问题。html 将按预期为全尺寸。

这是该应用程序的链接,您可以自己查看:https ://kaayo.vercel.app/

我尝试使用 android devtools 进行调试,结果如下:

这

最后,这是我的 chakraTheme.js:

global: {
      "html, body": {
        color: "gray.600",
        margin: "0",
        padding: "0",
        lineHeight: "tall",
        fontWeight: "400",
        backgroundColor: "bg.100",
      },
      body: { minHeight: "100vh" },
      "input:focus": {
        borderColor: "primary.200!important",
      },
      "a:hover": {
        textDecoration: "none",
      },
      ':focus:not(:focus-visible):not([role="dialog"]):not([role="menu"])': {
        boxShadow: "none !important",
      },
    },
Run Code Online (Sandbox Code Playgroud)

如果您还需要什么,请告诉我。

感谢您的帮助!

css width media-queries next.js chakra-ui

8
推荐指数
1
解决办法
3633
查看次数

Bootstrap按钮超链接

我不想使用<a>元素将按钮转换为超链接.

我有以下按钮:

<button class="btn btn-success"> First button</button>
<button class="btn btn-success"> Second button</button>
Run Code Online (Sandbox Code Playgroud)

如何指定超链接(不使用<a>)并在单击按钮时浏览到页面

javascript css twitter-bootstrap

7
推荐指数
1
解决办法
6601
查看次数

仅将边框间距应用于表格主体行

我有一个包含 2 个标题行和多个正文行的表格。我希望正文中的行间距为 10 像素。我通过以下方式实现这一点:

border-collapse: separate;
border-spacing: 10px;
Run Code Online (Sandbox Code Playgroud)

但是,这显然也适用于标题中的行。但对于标题,我希望行之间没有空格。我的 HTML 是:

border-collapse: separate;
border-spacing: 10px;
Run Code Online (Sandbox Code Playgroud)
table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}
table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}
table {
  border-collapse: separate;
  border-spacing: 10px;
}
Run Code Online (Sandbox Code Playgroud)

小提琴在这里。我希望第一个标题行的底部和第二个标题行的顶部之间没有空格。我尝试过border-spacing仅应用于身体,但它仅适用于桌面级别。有任何想法吗?

html css

7
推荐指数
1
解决办法
1万
查看次数

Angular UI Bootstrap的向后兼容性0.14.0

PR#4514是否进入了0.14.0标签?我最近重新建立了一个项目,现在0.14.0并没有与0.13.x向后兼容.

DropdownController is now deprecated. Use UibDropdownController instead.
vendor.min.js:15dropdown-toggle is now deprecated. Use uib-dropdown-toggle instead.
vendor.min.js:15dropdown-menu is now deprecated. Use uib-dropdown-menu instead.
vendor.min.js:15dropdown is now deprecated. Use uib-dropdown instead.
Run Code Online (Sandbox Code Playgroud)

angular-ui-bootstrap

7
推荐指数
1
解决办法
2203
查看次数