0
私は、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>
まだ私の要件を満たしていない場合、あなたはまた、すべての4面のフラッシュの境界を削除することができます。 – Nere