CSS3浮动的小猪动画

一款很可爱的纯CSS3浮动小猪，同时小猪在浮动时投影也会跟着浮动，动画效果非常逼真。#pig { height:20em; width:20em; margin:5em auto; position:relative; border-radius:50%; -webkit-box-shadow:0 0.125em 1em #fca inset, 0 -1.5em 5em #923 inset; box-shadow:0 0.125em 1em #fca inset, 0 -1.5em 5em #923 inset; background:-webkit-radial-gradient(50% 30%, #fa9 20%, #f46 100%); background:radial-gradient(50% 30%, #fa9 20%,#f46 100%); -webkit-animation: float ease-in-out 1.5s infinite; animation: float ease-in-out 1.5s infinite;}#pig:before{ -webkit-animation: shadow ease-in-out 1.5s infinite; animation: shadow ease-in-out 1.5s infinite; content:''; display:block; position:relative; top:10em; height:.5em; margin:0 2em; border-radius:80% 60%; -webkit-box-shadow:0 14em 1em 1em rgba(0,0,0,.7); box-shadow:0 14em 1em 1em rgba(0,0,0,.7); background:rgba(0,0,0,0); opacity: .5;}.ear { height:8em; width:5em; position:absolute; top:2em; background:-webkit-radial-gradient(50% 30%, #923 20%, #612 100%); background:radial-gradient(50% 30%, #923 20%,#612 100%);}.ear.left{ left:-1em; border-radius:250% 50% 250% 20%; -webkit-box-shadow:0.125em 0.125em 0.5em rgba(90,0,0,0.25), 0 -0.0625em 0.25em rgba(0,0,0,0.5) inset; box-shadow:0.125em 0.125em 0.5em rgba(90,0,0,0.25), 0 -0.0625em 0.25em rgba(0,0,0,0.5) inset;}.ear.right{ right:-1em; border-radius:50% 250% 20% 250%; -webkit-box-shadow:-0.125em 0.125em 0.5em rgba(90,0,0,0.25), 0 -0.0625em 0.25em rgba(0,0,0,0.5) inset; box-shadow:-0.125em 0.125em 0.5em rgba(90,0,0,0.25), 0 -0.0625em 0.25em rgba(0,0,0,0.5) inset;}.eye{ height:7em; width:3.5em; position:absolute; top:5em; -webkit-box-shadow:0 -1em 1em rgba(0,0,100,0.15) inset,0 -0.25em 0.25em rgba(0,0,100,0.2) inset, 0 0.125em 0.75em rgba(90,0,0,0.2), 0 0.25em 1em rgba(90,0,0,0.3 ); box-shadow:0 -1em 1em rgba(0,0,100,0.15) inset,0 -0.25em 0.25em rgba(0,0,100,0.2) inset, 0 0.125em 0.75em rgba(90,0,0,0.2), 0 0.25em 1em rgba(90,0,0,0.3 ); background:#fff;}.eye.left{ left:28%; border-radius:100% 50%;}.eye.right{ right:28%; border-radius:50% 100%;}.eye:after{ height:3em; width:2em; position:absolute; top:1em; border-radius:100%; -webkit-box-shadow:0 -0.25em 0.5em #111 inset; box-shadow:0 -0.25em 0.5em #111 inset; content:''; background:#333;}.eye.left:after{ left:35%; }.eye.right:after{ right:35%; }.nose { height:4em; width:6em; position:absolute; top:60%; left:36%; border-radius:80% 80% 70% 70%; -webkit-box-shadow:0 0.25em 1em rgba(90,0,0,0.5), 0 -0.0625em #fff; box-shadow:0 0.25em 1em rgba(90,0,0,0.5), 0 -0.0625em #fff; background:-webkit-radial-gradient(50% 30%, #fca 20%, #fa9 100%); background:radial-gradient(50% 30%, #fca 20%,#fa9 100%);}.nose:before, .nose:after { height:2em; width:0.5em; position:absolute; top:1em; border-radius:100%; -webkit-box-shadow:0 0.0625em #fff,0 0 0.5em rgba(90,0,0,0.5); box-shadow:0 0.0625em #fff,0 0 0.5em rgba(90,0,0,0.5); content:''; background:#612;} .nose:before { left:1.75em; } .nose:after { right:1.75em; }@-webkit-keyframes float { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(1em); transform: translateY(1em); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }}@keyframes float { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(1em); transform: translateY(1em); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }}@-webkit-keyframes shadow { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: .5; } 50% { -webkit-transform: translateY(1em) scale(.9); transform: translateY(1em) scale(.9); opacity: 1; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: .5; }}@keyframes shadow { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: .5; } 50% { -webkit-transform: translateY(1em) scale(.9); transform: translateY(1em) scale(.9); opacity: 1; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: .5; }}

在线演示        积分下载        6毛下载        砍两刀下载