<!DOCTYPE html><html><head> ???<meta charset="UTF-8"> ???<title>CSS3弹簧特效</title> ???<style> ???????* { ???????????margin: 0; ???????????padding: 0 ???????} ???????html,body{ ???????????width: 100%; ???????????height: 100%; ???????????display: flex; ???????} ???????body{ ???????????perspective: 800px; ???????} ???????.wrap{ ???????????width: 400px; ???????????height: 400px; ???????????margin: auto; ???????????transform: rotateX(60deg); ???????????position: relative; ???????????transform-style: preserve-3d; ???????} ???????.wrap div{ ???????????position: absolute; ???????????border: 15px solid #ccd7d9; ???????????border-color: #ccd7d9 #d2dbde #d7e0e2 #d2dbde; ???????????border-radius: 50%; ???????????box-shadow: 0 1px 0 #fff, 0 10px 0 #abbdc1 inset, 0 10px 0 #abbdc1; ???????????transform: translateZ(-50px); ???????} ???????.wrap div:nth-child(1){ ???????????left: calc( 400px/2 - 340px/2 - 15px ); ???????????top: calc( 400px/2 - 340px/2 ?- 15px ); ???????????width: 340px; ???????????height: 340px; ???????????animation: play1 2s 2400ms ease-in-out infinite alternate; ???????} ???????.wrap div:nth-child(2){ ???????????left: calc( 400px/2 - 280px/2 - 15px ); ???????????top: calc( 400px/2 - 280px/2 ?- 15px ); ???????????width: 280px; ???????????height: 280px; ???????????animation: play1 2s 2000ms ease-in-out infinite alternate; ???????} ???????.wrap div:nth-child(3){ ???????????left: calc( 400px/2 - 220px/2 - 15px ); ???????????top: calc( 400px/2 - 220px/2 ?- 15px ); ???????????width: 220px; ???????????height: 220px; ???????????animation: play1 2s 1600ms ease-in-out infinite alternate; ???????} ???????.wrap div:nth-child(4){ ???????????left: calc( 400px/2 - 160px/2 - 15px ); ???????????top: calc( 400px/2 - 160px/2 ?- 15px ); ???????????width: 160px; ???????????height: 160px; ???????????animation: play1 2s 1200ms ease-in-out infinite alternate; ???????} ???????.wrap div:nth-child(5){ ???????????left: calc( 400px/2 - 100px/2 - 15px ); ???????????top: calc( 400px/2 - 100px/2 ?- 15px ); ???????????width: 100px; ???????????height: 100px; ???????????animation: play1 2s 800ms ease-in-out infinite alternate; ???????} ???????.wrap div:nth-child(6){ ???????????left: calc( 400px/2 - 40px/2 - 15px ); ???????????top: calc( 400px/2 - 40px/2 ?- 15px ); ???????????width: 40px; ???????????height: 40px; ???????????animation: play1 2s 400ms ease-in-out infinite alternate; ???????} ???????@keyframes play1 { ???????????from{ ???????????????transform: translateZ(-50px); ???????????} ???????????to{ ???????????????transform: translateZ(100px); ???????????} ???????} ???</style></head><body> ???<div class="wrap"> ???????<div></div> ???????<div></div> ???????<div></div> ???????<div></div> ???????<div></div> ???????<div></div> ???</div></body></html>CSS3-------弹簧特效
原文地址：https://www.cnblogs.com/Dyla/p/9934552.html