html - 闪耀在 Logo 上的闪屏

标签 html css

我尝试了一些代码，使用 CSS3 使我的 Logo 闪闪发光。不幸的是，结果不是很好。看看我的代码片段我做了什么。

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

我的预期输出:

沿着 Logo Shiny 移动。

/*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>

最佳答案

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

/*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>

关于html - 闪耀在 Logo 上的闪屏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39652229/

上一篇：css - 子 UL 类(CSS 样式)

下一篇：css - 如何在下拉选择中为 Unicode 字符添加颜色

相关文章：

javascript - 在 DataTables 中只显示小数点后 3 位

javascript - 奇怪的 html 渲染问题与 react

html - 左下角的消息框

javascript - 视频海报延迟播放

jquery - Accordion 列表中的复选框不可点击

html - 当视口(viewport)空间不足时使一个元素与其他元素重叠

html - 如何将 OpenOffice Writer 文档 (.odt) 转换为多个带导航的 HTML 文件？

html - 如何使div的样式随着div的大小而增长？

html - Bootstrap 嵌套列利用推/拉

javascript - 每次在 PHP 中添加新行时查看 javaScript datepicker

©2024 IT工具网  联系我们