在关键帧动画的不需要的稠粘的背景图象

时间：2017-04-28 19:09:40

标签： html css css-animations keyframe

我已经制作了一个简单的css关键帧动画，该动画在加载页面时发生。但是，页面SharedWorker会粘贴到文本中。你可以在这里看到我的问题

https://codepen.io/gavdraws/pen/OmpEjK

任何想法我做错了什么？

干杯

1 个答案:

答案 0 :(得分：0)

您已将java.lang.SecurityException: Requires READ_PHONE_STATE: Neither user 10215 nor current process has android.permission.READ_PHONE_STATE 应用于background-image，文字元素包含课程.home，因此每个元素都有.home。

我认为你想要包含文本元素（background-image）的元素的背景 - 而不是每个.pageCont元素。

.home
/* - - - - - Nav Icons - - - - - */

/* Profile */
$(document).ready(function(){
  $("#top").hover(function() {
     $("#profile").css("background-image", "url(img/nav-icons/Profile-light.png)");
  }, function() {
     $("#profile").css("background-image", "url(img/nav-icons/Profile-dark.png)");
  });
});

/* CV */
$(document).ready(function(){
  $("#left").hover(function() {
     $("#cv").css("background-image", "url(img/nav-icons/CV-light.png)");
  }, function() {
     $("#cv").css("background-image", "url(img/nav-icons/CV-dark.png)");
  });
});

/* Contact */
$(document).ready(function(){
  $("#bottom").hover(function() {
     $("#contact").css("background-image", "url(img/nav-icons/Contact-light.png)");
  }, function() {
     $("#contact").css("background-image", "url(img/nav-icons/Contact-dark.png)");
  });
});

/* Work */
$(document).ready(function(){
  $("#right").hover(function() {
     $("#work").css("background-image", "url(img/nav-icons/Work-light.png)");
  }, function() {
     $("#work").css("background-image", "url(img/nav-icons/Work-dark.png)");
  });
});
html, body { 
  height:100%; 
  width: 100%; 
  margin:0; 
  padding:0; 
}

h2{
  font-family: 'Lato', sans-serif;
  font-size: 33pt; 
  font-style: bold; 
  text-transform: uppercase;
}

h2.home{
  color: #EDEDED;
}

p{
  font-family: 'Lato', sans-serif;
  font-size: 12pt;
}

p.home{
  color: #EDEDED;
}

/*.preloader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    z-index: 2000;
    background-image: url(../gfx/logo/logo.gif) !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    }*/

    /*#line{
      position: relative;
      top: 50%;
      bottom: 50%;
    }*/

    .frame {
      position: absolute;
      z-index: 1000;
    }

    .frame.rightFrame {
      top: 0px;
      right: 0px;
      border-right: 45px solid #EDEDED;
      border-top: 45px solid transparent;
      border-bottom: 45px solid transparent;
      height: 100%;
      box-sizing: border-box;
    }

    .frame.rightFrame:hover{
     border-right: 45px solid #F1612F;
     cursor: pointer;
  }

.frame.leftFrame {
    top: 0px;
    left: 0px;
    border-left: 45px solid #EDEDED;
    border-top: 45px solid transparent;
    border-bottom: 45px solid transparent;
    height: 100%;
    box-sizing: border-box;
}

.frame.leftFrame:hover{
   border-left: 45px solid #F1612F;
   cursor: pointer;
}

 .frame.topFrame {
  top: 0px;
  left: 0px;
  border-top: 45px solid #EDEDED;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0px;
  width: 100%;
  box-sizing: border-box;
}

.frame.topFrame:hover{
 border-top: 45px solid #F1612F;
 cursor: pointer;
}

.frame.bottomFrame {
  bottom: 0px;
  left: 0px;
  border-bottom: 45px solid #EDEDED;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0px;
  width: 100%;
  box-sizing: border-box;
}

.frame.bottomFrame:hover{
 border-bottom: 45px solid #F1612F;
 cursor: pointer;
}

.pageCont{
  position: absolute;
  top: 45px;
  left: 45px;
  right: 45px;
  bottom: 45px; 
  z-index: 950;
  overflow: hidden;
}

/* - - - - - Icons formatting - - - - - */

.menuIcon {
  z-index: 1001;
  cursor: pointer;
}

/* Profile */
.menuIcon#profile {
  position: relative;
  margin: 0 auto; 
  width: 45px;
  height: 45px;
  background-image: url(../img/nav-icons/Profile-dark.png);
  background-repeat: no-repeat; 
}

#profile:hover ~ .topFrame {
  border-top: 45px solid #F1612F !important;
}

#profile:hover {
  background-image: url(../img/nav-icons/Profile-light.png) !important;
}

/* CV */
.menuIcon#cv {
  top: 50%; 
  margin-top: -15px; 
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url(../img/nav-icons/CV-dark.png);
  background-repeat: no-repeat; 
}

#cv:hover ~ .leftFrame {
  border-left: 45px solid #F1612F !important;
}

#cv:hover {
  background-image: url(../img/nav-icons/CV-light.png) !important;
}

/* Contact */
.menuIcon#contact {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: 0 !important;
  width: 45px;
  height: 45px;
  background-image: url(../img/nav-icons/Contact-dark.png);
  background-repeat: no-repeat; 
}

#contact:hover ~ .bottomFrame {
  border-bottom: 45px solid #F1612F !important;
}

#contact:hover {
  background-image: url(../img/nav-icons/Contact-light.png) !important;
}

/* Work */
.menuIcon#work {
  top: 50%; 
  right: 0; 
  margin-top: -15px; 
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url(../img/nav-icons/Work-dark.png);
  background-repeat: no-repeat; 
}

#work:hover ~ .rightFrame {
  border-right: 45px solid #F1612F !important;
}

#work:hover{
  background-image: url(../img/nav-icons/Work-light.png) !important;
}

.pageCont{
  background-image: url("http://www.codeandpepper.com/assets/gfx/start/slide_3.jpg") !important;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top left; 
}

.profile-pic{
  position: relative;
  margin-top: 30px !important; 
  width: 150px; 
  height: auto;
  text-align: center;
  animation: fadeuptwo 0.8s ease-out forwards;
  /* Safari and Chrome */
  -webkit-animation: fadeuptwo 0.8s;
}

.centre-div{
  text-align: center;
  position: relative; 
  margin: 0 auto !important; 
  margin-top: 50px !important; 
  width: 420px; 
  height: 80%; 
  animation: fadeup 0.9s ease-out forwards;
  /* Safari and Chrome */
  -webkit-animation: fadeup 0.9s;
}

@keyframes fadeup {
  from {
    top: 200px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1
  }
}

@-webkit-keyframes fadeup {
/* Safari and Chrome */
  from {
    top: 200px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}

@keyframes fadeuptwo {
  from {
    top: 200px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1
  }
}

@-webkit-keyframes fadeuptwo {
/* Safari and Chrome */
  from {
    top: 200px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}



a {
  color: #F1612F;
  display: inline-block;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}
a:after {
  background-color: currentColor;
  bottom: 0;
  content: '';
  display: inline-block;
  height: 2.5px;
  left: 0;
  position: absolute;
  right: 0;
  -moz-transition: left 0.15s ease-out,right 0.15s ease-out;
  -o-transition: left 0.15s ease-out,right 0.15s ease-out;
  -webkit-transition: left 0.15s ease-out,right 0.15s ease-out;
  transition: left 0.15s ease-out,right 0.15s ease-out;
}
a:hover:after {
  left: 50%;
  right: 50%;
  -moz-transition: left 0.15s ease-in,right 0.15s ease-in;
  -o-transition: left 0.15s ease-in,right 0.15s ease-in;
  -webkit-transition: left 0.15s ease-in,right 0.15s ease-in;
  transition: left 0.15s ease-in,right 0.15s ease-in;
}

/* Responsive: Small Desktop */
@media (max-width: 640px) {

}

/* Responsive: Mobile */
@media (max-width: 640px) {
  .frame{
    display: none !important; 
  }

  .pageCont{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
  }

  .menuIcon{
    display: none !important;
  }

  .centre-div{
    width: 90%;
  }
}

相关问题
最新问题