0
カードの白い背景にカーソルを合わせると青いアイコンが消えてしまうのを誰も知っていますか？私は、マウスがカード上のどこにでも触れるたびにアイコンが直接表示されるのではなく、アニメーションを設定しようとしました。グリフコンはCSS3で完全に隠れることはありません。Hover Animation
これは今のところ怪しいです。マウスの近くにマウスを置くと、青色のアイコンが点滅し、最終的に1秒間消えますが、戻ってきます。まったく滑らかではありません。
ありがとうございました。
body {
background-color: #f3f3f3;
}
.fa {
margin-top: 40px;
color: #0088ce;
}
.textanim-container {
background-color: #fff;
position: relative;
max-width: 360px;
min-height: 243px;
margin: auto;
overflow: hidden;
margin-top: 50px;
box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08);
}
.textanim-title {
margin: 0;
position: absolute;
width: 100%;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
text-align: center;
transition: 0.5s;
}
.textanim-container:hover {
top: 10px;
transform: bottom 0.64s, opacity 0.63s cubic-bezier(0.33, 0.66, 0.66, 1)
}
.textanim-hidden {
width: 100%;
position: absolute;
top: 400px;
/*opacity: 0.5;*/
transition: 0.8s;
text-align: center;
right: 3px;
padding: 15px;
}
.textanim-container:hover .textanim-hidden {
top: 50%;
transform: translateY(-50%);
color: #444;
/*background-color: #0088ce;*/
/*color: #fff;*/
}
.disappear:hover {
color: #fff;
}
/*
.fa:hover {
color: #fff;
}*/<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
<div class="textanim-container text-center disappear">
<div class="disappear">
<i class="fa fa-user fa-4x disappear" aria-hidden="true"></i>
<h3 class="textanim-title disappear">One Account Manager</h3>
</div>
<span class="textanim-hidden">
For groups over 100, we assign a single account manager, someone who'll get to know your group and respond quickly to queries. Under 100? You'll still get the benefit of our AMs' expertise—and one number, one email.
</span>
</div>
を修正するために、あなたのCSSのコードの下に追加し、私はそれを実行することができるように変更して、コードを投稿する時間を割いていただき、ありがとうございます！これはトリックでした！ – PandaNinja