【Vue】图片拉近、全屏背景实战经验总结

作者：游坦之

2022-10-18
山东
本文字数：1553 字
阅读完需：约 1 分钟

1 图片拉近

缘起是看到了下面的图片，我发现当鼠标悬浮的时候，发现他是可以拉近的，也就是图片的宽高不变，但是图片被放大了

起初我以为是有一个这样的方法，可以实现这个操作，但是查找了很多网站都没有找到。

后来自己慢慢的摸索，才了解了其中的奥妙

子盒子和父盒子的大小一样大，为了能体现出父子盒子，我让父盒子略大，并未黄色，子盒子为白色

当鼠标悬浮到该子盒子的时候，子盒子被放大（scale），如下图

同时，我设置子盒子超出父盒子的部分隐藏（overflow:hidden），这样我只能看到黄色部分，但是图片却被放大了，就看到了最初的效果，图片好像被拉进了

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <link rel="stylesheet"  href="mystyle.css"/>  </head>  <body>    <div class="div1">      <img src="../作业2/images/5.jpg" class="div2">    </div>  </body>  <style type="text/css">  .div1{    margin-top: 50px;    margin-left: 50px;    height:400px;    width: 400px;    border: 1px solid red;    overflow: hidden;    }   .div2{     width: 400px;     height: 400px;     background-color: #0000FF;     cursor: pointer;   }   .div2:hover{     transform: scale(2);   }  </style></html>

复制代码

这样似乎太突兀了，我们加一个实现的时间 1s transition: 1s;

这样就舒服多了

写这一篇博客，我发现这个图片功能太简单了。我自己用 vue 做的时候，用的是 @mouseover @mouseout 需要两个方法
让其有 1s 动画效果的时候，我用的是根据类名获取元素，然后鼠标悬浮的时候给他加上动画的效果。
但是动画的效果默认是不会保存的，间隔一秒后又会回到初始化的状态，所以又加了一句 animation-fill-mode:forwards，让其保持动画的状态。
写这篇博客之后，原来只需要几行代码就解决了！

2 全屏背景

<template>  <div id="app">      </div></template>
<script>
export default {  name: 'App',}</script>
<style>body {    margin: 0;    background: #e8e8e8 url('@/assets/oprea_background02.png') center bottom;    /* 设置背景图片会不会随着屏幕滚动 */    background-attachment: fixed;    /* 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 */    background-size: cover;    /* 去掉好像也没什么 */    display: flex;    /* 设置height:100vh，能够保证元素无论是否有没有内容，高度都等于屏幕高度。 */    min-height: 100vh;    flex-direction: column;}
</style>