将元素id更改为div标签中的元素类后，关键帧不再起作用

Hi Friends

I have a problem, In order to show multiple rows returned from logged in user, I had to convert my div id tags to div classes (both in my html and corresponding CSS). As a result, my key-frames within my CSS have stopped working.

My original html code:

 //while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array 
       while($res = mysqli_fetch_array($result)) {     
        ?>
            <div id='loader-wrapper'>
                <div id='loader'><div id='loader1'> 
                  </div> 
                  </div>
            <p><a  onclick='redirectFunction("<?php echo $res['moduleID']; ?>");'><?php echo $res['moduleID']; ?></a></p>
            </div>
        <?php
        }
        ?>

My original CSS including keyframes:

 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");
    @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
    *, *:before, *:after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100vh;
    }

    body {
      color: #333;
      background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/39132/bg-stars.gif) repeat 0 0;
      overflow-x: hidden;
      height: 100%;
        font-family: sans-serif;
      font-weight: 100;
    }


    .wrapper {
      display: flex;
      min-height: 100%;
    }

    .sidebar {
      position: absolute;
      width: 220px;
    }

    .content {
      flex: 1;
      padding: 30px;
      background:  black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/39132/bg-stars.gif) repeat 0 0;
      box-shadow: 0 0 5px black;
      transform: translate3d(0, 0, 0);
      transition: transform .3s;
    }

    .content.isOpen {
      transform: translate3d(220px, 0, 0);
    }

    .button {
      cursor: pointer;
    }

    .button:before {
      content: '\f0c9';
      font: 42px fontawesome;
    }

    /* Demo Navigation */
    .title {
      font-size: 16px;
      line-height: 50px;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 7px;
      color: #eee;
      border-bottom: 1px solid #222;
      background: #2a2a2a;
    }

    .nav li a {
      position: relative;
      display: block;
      padding: 20px 0 20px 50px;
      font-size: 12px;
      color: #eee;
      border-bottom: 1px solid #222;
    }

    .nav li a:before {
      font: 14px fontawesome;
      position: absolute;
      top: 19px;
      left: 20px;
    }

    .nav li:nth-child(1) a:before {
      content: '\f00a';
    }

    .nav li:nth-child(2) a:before {
      content: '\f012';
    }

    .nav li:nth-child(3) a:before {
      content: '\f0e8';
    }

    .nav li:nth-child(4) a:before {
      content: '\f0c3';
    }

    .nav li:nth-child(5) a:before {
      content: '\f022';
    }

    .nav li:nth-child(6) a:before {
      content: '\f115';
    }

    .nav li:nth-child(7) a:before {
      content: '\f085';
    }

    .nav li:nth-child(8) a:before {
      content: '\f023';
      left: 23px;
    }

    .nav li a:hover {
      background: #444;
    }

    .nav li a.active {
      box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
      background: #444;
    }






    /* Added background Gif, stars are glowing */


    .container{
      display: flex;
       flex-direction: row;
    }
    .container div:first-child(1){
      background-color:#ccffcc;
      flex: 1;
      height:100px;
      width:100px;


    }
    .first {
      -webkit-flex: 2;
              flex: 2:

    }
    .second {
      -webkit-flex: 2;
              flex: 2;

    }
    .third {
      -webkit-flex: 3;
              flex: 3;
    }
    #lnav{
      display:none;
    }
    #rnav{
      display:none;
    }

    .nav ul li a{
    text-decoration: none; 
      color:#b3e0ff;
      text-shadow: 0 0 15px #2187e7;
      border: 1px solid #b3e0ff;
       padding:10px;
      margin:10px;
       box-shadow: 0 0 5px #2187e7;

    }



    p{
      z-index: 999;
      margin-left:66px;
      font-size:46px;
      margin-top:-26px;
      color:#fff;/*4db8ff*/
      padding:0px;
      position:relative;
    -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
      -moz-animation: neon2 1.5s ease-in-out infinite alternate;
      animation: neon2 1.5s ease-in-out infinite alternate;
    text-shadow: 0 0 15px #b3e0ff;

    }

    p2{
      z-index: 999;
      margin-left:200px;
      font-size:42px;
      margin-top:-26px;
      color:#fff;/*4db8ff*/
      padding:0px;
      position:relative;
    -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
      -moz-animation: neon2 1.5s ease-in-out infinite alternate;
      animation: neon2 1.5s ease-in-out infinite alternate;
    text-shadow: 0 0 15px #b3e0ff;

    }

    p3{
      z-index: 999;
      margin-left:260px;
      font-size:42px;
      margin-top:-26px;
      color:#fff;/*4db8ff*/
      padding:0px;
      position:relative;
    -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
      -moz-animation: neon2 1.5s ease-in-out infinite alternate;
      animation: neon2 1.5s ease-in-out infinite alternate;
    text-shadow: 0 0 15px #b3e0ff;

    }


    #loader-wrapper{
        position: fixed;
        top: 200px;
        left:18%;
        width: 300px;
        height: 300px;
       margin-left:30px;
        float: left;
    }

     /* I have added more loader-wrapper's to add extra module nodes
    Loader wraooers are floating right instead of left & margin has been changed*/   
    #loader-wrapper1{
        position: fixed;
        top: 200px;
        left:18%;
        width: 300px;
        height: 300px;
       margin-left:30px;
        float: right;
      margin-left: 360px;

    }

    #loader-wrapper2{
        position: fixed;
        top: 200px;
        left:18%;
        width: 300px;
        height: 300px;
       margin-left:30px;
        float: right;
      margin-left: 700px;

    }


    #loader {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 100%;
        height: 100%;
        margin: -175px 0 0 -175px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #4db8ff;
      border-bottom-color: #b3e0ff;
      border-right-color: #66c2ff;
      border-left-color: #80ccff;
      box-shadow: 0 0 15px #2187e7;

        -webkit-animation: spin 30s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 30s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader1:before {
        content: "";
        position: absolute;
        top: 70px;
        left: 70px;
        right: 70px;
        bottom: 70px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-color: #4398ba;

        border-style:dotted;

        -webkit-animation: spin 18s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 18s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader1:after {
        content: "";
        position: absolute;
        top: 55px;
        left: 55px;
        right: 55px;
        bottom: 55px;
        border-radius: 50%;
        border-color: #59c1eb;
       border-width:5px;    
        border-style:double dashed solid dotted ;
      box-shadow: 0 0 40px #2187e7;
        -webkit-animation: spin 60s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 60s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }


    #loader:before {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-color: #1d5ca9;

        border-style:dotted;

        -webkit-animation: spin 18s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 18s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 25px;
        left: 25px;
        right: 25px;
        bottom: 25px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-color: #429bc0;
       border-width:5px;    
        border-style:dotted solid;
        -webkit-animation: spin 60s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 60s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    @-webkit-keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }


    @-webkit-keyframes neon2 {
      from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
      }
      to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
      }
    }

Here is the original output:

Here is what I changed the html code to:

<div class='loader-wrapper'>
                <div class='loader'><div class='loader1'> 
                  </div> 
                  </div>
            <p><a  onclick='redirectFunction("<?php echo $res['moduleID']; ?>");'><?php echo $res['moduleID']; ?></a></p>
</div>

And what I changed in the CSS:

.loader-wrapper{
    position: fixed;
    top: 200px;
    left:18%;
    width: 300px;
    height: 300px;
   margin-left:30px;
    float: left;
}

 /* I have added more loader-wrapper's to add extra module nodes
Loader wrappers are floating right instead of left & margin has been changed*/   
.loader-wrapper1{
    position: fixed;
    top: 200px;
    left:18%;
    width: 300px;
    height: 300px;
   margin-left:30px;
    float: right;
  margin-left: 360px;

}

.loader-wrapper2{
    position: fixed;
    top: 200px;
    left:18%;
    width: 300px;
    height: 300px;
   margin-left:30px;
    float: right;
  margin-left: 700px;

}


.loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    margin: -175px 0 0 -175px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #4db8ff;
  border-bottom-color: #b3e0ff;
  border-right-color: #66c2ff;
  border-left-color: #80ccff;
  box-shadow: 0 0 15px #2187e7;

    -webkit-animation: spin 30s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 30s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

.loader1:before {
    content: "";
    position: absolute;
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-color: #4398ba;

    border-style:dotted;

    -webkit-animation: spin 18s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 18s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

.loader1:after {
    content: "";
    position: absolute;
    top: 55px;
    left: 55px;
    right: 55px;
    bottom: 55px;
    border-radius: 50%;
    border-color: #59c1eb;
   border-width:5px;    
    border-style:double dashed solid dotted ;
  box-shadow: 0 0 40px #2187e7;
    -webkit-animation: spin 60s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 60s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}


.loader:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-color: #1d5ca9;

    border-style:dotted;

    -webkit-animation: spin 18s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 18s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

.loader:after {
    content: "";
    position: absolute;
    top: 25px;
    left: 25px;
    right: 25px;
    bottom: 25px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-color: #429bc0;
   border-width:5px;    
    border-style:dotted solid;
    -webkit-animation: spin 60s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 60s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

Here is the output now, I am now outputting all rows returned from logged in user but my keyframes have stopped working

Any Idea where I've gone wrong?

EDIT

Added my resulting html:

<html>
<head>
  <meta charset="UTF-8">
  <title>Homepage</title>

  <!--Cascasing stylesheets -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
<style type="text/css">
  body {
  margin: 0;
  background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/39132/bg-stars.gif) repeat 0 0;
  font-family: sans-serif;
  font-weight: 100;
}
</style>

</head>
<!-- Encorporated module nodes, number 1 in readme.txt that is wrapped around number 5 from readme.txt which is the sidebar -->

<body>
  <div class='wrapper'>
  <div class='sidebar'>
    <div class='title'>
      Menu
    </div>
    <ul class='nav'>
      <li>
        <a href="index.php">Home</a>
      </li>
      <li>
        <a href="index.php">Chat</a>
      </li>

      <li>
        <a>Settings</a>
      </li>
      <li>
        <a href='accounts/logout.php'>Logout</a><br/>
      </li>
    </ul>
  </div>
  <div class='content isOpen'>
    <a class='button'></a>
    <!-- Session variables used from login functionality, number 9 of readme.txt-->
     <!-- With guidance from  http://blog.chapagain.com.np/crud-create-read-update-delete-php-mysql-login-register/ -->
        <br/>
        <br/>
        Welcome James ! <a href='logout.php'>Logout</a><br/>
        <br/>
        <!-- <a href='index.php'>View and Add Products</a> -->
        <div class="second">

                    <div class='loader-wrapper'>
                <div class='loader'><div class='loader1'> 
                  </div> 
                  </div>
            <p><a  onclick='redirectFunction("1");'>1</a></p>
            </div>
                    <div class='loader-wrapper'>
                <div class='loader'><div class='loader1'> 
                  </div> 
                  </div>
            <p><a  onclick='redirectFunction("2");'>2</a></p>
            </div>
                    <div class='loader-wrapper'>
                <div class='loader'><div class='loader1'> 
                  </div> 
                  </div>
            <p><a  onclick='redirectFunction("3");'>3</a></p>
            </div>

    </div>
        <br/><br/>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>

Do you have any idea how to get the values 1,2 & 3 that are returned next to each-other in three different circles?

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

报告相同问题？

关注问题

html css 中div的元素不在div标签内 css html5 前端有问必答
2021-07-28 11:47

回答 1 已采纳 .div_xc>div是浮动的，清除浮动就行，下面2个用其中一个就行。有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~这样 .div_xc { paddi
为什么设置div浮动，不会影响其后面的img元素？ css css3 前端
2021-11-25 10:30

回答 1 已采纳 <style> .box{ width: 1260px; height: 460px; posit
想将div里面的元素全部插入到指定div后面 html html5 javascript
2021-08-13 10:38

回答 1 已采纳 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &
前端200道面试题及答案（更新中）
2022-06-11 21:46

哎呀你干嘛啊的博客 link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染...
关于html中img标签width和height设置不起作用的问题 css html 前端
2022-03-09 13:06

回答 7 已采纳你好，你的标签少了，
HTML中，如何将css应用于指定某个<div>块中的<a>元素？ css html 前端
2023-03-21 20:53

回答 1 已采纳使用类选择器呀！将你样式中的标签选择器 a标签的默认样式去除，然后通过类选择器 .bottom 添加字体颜色样式即可，代码如下： a{ text-decora
为什么div加不加边框，盒内元素位置会移动很大呢？
2017-07-05 14:57

回答 3 已采纳详细参考http://www.cnblogs.com/huangyong8585/archive/2013/05/21/3090779.html，解决方案一：将子元素浮动！解决方案二：将margin-
css3——transition动画过渡（transition动画过渡可作用的属性），animation动画铺垫和@keyframes动画关键帧
2018-09-29 21:24

叨唠的博客选择器中调用animation属性，animation属性设置：某个关键帧名字、过渡时间、过渡函数、运动次数、运动方向（1）@keyframes + 关键帧 第一种写法：from 和 to .demo{ position: absolute; top: 100px...
如何利用js的控制在其中ul下的li标签中插入一个div html javascript 前端
2022-07-12 23:23

回答 2 已采纳 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
div中的float属性是影响到div本身还是其中的元素啊？
2015-11-17 01:58

回答 3 已采纳会先影响到自己本身，然后它里面的元素也会跟着影响
html中div标签居中为什么调节不了？ html5 有问必答
2021-10-15 13:05

回答 4 已采纳 margin:0 auto;需要搭配width或者max-width使用，就是块级元素需要有宽度并且小于父容器宽度，才会在父容器中居中。如果不设置由于是块级元素是自动填充满整个父容器的，所以看起来没居
前端面试题 - html标签和属性
2023-03-09 14:09

EchoLiner的博客纯表现的元素：basefont、big、center、font、 s、strike、tt、u。（1）HTML5 不是 SGML 的子集，主要是关于图像、位置、存储、多任务等功能的增加。增强表单控件 calendar、date、time、email、url、search。对可用...
CSS中两个不同类名的div元素的color属性为什么会互相影响？ css css3 html5
2019-10-14 09:38

回答 5 已采纳 .nav a:link, a:visited意思是： .nav中的a标签的link伪类和 a标签的visited伪类。所以此时的a标签的visited并不一定是在.nav中。然后以为css是从
2022年前端面试题整理，持续更新中
2022-03-11 18:14

zh阿飞的博客最新的面试题整理，整理了很多的一些基础知识，适合初中级的前端开发
2024前端面试题总汇（持续更新中...）
2023-09-26 06:11

小菜猿_的博客前端面试八股文大全！！！！！
没有解决我的问题, 去提问

悬赏问题

¥60 版本过低apk如何修改可以兼容新的安卓系统
¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
¥50 有数据，怎么建立模型求影响全要素生产率的因素
¥50 有数据，怎么用matlab求全要素生产率
¥15 TI的insta-spin例程
¥15 完成下列问题完成下列问题
¥15 C#算法问题, 不知道怎么处理这个数据的转换
¥15 YoloV5 第三方库的版本对照问题
¥15 请完成下列相关问题！
¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？

码龄粉丝数原力等级 --

将元素id更改为div标签中的元素类后，关键帧不再起作用

EDIT

0条回答默认最新

悬赏问题

将元素id更改为div标签中的元素类后，关键帧不再起作用

EDIT

0条回答 默认 最新

悬赏问题

0条回答默认最新