今天练习的最终效果：
<html lang="en" ><head><meta charset="UTF-8"><title>【每日一练】第310练 | 一款鼠标悬停时动画效果，附源码</title><link rel="stylesheet" href="./style.css"></head><body><!-- partial:index.partial.html --><div id="grid"><div class="left"></div><div class="middle"></div><div class="right"></div></div><!-- partial --></body></html>
* {padding: 0;margin: 0;box-sizing: border-box;transition: 0.5s ease;}body {min-height: 100vh;display: grid;place-items: center;gap: 4rem;background: #b8860b;}#grid {width: calc(100% - 20vmin);aspect-ratio: 16 / 7;background: linen;display: grid;grid-template-columns: 1fr 0fr 1fr;place-items: center;outline: 2px solid #804a00;border-radius: 5vmin;box-shadow: 0 1rem 2rem -1rem rgba(68 50 4 / 1);overflow: hidden;}.left,.right,.middle {width: 100%;height: 100%;background-size: cover;background-position: center;transform-origin: center;}.left {background-image: url("https://assets.codepen.io/4787486/hamster-3.jpg");border-right: 1px solid #804a00;}.middle {font-size: 0rem;background-image: url("https://assets.codepen.io/4787486/hamster-4.jpg");}.right {background-image: url("https://assets.codepen.io/4787486/hamster-2.jpg");border-left: 1px solid #804a00;}#grid:hover {grid-template-columns: 0fr 1fr 0fr;}
以上就是【每日一练】的全部内容，希望今天的练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
推荐阅读
学习更多技能
请点击下方公众号
