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>