闪耀在徽标

时间：2016-09-23 03:43:19

标签： html5 css3

我尝试了一些代码，使用CSS3让我的徽标闪亮。不幸的是结果并不那么好。看看我的片段，我做了什么。

p / s：闪光灯的边框让我的闪屏不太好。

我的预期输出：

沿徽标移动。

/*Splash screen*/
body
{
  background-color:#ccc;
 }
.middle-screen
{
    height: 100px;
    /* margin-top: 31vh;*/
    width: 74%;
    margin-left: auto;
    margin-right: auto;
}

i.splash {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* ff3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0))); /* safari4+,chrome */
    background:-webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* safari5.1+,chrome10+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* opera 11.10+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* ie10+ */
    background:radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0 ); /* ie6-9 */
    width: 20%;
    height: 72px;
    transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    -moz-transform: skew(-10deg, 0deg);
    -ms-transform: skew(-10deg, 0deg);
    -o-transform: skew(-10deg, 0deg);
    animation: move 5s;
    /*animation-iteration-count: infinite;*/
    animation-delay: 300ms;
    -webkit-animation: move 5s;
    /*-webkit-animation-iteration-count: infinite;*/
    -webkit-animation-delay: 300ms;
    -moz-transform: skew(-10deg, 0deg);
    -moz-animation: move 5s;
    /*-moz-animation-iteration-count: infinite;*/
    -moz-animation-delay: 1s;
    -ms-transform: skew(-10deg, 0deg);
    -ms-animation: move 5s;
    /*-ms-animation-iteration-count: infinite;*/
    -ms-animation-delay: 1s;
    -o-transform: skew(-10deg, 0deg);
    -o-animation: move 5s;
    /*-o-animation-iteration-count: infinite;*/
    -o-animation-delay: 1s;
    margin-top: 39vh;
}

/*  */
@keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  5% {
    opacity: 0.0;
  }
  48% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.0;
  }
  100% {
    left: 82%;
  }
}
@-webkit-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  5% {
    opacity: 0.2;
  }
  48% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.0;
  }
  100% {
    left: 82%;
  }
}
@-moz-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  5% {
    opacity: 0.0;
  }
  48% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.0;
  }
  100% {
    left: 88%;
  }
}
@-ms-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  5% {
    opacity: 0.0;
  }
  48% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.0;
  }
  100% {
    left: 82%;
  }
}
@-o-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  5% {
    opacity: 0.0;
  }
  48% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.0;
  }
  100% {
    left: 82%;
  }
}
<div class="bg-splash">
  <div class="middle-screen">
    <img width="100%" src="http://jiayuhk.com/sc/assets/img/sample/shortcode/logo/1.png" />
    <i class="splash"></i>
  </div>
</div>

2 个答案:

答案 0 :(得分：1)

我从margin-top: 31vh;删除了.middle-screen。也许这就是你想要的：

/*Splash screen*/
body
{
  background-color:#ccc;
 }
.middle-screen
{
    height: 100px;
    width: 74%;
    margin-left: auto;
    margin-right: auto;
}

i.splash {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* ff3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0))); /* safari4+,chrome */
    background:-webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* safari5.1+,chrome10+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* opera 11.10+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* ie10+ */
    background:radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0 ); /* ie6-9 */
    width: 20%;
    height: 72px;
    transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    -moz-transform: skew(-10deg, 0deg);
    -ms-transform: skew(-10deg, 0deg);
    -o-transform: skew(-10deg, 0deg);
    animation: move 5s;
    /*animation-iteration-count: infinite;*/
    animation-delay: 300ms;
    -webkit-animation: move 5s;
    /*-webkit-animation-iteration-count: infinite;*/
    -webkit-animation-delay: 300ms;
    -moz-transform: skew(-10deg, 0deg);
    -moz-animation: move 5s;
    /*-moz-animation-iteration-count: infinite;*/
    -moz-animation-delay: 1s;
    -ms-transform: skew(-10deg, 0deg);
    -ms-animation: move 5s;
    /*-ms-animation-iteration-count: infinite;*/
    -ms-animation-delay: 1s;
    -o-transform: skew(-10deg, 0deg);
    -o-animation: move 5s;
    /*-o-animation-iteration-count: infinite;*/
    -o-animation-delay: 1s;
    margin-top: 39vh;
}

/*  */
@keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  5% {
    opacity: 0.0;
  }
  48% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.0;
  }
  100% {
    left: 82%;
  }
}
@-webkit-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  5% {
    opacity: 0.2;
  }
  48% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.0;
  }
  100% {
    left: 82%;
  }
}
@-moz-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  5% {
    opacity: 0.0;
  }
  48% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.0;
  }
  100% {
    left: 88%;
  }
}
@-ms-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  5% {
    opacity: 0.0;
  }
  48% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.0;
  }
  100% {
    left: 82%;
  }
}
@-o-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  5% {
    opacity: 0.0;
  }
  48% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.0;
  }
  100% {
    left: 82%;
  }
}
<div class="bg-splash">
  <div class="middle-screen">
    <img width="100%" src="http://jiayuhk.com/sc/assets/img/sample/shortcode/logo/1.png" />
    <i class="splash"></i>
  </div>
</div>

答案 1 :(得分：0)

只需从.middle_screen中删除margin-top就可以了。你应该很高兴。

相关问题
最新问题