HTML，CSS和Javascript非常酷的边框旋转发光效果

-2

所以我来了以下模板，但由于事实上他们有base64加密他们的上帝的JavaScript /页面元素只知道它看到源代码非常困难的原因。HTML，CSS和Javascript非常酷的边框旋转发光效果

http://yootheme.com/demo/themes/joomla/2010/planet/index.php?option=com_content&view=article&id=44&Itemid=53&preset=default

但该网页上与类“头-BG”的标题栏似乎有背景位置不断变化最有可能通过使用JavaScript和我喜欢的颜色的设计和效果所以我很好奇，如果有人可以帮助我或向我演示他们如何做到这一点。

我喜欢这种边框效果不断旋转的方式。（不知道是否有人发现美丽）

来源

2014-10-01 C0nw0nk

问题是什么？ – Pointy 2014-10-01 18:05:58

如何在边框周围制作旋转/发光效果，就像他们在该网站上所做的那样。由于它总是在改变颜色。 – C0nw0nk 2014-10-01 18:06:55

这是一个包含颜色渐变的图像，它们只是通过JavaScript为背景位置设置动画。 – Pointy 2014-10-01 18:08:22

他们使用背景图像，他们动画background-position使用JS。

这里我使用CSS动画来代替：

@keyframes bg { 
 
    from { 
 
    background-position: 0 0; 
 
    } 
 
    to { 
 
    background-position: 1500px 0; 
 
    } 
 
} 
 
.header-bg { 
 
    border-radius: 15px; /* outerRadius */ 
 
    padding: 3px;  /* separation */ 
 
    animation: bg 10s infinite linear; 
 
    background: url("data:image/jpeg;base64,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") repeat scroll 0px 0px transparent; 
 
} 
 
.header-inner { 
 
    background: #fff; 
 
    border-radius: 12px; /* outerRadius - separation */ 
 
    padding: 5px; 
 
}

<div class="header-bg"> 
 
    <div class="header-inner">Foo bar</div> 
 
</div>

还要注意梯度可以用来代替该图像。

来源

2014-10-01 18:22:02 Oriol

感谢这就是它：D它会更好的渐变，因为它可以节省加载图像。 – C0nw0nk 2014-10-01 18:25:46

@Oriol这个动画在我的Chrome中似乎不起作用，但它在Firefox中起作用。不知道为什么。 – 2014-10-01 18:31:31

@WoodrowBarlow Chrome仍需要'-webkit-'供应商前缀。在'-webkit-animation'和'@ -webkit-keyframes'中。查看主要浏览器实现的[示例]（https://developer.mozilla.org/en-US/docs/Web/CSS/animation#Cylon_Eye）。 – Oriol 2014-10-01 18:33:26

HTML，CSS和Javascript非常酷的边框旋转发光效果

回答

相关问题