小编Ste*_*ide的帖子

在新的"页面加载"中Firefox中的Choppy和Jerky CSS3动画

当我导航到我的一个子页面时,我试图将CSS3动画显示为加载器动画.我在rotateY上使用关键帧动画.问题是在Firefox上,当导航到另一个页面时,动画确实有效,但它非常生涩和波涛汹涌.

在Chrome和Safari上,同样的动画可以顺利完美地运行.

这是一个小提琴:http: //jsfiddle.net/p6mgxpbo/

HTML:

<div class="gb-loading">
    <div id="animatedElem" class="pin-c">
        <div class='pin'></div>    
    </div>
    <div class="pin-mirror"></div>
    <div id="gb-lb" class="load-bounce"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.gb-loading {
        position: fixed;
        left: 0;
        right: 0;
        top: 50%;
        bottom: 0;
        width: 70px;
        height: 70px;
        margin: auto;
        z-index: 101;
        margin-top: -100px;
    }
    .pin-c {
        width: 70px;
        height: 70px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;

        -webkit-animation: pulsate 1.5s linear infinite;
           -moz-animation: pulsate 1.5s linear infinite;
             -o-animation: pulsate 1.5s linear infinite;
                animation: pulsate 1.5s linear infinite;
    } …
Run Code Online (Sandbox Code Playgroud)

css firefox css3 keyframe css-animations

4
推荐指数
1
解决办法
4329
查看次数

屏幕阅读器是否曾经访问过 SVG 的内容?

我正在处理的代码需要通过 Tenon.io 的测试,它标记了 SVG 中发生的问题,特别是测试 ID 75(这个“id”被多次使用)。这是失败的,因为 SVG 对类似元素具有相同的 id,因为它们是由同一个程序(我相信是 Illustrator)生成的,并且页面上出现了多个。我认为 SVG 中的任何内容都是无关紧要的,不应被屏幕阅读器或 Tenon.io 的爬虫标记甚至遍历。

我已经测试了 VoiceOver 中出现此问题的页面,但它被忽略了。其他屏幕阅读器也会这样做吗?是否有任何屏幕阅读器遍历 SVG DOM 的风险?

svg accessibility screen-readers

4
推荐指数
1
解决办法
1616
查看次数

如何将自定义项添加到特定的WordPress菜单项位置

我有一个注册和显示的主菜单,包括4个链接(家庭,关于,新闻,博客).我想在第二和第三个菜单之间添加html(一个徽标),我想知道这是否可行.

这是一个图表:HOME | 关于| 标志| 新闻| 博客

我正在查看钩子wp_nav_menu_items,但我只能在第一个位置或最后一个位置添加自定义项目.

在我使用jQuery添加html之前,但由于DOM必须完全加载,因此徽标最后加载,我试图让徽标首先显示或同时显示页面内容.

php wordpress menu

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

使用Exception类或FileNotFoundException类捕获异常之间的区别

就像我有这两个场景我们必须处理FileNotFoundException

情况1:

    try {
        FileInputStream fis = new FileInputStream("test1.txt");
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } 
Run Code Online (Sandbox Code Playgroud)

案例2:

    try {
        FileInputStream fis = new FileInputStream("test1.txt");
    } catch (Exception e) {
        e.printStackTrace();
    }
Run Code Online (Sandbox Code Playgroud)

在两种情况下,打印的Stack Trace都是相同的.我想知道两种实现之间的区别以及应该首选的内容?

java exception

3
推荐指数
1
解决办法
274
查看次数

css的箱子阴影引起了箭头

我正在使用以下代码在css中创建向上箭头:

border-bottom: 10px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent
Run Code Online (Sandbox Code Playgroud)

我也想box-shadow只应用箭头而不是它周围的矩形框(FIDDLE).这样可能吗?

注意: -我不想使用任何图像,它应该与CSS.

html css css3 css-shapes

2
推荐指数
1
解决办法
1752
查看次数

按钮是不可点击的?

这是我的代码:http://codepen.io/Chiz/pen/MaBwBb

单击按钮时,通常按钮会给出"按下"的视觉反馈,但在这种情况下,不会发生这种情况.这就像按钮已被禁用.为什么是这样?

$(document).ready(function() {
  $("#fullpage").fullpage({
    verticalCentered: false,
    resize: true,
    scrollingSpeed: 700,
    css3: true,
    easing: "easeOutBounce"
  });
});
Run Code Online (Sandbox Code Playgroud)
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
div.container {
  position: relative;
}
#fullpage {
  width: 100%;
  height: 100%;
  background-color: #ffe4b3;
}
#header {
  width: 100%;
  height: 70px;
  line-height: 70px;
  background-color: #343434;
}
#header ul {
  list-style-type: none;
  color: white;
  margin: 0;
  height: 100%;
}
#header ul li {
  display: inline-block;
  float: right;
  padding: 0rem 2rem;
  width: 10rem; …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery css3

2
推荐指数
1
解决办法
181
查看次数

如何在未加载字体时呈现字体权重?

我通常是从谷歌通过下载的字体@import url(https://fonts.googleapis.com/css?family=Roboto),然后用它们来调整各种元素(h1,h2,...)

h1 {
    font-weight: 500;
}
h2 {
    font-weight: bold;
}
Run Code Online (Sandbox Code Playgroud)

在以下情况下如何计算字体渲染:

  • 500没有加载正确的重量(在上面的情况下)@import url(https://fonts.googleapis.com/css?family=Roboto:500)?它是从字体的基本版本推断出来的(结果更好或更差)?或计算,在这种情况下,预加载500只是帮助(性能明智),但不影响字体的视觉方面?
  • bold用来?是bold特定数字权重的快捷方式吗?或者字体是否定义了它自己的bold含义(我猜是具体的数字权重?)

html css html5 fonts css3

2
推荐指数
1
解决办法
363
查看次数

在html中清除链接的css属性

我从网站上买了一个html + css模板,我遇到链接问题.

我试图添加一个链接,默认情况下链接获取了很多css属性.如何清除该特定链接的css属性?这是下面的代码......

<div class="popup-gallery">
    <span href="img/portfolio/01.jpg" class="image-item">
          <img src="img/portfolio/01.jpg" alt="">
          <div class="item-overlay">
            <h4>Test asd asd</h4>
            <div>zxc zxc zxc zxc zxc zxc zxc zxc zxc zxc zxc</div>
            <div><br /></div>
            <div><a href="/fiyat_listeleri/fiyat.pdf">Fiyat Listesi*******</a></div>
          </div>
        </span> 
</div>
Run Code Online (Sandbox Code Playgroud)

与PDf的链接,我希望它在点击时下载,但它会以弹出模式打开它.我用过target="_blank"但是没用.

如何使其可下载?

html javascript css jquery css3

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

半六边形悬停效果

这里有一个小例子:

HTML:

<section>
  <div class="hexagon">
    <div class="hex1">
      <div class="hex2" style="background: url('http://25.media.tumblr.com/tumblr_mb3lh6abw91rg4gq5o1_500.jpg') center no-repeat">
        <div class="desc">
          <h2>Normale Seite</h2>
        </div>
      </div>
      <!--/hex2-->
    </div>
    <!--/hex1-->
  </div>
  <!--/hexagon-->
</section>
Run Code Online (Sandbox Code Playgroud)

CSS:(SCSS)

@import "compass/css3";

/* Variables */
$width: 300px;
$pink: rgba(230,0,98,.75);
$green: rgba(169,160,50,.75);
$yellow: rgba(252,171,55,.75);
$brown: rgba(83,70,54,.75);

body {
  background: #fff;
}

section {
  margin: 0 auto;
  text-align: center;
  width: 960px;
}

.hexagon {
  @include rotate(120deg);
  cursor: pointer;
  height: ($width *2);
  overflow: hidden;
  visibility: hidden;
  width: $width;
}

.hex1 {
  @include rotate(120deg);
  height: 100%;
  overflow: hidden; …
Run Code Online (Sandbox Code Playgroud)

css jquery svg css3 css-shapes

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

Nextjs13 Graphql apollo 配置

我正在尝试使用 nextjs13 设置 graphql 前端应用程序,但使用新的文件夹结构,因为没有 _app.tsx 我想知道如何设置

在我们像这样包装整个应用程序之前

 <ApolloProvider client={client}>
    <Component {...pageProps} />
  </ApolloProvider>
Run Code Online (Sandbox Code Playgroud)

现在如何设置呢?

apollo next.js next.js13

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

Css有界三角形

我正在开发一个需要特定元素的项目.这是一个如下图所示的边界三角形.甚至可以在HTML/CSS中创建此对象.

在此输入图像描述

简单三角形只有直边框

.tri {
  display: inline-block;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid blue;
}
Run Code Online (Sandbox Code Playgroud)
<div class="tri"></div>
Run Code Online (Sandbox Code Playgroud)

html css html5 css3 css-shapes

-1
推荐指数
1
解决办法
100
查看次数

圆形半边框CSS

我正在尝试使用CSS创建一个圆圈,它看起来与下图完全相同:

想要输出

如何用CSS制作这个?

html css css3 css-shapes

-3
推荐指数
1
解决办法
1868
查看次数