0
受本教程的啓發http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/我決定讓純css版本的效果類似。在CSS動畫中設置奇怪的關鍵幀
它看起來不錯，工作很順利。令我困擾的是爲什麼經過幾次嘗試，我不得不將關鍵幀設置爲24％和74％而不是50％？ 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>