- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个网站,上面有不断扩大的圆圈和文字。该网站运行良好,直到我添加了 jquery fullpage.js 插件。现在,不断扩大的圆圈出现在文本之上并将其完全覆盖。我曾尝试为文本提供更高的 z-index
并尝试使用 absolute
和 relative
定位,但似乎没有任何效果。谁能帮我解决这个问题?
网站链接:https://rimildeyjsr.github.io/spotify-circle-animation/
HTML:
<div id="fullpage">
<div class="section active" id="section1">
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li ><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="main-heading">
<span id="main-heading"></span>
</div>
<span id="welcome-msg">Welcome to my website</span>
</div>
<div class="section">
</div>
</div>
CSS:
.initial-div {
width: 1000px;
height: 1000px;
transform: scale(0);
}
.position-div{
position: absolute;
border-radius: 50%;
display: none;
}
.animate {
-webkit-animation: expand 2500s;
}
@-webkit-keyframes expand {
0%{
-webkit-transform: scale(0,0);
}
100%{
-webkit-transform: scale(100.0,100.0);
display: none;
}
}
.main-heading{
text-align:left;
z-index: 20;
position: relative;
display: block;
height:228px;
width:644px;
font-family: Graphik, Roboto;
font-size: 10em;
font-weight: 600;
letter-spacing: 0.2px;
color: #ffffff;
top: 23%;
left: 8%;
}
#welcome-msg {
display: block;
z-index: 20;
position: relative;
text-align: left;
font-size: 4em;
font-family: Graphik,Roboto;
color: #ffffff;
height: 198px;
width: 1138px;
font-weight: 600;
top: 24%;
left: 8%;
}
J查询:
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
function makeDiv(color){
var divsize = 1000;
//$('body').css({'background-color':bgColor});
console.log(1);
$newdiv = $('<div/>').addClass('initial-div').css({
'background-color': color
});
var posx = (Math.random() * ($(document).width()) - (divsize / 2)).toFixed();
var posy = (Math.random() * ($(document).height()) - (divsize / 2)).toFixed();
$newdiv.addClass('position-div').css({
'left':posx+'px',
'top':posy+'px'
}).appendTo( 'body' ).addClass('animate').css({'display':'block'}).one(animationEnd,function(){
$(this).remove();
});
}
$(document).ready(function(){
$('#fullpage').fullpage({
anchors: ['home'],
fixedElements: '#toggle,#overlay'
});
$("#main-heading").delay(2000).css("visibility","visible").typed({
strings:["^1000Hello,","Bonjour,","Hola,","nuqneH,","Ola,","Hallo,","سلام"
,"Ciao,"],
typeSpeed: 300,
loop: true,
showCursor: true,
cursorChar: "|",
preStringTyped: function(){
$(".main-heading").css("visibility","visible");
},
onStringTyped: function(){
$('.button-launch').addClass("animated slideInDown").css("visibility","visible")
;
}
});
$('#toggle').click(function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
$('#overlay ul li a').click(function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
//var arrayLength = colorArray.length;
var colorArray = ['#11256c','#24ccdf'];
var i= 0,flag=0;
var color = colorArray[i];
setInterval(function(){
flag++;
makeDiv(color);
if (flag == 15){
color = colorArray[i];
i++;
if (i == 2) {
i = 0;
}
flag=0;
}
},2000);
});
github 存储库链接:https://github.com/rimildeyjsr/spotify-circle-animation
最佳答案
你好在你的文件中添加这个 css 以删除应用的 CSS 转换及其工作
#fullpage {
-webkit-transform: none !important;
transform: none !important;
}
在你的情况下试试这个
#fullpage {
z-index: 2;
关于javascript - fullpage.js - 扩展圆圈背景覆盖文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43993098/
我需要移动一个对象,在我的例子中是给定路径上的一个字符串。实际上路径可以是半圆。如附图所示,字符串应该出现在另一个物体的后面,沿着路径移动并消失在第二个物体(两个图像)后面。我不知道如何开始...希望
我需要构建一个圆形(在 css 中),它有 2 行文本,可以根据选择的翻译改变长度并始终居中。 到目前为止我有这个: h3 { background-color: #fcd141; borde
是否可以在 CSS3 中使用 -webkit-border-radius 绘制一个圆,同时将宽度和高度限制为特定变量(例如 height:100px 和 width:100px) 所以当在圆圈内添加文
我正在尝试在方形图像上叠加一个圆圈。文本需要在圆圈中水平和垂直居中。 我几乎用正方形 div 做对了,但是一旦我将图像放入组合中,圆圈就会移动到图像下方。 我的代码。 .Container { w
使用 CSS,我有一个将图标放置在圆圈/圆盘中的显示。 这是我的例子: 但我很难将图标放在圆圈/圆盘的中心。 我已经搜索过 SO(找到 this post 但更改行高只会扩展圆盘/圆圈)和 Googl
我正在尝试在一行中制作几个带有文本的 css 圆圈。当我使用 circle 类来 img 时,圆圈是内联的,但我无法添加任何文本。当我使用 circle class 到 div 时,我可以添加文本,但
我尝试在单击“提交”按钮时显示 ProgessBar。它会在数据加载完成时隐藏。但是,progressBar 没有覆盖整个屏幕。相反,它被按钮覆盖。请引用屏幕截图,它应该更容易理解我的意思。 我要实现
这个问题在这里已经有了答案: Circle with two borders (4 个答案) 关闭 7 年前。 我有一个只有一个边框的圆圈,但我想知道是否有办法实现一个有两个不同颜色边框的圆圈。我有
我正尝试按照以下示例在 CSS 中创建一个带有镶嵌边框的圆圈: 我有以下 HTML 和 CSS,但它没有产生我需要的效果: .inlay-circle { width: 15rem; heig
我找到的每个指南都有相同的线条和填充颜色。我想要的只是一个带有红线和白色填充的圆圈。 我试过: .circle { border: red; background-color: #FF
我正在寻找一种用纯色和图像填充 SVG 圆圈的方法。 我现在尝试的是使用这段代码: 它用我的背景图片绘制
我目前正在组建一个将托管用户的网站。每个用户都会有一个个人资料页面,该页面将显示 SVG 圆数组,每个用户在数据库的用户表中自己的行中也有一个相应的 SVG_number。 例如,如果 User1 在
我正在尝试在 SVG 中创建三组圆圈。我给他们打电话circleA circleB和circleC我打算给它们涂上不同的颜色。 var circleA = [ [50,48],[106,35]
使用 snapsvg.io,我想知道是否可以添加可点击的链接,例如 My Link标记到 SVG 文本、圆圈或线条。 我这里的一个例子是文本: var s = Snap("#svg"); var te
所以这是我的一个小项目,只是为了好玩。我尝试使用 libgdx 在 Java 中重新创建随机 Walker。 现在我认为我的代码非常成功,因为它工作正常(也许)。 但是有一个问题,圆比其他轴更倾向于向
我想在 CSS 中创建一个在右边和底部有线条的圆。类似下图。我找到了一个 css code水平连接圆圈。我不知道如何垂直添加线条或类似于我附加的图像?
以下圆形标签位于标签内: 现在我必须将生成的圆圈附加到标签内,例如 更新: function createCircle(a) { var circle = document.
我希望圆圈类似于饼图,具有相同的不同颜色切片。出于某种原因,我画了一个圆,在带有颜色的一侧有弧形,中间有一个白色八边形。 for(var i=0;i<8;i++){ ctx.beginPath
我有一个场景,我必须在样条图中创建标记/圆圈。我使用 highcharts 创建了样条图表,图表的代码如下。 我的输出应该如下所示。我已经在图像中标记了预期的圆圈: $(function ()
给定以下示例: 是否有可能检测到网络中的环路 (I1, I2,I3, C6, C7, I5)? 我试过:simple_cycles → 它适用于 3 个节点,但不能超过 3 个。 我需要检测包含所有节
我是一名优秀的程序员,十分优秀!