<!doctype html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>css3动画</title> ???<style> ???????*{margin:0;padding:0;box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing: border-box;} ???????#window{ ???????????width: 400px; ???????????height: 200px; ???????????background: #333333; ???????????position: relative; ???????????left: 100px; ???????????top: 100px; ???????????cursor: pointer; ???????????overflow: hidden; ???????????text-align: center; ???????} ???????#window span{ ???????????font-size: 20px; ???????????color: #fc6e00; ???????????font-family: ‘Arial‘; ???????????position: relative; ???????????top:-40px; ???????????transition: top 0.2s ease; ???????????-webkit-transition: top 0.2s ease; ???????????z-index: 10; ???????} ???????#window div{ ???????????width: 500px; ???????????height: 500px; ???????????background: #0e8a7c; ???????????position: absolute; ???????????left: 50%; ???????????top: 50%; ???????????border-radius: 50%; ???????????margin: -250px 0 0 -250px; ???????????transform:scale(0); ???????????z-index: 1; ???????} ???????#window:before{ ???????????content: ‘‘; ???????????display: block; ???????????width: 40px; ???????????height: 40px; ???????????background: #0E8A7C; ???????????border-radius: 50%; ???????????position: absolute; ???????????left: -50px; ???????????top:calc(50% - 20px); ???????????transition: left 0.2s ease; ???????????-webkit-transition: left 0.2s ease; ???????} ???????#window:after{ ???????????position: absolute; ???????????right: -40px; ???????????top:calc(50% - 15px); ???????????content: ‘‘; ???????????display: block; ???????????width: 30px; ???????????height: 30px; ???????????background: url(http://cdn.attach.qdfuns.com/notes/pics/201611/29/165921bxgufb9blv9gdu3u.png); ???????????background-size: 80% 80%; ???????????background-position: center center; ???????????background-repeat: no-repeat; ???????????z-index: 10; ???????????transition: right 0.2s ease; ???????????-webkit-transition: right 0.2s ease; ???????} ???????#window:hover:after{ ???????????right: calc(50% - 15px); ???????????transition: right 0.2s ease; ???????????-webkit-transition: right 0.2s ease; ???????} ???????#window:hover:before{ ???????????left: calc(50% - 20px); ???????????transition: left 0.2s ease; ???????????-webkit-transition: left 0.2s ease; ???????} ???????#window:hover span{ ???????????top:40px; ???????????transition: top 0.2s ease 0.2s; ???????????-webkit-transition: top 0.2s ease 0.2s; ???????} ???????#window:hover div{ ???????????transform:scale(1); ???????????-webkit-transition: transform 0.5s ease 0.2s; ???????} ???</style></head><body><div id="window"> ???<span>DEMO</span> ???<div></div></div></body>
你来我往,CSS animation
原文地址：https://www.cnblogs.com/mhxy13867806343/p/8447177.html