CSSで丸ボタンだけアニメーションをかけたい
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
このURLのように緑の丸ボタンに対して光るアニメーションをかけたいのですが、検索したものをコピペしてもうまく反映されません。
どのようにしたらうまくいきますでしょうか？
https://lp.eclat-charme.jp/ec-tel_00_free2018ec_pc?gclid=EAIaIQobChMIocXxzOSs4wIVFK6WCh2b8w_yEAAYASAAEgIKCvD_BwE&trflg=1
どのようにしたらうまくいきますでしょうか？
https://lp.eclat-charme.jp/ec-tel_00_free2018ec_pc?gclid=EAIaIQobChMIocXxzOSs4wIVFK6WCh2b8w_yEAAYASAAEgIKCvD_BwE&trflg=1
いけち さん
07月11日 20時44分
いけちさん、こんにちは。
CSS アニメーションですね。近い風に作ってみました。
■HTML
■CSS
補足はコード内にコメントとして書いていますので参考になさってください。
このままではちょっと激しすぎる感じがするので、調整した方がよいかもしれませんね。
CSS アニメーションですね。近い風に作ってみました。
■HTML
<img class="animated" src="画像パス">
■CSS
<style>
.animated {
/* 変化の速度 */
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
/* アニメーションの繰り返し infinite=無限 */
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
/* アニメーションを指定 ここではflashという名称 */
-webkit-animation-name: flash;
animation-name: flash;
}
/* flashという名称のアニメーションを作成
この数値をいろいろといじればアニメーションも変わりますので、
希望のアニメーションになるよう修正されると良いです。*/
@-webkit-keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0.4;
}
}
@keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0.4;
}
}
</style>
.animated {
/* 変化の速度 */
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
/* アニメーションの繰り返し infinite=無限 */
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
/* アニメーションを指定 ここではflashという名称 */
-webkit-animation-name: flash;
animation-name: flash;
}
/* flashという名称のアニメーションを作成
この数値をいろいろといじればアニメーションも変わりますので、
希望のアニメーションになるよう修正されると良いです。*/
@-webkit-keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0.4;
}
}
@keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0.4;
}
}
</style>
補足はコード内にコメントとして書いていますので参考になさってください。
このままではちょっと激しすぎる感じがするので、調整した方がよいかもしれませんね。
馬場誠 さん
07月12日 07時58分
