CSS实现小球跳动效果

2018-02-27 11:07:05来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

CSS实现小球跳动效果

<style type="text/css">   .bound {  animation-duration: 1s;}.ball {  animation-duration: .75s;}.dot {  animation-duration: .25s;}.dot {  top: 100%;  height: 50%;  width: 50%;  background-color: #fff;  transform: translate(0, -50%);  animation-name: drop;}.ball {  top: 100%;  height: 50%;  width: 50%;  transform: translate(0, -50%);  animation-name: drop, roundround;}.bound {  top: 0;  animation-name: playalong, roundround;}.wrapper {  position: relative;  margin: auto;  width: 100%;  overflow: hidden;}.wrapper:before {  content: "";  display: block;  padding-top: 100%;}.bound,.ball,.dot {  position: absolute;  margin: auto;  animation-delay: 0;  animation-direction: alternate;  animation-iteration-count: infinite;  animation-timing-function: ease-in-out;  animation-play-state: running;  right: 0%;  bottom: 0%;  left: 0%;  border-radius: 50%;}body {  margin: 0;  background: black;}* {  box-sizing: border-box;}@keyframes playalong {  from {    height: 100%;    width: 100%;  }  to {    height: 10%;    width: 10%;  }}@keyframes roundround {  to {    transform: rotate(360deg);  }}@keyframes drop {  to {    top: 0%;    bottom: 80%;    transform: scale(.25);  }}@media (orientation: landscape) {  .wrapper {    width: 100vh;  }}@media (orientation: portrait) {  .wrapper {  top: 50%;  -ms-transform:translateY(-50%);  -webkit-transform:translateY(-50%);  -moz-transform:translateY(-50%);  -o-transform:translateY(-50%);  transform:translateY(-50%);  }  body{    height:100vh;  }}@-ms-viewport {  width: device-width;}@viewport {  zoom: 1.0;  width: device-width;}</style><div >  <div >    <span >            <span ></span>    </span>  </div></div>

 

 

 

 

 

 

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台