小编Fri*_*ass的帖子

全屏图像上的 CSS 幻灯片动画

我的登录页面上有两个图像，它们使用默认的淡入淡出动画来回切换。我的第一个问题是我想使用滑动动画，但我没有找到任何更改它的选项。我的第二个问题是淡入淡出动画仅适用于 chrome。有没有办法在其他浏览器中解决这个问题？

我的代码：

/* basicStyle.css */
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.lead {
  font-size: 1.5rem;
}

.navbar {
  position: fixed;
  top: 0;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 60px;
  background: rgba(0, 0, 0, 0.7);
}

.navbar ul {
  display: flex;
  list-style: none;
  width: 100%;
  justify-content: center;
}

.navbar ul li {
  margin: 0 1rem;
  padding: 1rem;
}

.navbar ul li a {
  text-decoration: none;
  text-transform: uppercase; …

Run Code Online (Sandbox Code Playgroud)

html css background css-animations

Fri*_*ass

2020 09-24

8
推荐指数

1
解决办法

260
查看次数

Neovim 转到定义

如果我在 neovim 中的函数上使用gd或gD命令，它只会跳转到我的导入，而不是我的实际函数定义。我正在为 javascript 使用tsserver LSP。另外，Treesitter for javascript 也已安装。

import { mainObject, analyzeButton, saveButton, generateScriptButton } from './js_modules/utils.js'
import { renderSvgFile } from './js_modules/fileRenderer.js'
import { collectSvgElements, collectDiagramElements } from './js_modules/collectERElements.js'
import { createGraph } from './js_modules/createGraph.js'
import { generateScript } from './js_modules/generateScript.js'

renderSvgFile()

analyzeButton.addEventListener('click', function(){
    mainObject.object = document.getElementById('object').contentDocument
    mainObject.svg = mainObject.object.getElementsByTagName('svg')[0]
    mainObject.nodesArray = mainObject.svg.childNodes
    collectSvgElements(mainObject.nodesArray)
    collectDiagramElements()
    createGraph()
})

generateScriptButton.addEventListener('click', generateScript)

Run Code Online (Sandbox Code Playgroud)

neovim

Fri*_*ass

lucky-day

5
推荐指数

1
解决办法

8733
查看次数

当客户端按下登录按钮时，我想在页面中间创建一个小的登录弹出卡。我设法创建了卡片本身，让它.absolute z-10位于其他内容的顶部。我还将它包裹在一个容器 div 中，.relative以便能够定位卡片。我的问题是我不能把它放在中间。例如.right-0，如果我添加它可以工作，但我想将它放在中间，而我在文档中找不到任何关于它的内容......另外，我如何为我的卡添加更多的高度，即 64？

我的代码：

索引.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jófogás</title>
    <link
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <!-- header section -->
    <header class="bg-white flex">
      <div class="w-3/6">
        <img
          class="h-12 m-4"
          src="./logo_img/jofogas_logo_original.jpg"
          alt="jofogas_logo_original"
        />
      </div>
      <div class="mx-6 my-6 w-3/6 text-right">
        <button class="bg-orange-500 rounded py-2 px-4 text-white">
          Belépés
        </button>
      </div>
    </header>
    <!-- login card -->
    <div class="relative">
      <div class="absolute z-10 items-center right-0">
        <div
          id="login-card"
          class="w-56 …

Run Code Online (Sandbox Code Playgroud)

css-position absolute centering tailwind-css

Fri*_*ass

lucky-day

3
推荐指数

2
解决办法

3585
查看次数