0
このチュートリアルに触発http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/私は同様の効果の純粋なCSSバージョンを作ることにしました。CSSアニメーションの奇妙なキーフレームの設定
それはよく見え、かなりスムーズに動作します。私が気になるのは、何回か試してみたら、キーフレームを50％ではなく24％、74％に設定する必要があったからです。 50％のアニメーションでは不安定に見えます。私は実際に目隠ししたものをするのが好きではないので、私は助けに感謝します。ここで
は、迅速な汚い実装です：
\t html {
\t \t background: #ccc;
\t }
\t .card {
\t \t position: relative;
\t \t display: inline-block;
\t \t height: 400px;
\t \t width: 200px;
\t \t background: #000;
\t \t margin: 50px;
\t \t overflow: hidden;
\t }
\t
\t .card-head {
\t \t position: absolute;
\t \t background: #000;
\t \t height: 400px;
\t \t width: 400px;
\t \t border-radius: 50%;
\t \t left: -100px;
\t \t top: -173px;
\t \t z-index: 10;
\t \t -webkit-animation-name: carda;
\t \t animation-name: carda;
\t }
\t
\t .card-extend {
\t \t position: absolute;
\t \t background: #fff;
\t \t height: 400px;
\t \t width: 400px;
\t \t bottom: -200px;
\t \t left: -100px;
\t \t z-index: 5;
\t \t -webkit-animation-name: cardb;
\t \t animation-name: cardb;
\t }
\t
\t .card-animated {
\t \t -webkit-animation-duration: .2s;
\t \t animation-duration: .2s;
\t \t -webkit-animation-fill-mode: forwards;
\t \t animation-fill-mode: forwards;
\t \t -webkit-animation-timing-function:ease-in-out;
\t animation-timing-function:ease-in-out;
\t }
\t
\t .card:hover .card-head,
\t .card:focus .card-head{
\t \t -webkit-animation-name: cardhovera;
\t \t animation-name: cardhovera;
\t }
\t
\t .card:hover .card-extend,
\t .card:focus .card-extend{
\t \t -webkit-animation-name: cardhoverb;
\t \t animation-name: cardhoverb;
\t }
\t
\t @-webkit-keyframes carda {
\t \t from {
\t \t \t border-radius: 0%;
\t \t \t top: -320px;
\t \t \t z-index: 2;
\t \t }
\t \t 24% {
\t \t \t top: -320px;
\t \t \t border-radius: 25%;
\t \t \t z-index: 2;
\t \t }
\t \t to { \t \t \t
\t \t \t border-radius: 50%;
\t \t \t top: -173px;
\t \t }
\t }
\t
\t @keyframes carda {
\t \t from {
\t \t \t border-radius: 0%;
\t \t \t top: -320px;
\t \t \t z-index: 2;
\t \t }
\t \t 24% {
\t \t \t top: -320px;
\t \t \t border-radius: 25%;
\t \t \t z-index: 2;
\t \t }
\t \t to { \t \t \t
\t \t \t border-radius: 50%;
\t \t \t top: -173px;
\t \t }
\t }
\t
\t @-webkit-keyframes cardhovera {
\t \t from {
\t \t \t border-radius: 50%;
\t \t \t top: -173px;
\t \t }
\t \t 76% {
\t \t \t top: -320px;
\t \t \t border-radius: 25%;
\t \t \t z-index: 2;
\t \t }
\t \t to {
\t \t \t border-radius: 0%;
\t \t \t top: -320px;
\t \t \t z-index: 2;
\t \t }
\t }
\t
\t @keyframes cardhovera {
\t \t from {
\t \t \t border-radius: 50%;
\t \t \t top: -173px;
\t \t }
\t \t 76% {
\t \t \t top: -320px;
\t \t \t border-radius: 25%;
\t \t \t z-index: 2;
\t \t }
\t \t to {
\t \t \t border-radius: 0%;
\t \t \t top: -320px;
\t \t \t z-index: 2;
\t \t }
\t }
\t
\t @-webkit-keyframes cardb {
\t \t from {
\t \t \t bottom: -53px;
\t \t \t border-radius: 50%;
\t \t }
\t \t 76% {
\t \t \t bottom: -200px;
\t \t \t border-radius: 25%;
\t \t \t
\t \t }
\t \t to { \t \t \t
\t \t \t border-radius: 0;
\t \t \t z-index: 5;
\t \t \t bottom: -200px;
\t \t }
\t }
\t
\t @keyframes cardb {
\t \t from {
\t \t \t bottom: -53px;
\t \t \t border-radius: 50%;
\t \t }
\t \t 76% {
\t \t \t bottom: -200px;
\t \t \t border-radius: 25%;
\t \t \t
\t \t }
\t \t to { \t \t \t
\t \t \t border-radius: 0;
\t \t \t z-index: 5;
\t \t \t bottom: -200px;
\t \t }
\t }
\t @-webkit-keyframes cardhoverb {
\t \t from {
\t \t \t border-radius: 0;
\t \t \t z-index: 5;
\t \t \t bottom: -200px;
\t \t }
\t \t 24% {
\t \t \t bottom: -200px;
\t \t \t border-radius: 25%;
\t \t }
\t \t to {
\t \t \t bottom: -53px;
\t \t \t border-radius: 50%;
\t \t }
\t }
\t
\t @keyframes cardhoverb {
\t \t from {
\t \t \t border-radius: 0;
\t \t \t z-index: 5;
\t \t \t bottom: -200px;
\t \t }
\t \t 24% {
\t \t \t bottom: -200px;
\t \t \t border-radius: 25%;
\t \t \t
\t \t }
\t \t to {
\t \t \t bottom: -53px;
\t \t \t border-radius: 50%;
\t \t }
\t }<div tabindex="0" class="card">
\t \t <div class="card-head card-animated">
\t \t </div>
\t \t <div class="card-extend card-animated">
\t \t </div>
\t </div>