小编Bri*_*una的帖子

如何使用jquery在悬停时暂停css动画

当用户悬停元素时,我们如何在其状态下暂停CSS动画.

CSS

.container {
  height: 160px; width: 450px; background: gray; overflow: hidden;
}
.marquee {
  height: 140px; width: 400px; margin: 10px; background: red; position: relative; animation: marquee 10s linear infinite;
}

@keyframes marquee {
   0% {left: 100%;}
   100% {left: -100%;}
}

.marquee:hover {
  /* pause animation. this works but with compatibility issues 
     animation-play-state is still in W3C working draft
  */
  animation-play-state: paused; 
}

Run Code Online (Sandbox Code Playgroud)

HTML

<div class="container">
    <div class="marquee"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

JAVASCRIPT

$(document).raedy(function() {
   $(.marquee).hover { //mouseenter() & mouseleave()
      // puase animation …

Run Code Online (Sandbox Code Playgroud)

html css jquery

Bri*_*una

2016 06-21

4
推荐指数

1
解决办法

514
查看次数

为什么CSS Radial Gradient与<!DOCTYPE html> html5不兼容

我正在尝试添加css径向渐变作为我的网页的背景,当我添加html5 doctype时<!DOCTYPE html>,径向背景变为(横向)条纹.我的css径向渐变代码有错误,为什么它与HTML5不兼容

输出:

使用html5 doctype <!DOCTYPE html>

没有html5 doctype

我的代码(没有html5 doctype):

HTML

<!-- <!DOCTYPE html> --> 
<!-- header -->
<body>

<div class="content"></div>

</body>

Run Code Online (Sandbox Code Playgroud)

CSS

    body {
    background: rgba(32,61,227,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(32,61,227,1)), color-stop(100%, rgba(10,38,69,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
    background: radial-gradient(ellipse at center, rgba(32,61,227,1) …

Run Code Online (Sandbox Code Playgroud)

html css html5

Bri*_*una

2015 07-31

2
推荐指数

1
解决办法

958
查看次数

如何删除导航中列表项之间的空格(HTML/CSS)

我在导航中删除li项目之间的空间时遇到了问题,我已经为项目和锚点(链接)设置了边距:0px,但空间/间隙仍然存在.

我该如何删除这些空格？

在此输入图像描述

/* navigation styles */

nav {
  background: rgba(6, 19, 72, 1);
  background: linear-gradient(to bottom, rgba(6, 19, 72, 1) 0%, rgba(15, 31, 91, 1) 100%);
}
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.nav li {
  display: inline;
  margin: 0px;
}
nav ul.nav {
  width: 1120px;
  margin: 0 auto;
  min-width: 120px;
}
span.homeicon {
  width: 35px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  background-image: url('http://s16.postimg.org/cq68hbikx/home_icon.png');
  background-size: cover;
}
.nav a {
  display: inline-block;
  padding: …

Run Code Online (Sandbox Code Playgroud)

html css

Bri*_*una

2015 06-20

0
推荐指数

1
解决办法

1551
查看次数