【CSS_在练习中提升】01_扩展盒子

最新推荐文章于 2022-12-20 16:00:25 发布

我要手撕源码

最新推荐文章于 2022-12-20 16:00:25 发布

阅读量338

点赞数 2

分类专栏： # CSS 文章标签： css html js flex

本文链接：https://blog.csdn.net/weixin_48171371/article/details/119799229

版权

这篇博客探讨了如何使用CSS实现图片点击放大、其他图片缩小的动画过渡效果。主要内容包括HTML结构、JS交互以及核心CSS代码，特别是图片的完美居中、字体定位和利用flex计算放大比例及transition和opacity实现的过渡动画。

摘要由CSDN通过智能技术生成

实现效果

点击图片就进行放大(其他图片缩小)

动画过渡效果

完美居中

文字嵌在左下角

图片撑开元素

在这里插入图片描述

代码

HTML

这部分较为简单，稍微看一下即可
1.在head标签中引入css样式

<link rel=“stylesheet” href=“style.css” />

2.在底部引入js文件

<script src=“script.js”>

3.中间为图片和文字的标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Expanding Cards</title>
  </head>
  <body>
    <div class="container">
      <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3>Explore The World</h3>
      </div>
      <div class