0
私のウェブサイトのロゴを照らすコードを書いています。ロゴにマウスを置くと機能しますが、ウェブサイトをロードするときに無限にアニメーションを自動再生します。私はキーフレームを使用しますが、動作しません。私は混乱しています。CSSホバーアニメーションを自動アニメーションに変換する
私のCSSコード:
@import url(https://fonts.googleapis.com/css?family=Raleway);
html{
font: .9em 'Raleway',sans-serif;
height: 100%;
text-align: center;
background: radial-gradient(50% 0,rgba(255,255,255,.3),rgba(255,255,255,0)), deepskyblue;
color: rgba(0,0,0,.6);
}
p a{
color: rgba(0,0,0,.6);
}
.mask a{
position: relative;
display:block;
width:150px;
height: 64px;
text-align:center;
margin: 50px auto;
background: ;
-webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
}
.mask a{
background-position: -140px 0;
}
.mask a:hover,
.mask a:focus{
background-position: 10px 0;
/*change speed to see in slow motion*/
transition: all 1s;
}
.mask a::after{
content:'';
position: absolute;
pointer-events: none;
top:0; left:0; right:0; bottom: 0;
background: radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
background: radial-gradient(circle farthest-side at 0 0, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
background-position: inherit;
-webkit-mask: url('http://dev.iamvdo.me/newLogoCSS3create2.png') center;
mask: url('#mask-firefox');
}
<div class="mask pseudo">
<a href="http://css3create.com">
<img src="http://dev.iamvdo.me/newLogoCSS3create2.png" alt="CSS3Create logo" />
</a>
</div>
<svg height="0">
<!-- THE mask -->
<mask id="mask-firefox">
<image width="150" height="64" xlink:href="http://dev.iamvdo.me/newLogoCSS3create2.png" filter="url(#filter)" />
</mask>
<!-- the filter to make the image white -->
<filter id="filter">
<feFlood flood-color="white" />
<feComposite in2="SourceAlpha" operator="in" />
</filter>
</svg>
@keyframesのメディアに「.mask a :: after」コンテンツを「to」または「from」に入れることはありますか? –
こんにちはM.Mord!私は「アニメーション...」という4つの行と「@keyframes」で始まるブロックだけを実際の例に追加します。自分で試してみてください - それは魅力のように動作するはずです。 –