<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> * { margin: 0; padding: 0; } /* 会旋转的盒子样式开始 */ .box { overflow: hidden; position: relative; width: 200px; height: 200px; border: 1px solid pink; } .box::after { position: absolute; top: 0; left: 0; content: "文字"; width: 200px; height: 200px; background: pink; transform: rotate(90deg); transform-origin: left bottom; transition: all 0.4s; } div:hover::after { transform: rotate(0deg); } /* 会旋转的盒子样式结束 */ /* 会缩放的盒子样式开始 */ li { list-style: none; float: left; text-align: center; width: 40px; line-height: 40px; margin: 20px 20px; height: 40px; border: 1px solid #000; border-radius: 50%; transition: all 0.3s; } li:hover { transform: scale(1.2); } /* 会缩放的盒子样式结束 */ /* 仿热力图坐标发光样式开始 */ @keyframes scale { 70% { width: 40px; height: 40px; opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; } } .city { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .dottod { width: 8px; height: 8px; background: dodgerblue; border-radius: 50%; } [class^="pused"] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; box-shadow: 0 0 12px dodgerblue; border-radius: 50%; animation: scale 1.2s linear infinite; } .pused2 { animation-delay: 0.4s; } .pused2 { animation-delay: 0.8s; } /* 仿热力图坐标发光样式结束 */ </style> </head> <body> <div class="box">会旋转的盒子</div> <h3>会缩放的盒子：</h3> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <h3>动画</h3> <div class="city"> <div class="dottod"></div> <div class="pused1"></div> <div class="pused2"></div> <div class="pused3"></div> </div> </body> </html>