一款鼠标悬停时动画效果，附源码

最新推荐文章于 2024-11-11 19:29:13 发布

Deeper520

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量445

点赞数 5

文章标签： javascript 学习开发语言 css3 动画

本文链接：https://blog.csdn.net/zhudapeng929/article/details/141953581

版权

今天练习的最终效果：

今天练习的完整源码：

HTML：

<!DOCTYPE html><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>

CSS：

* {  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("自定义图片路径");  border-right: 1px solid #804a00;}.middle {  font-size: 0rem;  
  background-image: url("自定义图片路径");
}.right {  
  background-image: url("自定义图片路径");  
  border-left: 1px solid #804a00;}
#grid:hover {  grid-template-columns: 0fr 1fr 0fr;}