如何使用CSS过渡使背景从中心向外缩放

文章/答案/技术大牛

发布

4回答

css、css-transitions

我正在尝试复制当您使用Material UI的日期选择器here (单击任何文本输入触发选择器，然后将鼠标悬停在一天上)的日期时的效果，其中背景从中心向外扩展。我试着从这里复制CSS，但我只能做到相反的效果。请参阅：https://jsfiddle.net/2zkofa0x/3/ 我的CSS： span:hover { background: rgba(0, 151, 167border-radius:

浏览 55提问于2016-11-30得票数 1

回答已采纳

3回答

悬停中心填土单元

css、button、css-transitions、css-shapes

我如何创建一个按钮，使在悬停背景颜色填充元素从中心到左和右的元素。我知道如何使用CSS3 transitions，并且可以将其动画到所需的形状，但不能使它从中心向外过渡。

浏览 1提问于2014-05-29得票数 17

2回答

在独立文本块上缩放网站背景图片大小

html、css

当你按下CTRL键并向外滚动时，我正在使用的网站是，背景图像的缩放方式是“关于”部分的文本在图片前面向上移动。我尝试过调整元素的大小和位置，但我不知道该怎么做，也不知道如何使背景图片缩放并保持与欢迎文本区域的比例。干杯。

浏览 4提问于2015-08-15得票数 0

1回答

KineticJS图像变焦

canvas、kineticjs

目前我正在使用为了放大，但是这只是突然改变了背景图像的大小。有没有任何方法使这个过程更像动画(比如使用css和过渡容易)，或者简单地说比突然切换更平滑。我考虑过使用增量缩放和重绘形状，但这似乎相当密集，它已经相当缓慢地运行。谢谢!

浏览 0提问于2013-11-23得票数 0

回答已采纳

4回答

当缩放背景图像时，它在Chrome中开始闪烁

javascript、html、css、gsap

我有一个带有背景图像的div。当它有简单的变换比例动画时，它开始在Google Chrome和Opera中闪烁。下面是一个简单的示例： body { overflow: hidden width: 100%;你知道如何使它与背景</em

浏览 1提问于2017-04-20得票数 3

1回答

基于集装箱定位的方向标度

javascript、html、css

(我有点喜欢这个想法，因为它允许我使新的div与下面的内容不同) 正如您所看到的，默认的行为是，当我们缩放时，我们与左边对齐，而额外的宽度将向外向右移动，而额外的高度则向下移动。这方面的问题是，在最右边，缩放的div已经这样做了，但是由于它的位置/方向，它现在已经离开并向右(容器外)。同样的，我也希望两个中心的div从中间而不是

浏览 5提问于2022-09-23得票数 0

回答已采纳

1回答

HTML5 5/CSS-将大图像放入较小的DIV中

html、css

我们如何把一个大的图像放到一个小的div中，以h对齐/v对齐为中心。图像不应在div (类型为overflow:hidden)之外可见。此外，div将根据页面大小更改其大小。我接受了其他问题/答案的帮助，并尝试使用div背景和css --但它只是将图像与h中心对齐。如何使h-心和v-心对齐？此外，不应该有任何垂直滚动条。只有CSS才有可能？

浏览 3提问于2013-10-25得票数 1

回答已采纳

1回答

如何使用CSS和JS同时将in-和-out转换效果添加到多个模式？

javascript、css、modal-dialog、transition

当模态出现时，网格区域的背景只会变暗。我被要求不要使用任何额外的库(例如，jQuery)。过渡效应适用于向外过渡，而不是向外过渡。我想我是在想这个任务，所以很感谢你的任何建议。<style type=&quo

浏览 0提问于2019-05-07得票数 0

回答已采纳

1回答

基于背景图像变化的Greensock衰落

javascript、jquery、gsap

我以前从未使用过GreenSock。背景图像变化很好，它切换和缩放，但我所面临的问题如下： i = 0;

浏览 2提问于2015-08-20得票数 0

回答已采纳

4回答

使用jQuery在淡入淡出时缓慢设置按钮动画

jquery、css

我有一个输入按钮，其中有一个来自css的图像。当悬停或单击输入按钮时，来自css的图像会改变其背景位置。input:hover { background-position: 0 -60px; }如何使用jQuery使过渡变得缓慢平滑，而不是自动更改？

浏览 0提问于2011-07-25得票数 2

回答已采纳

1回答

使用JavaScript平滑地更改“body”元素的背景图像

javascript、css、background-image、slideshow

我是JS的新手，我正在尝试使用一个简单的JS脚本来转换body{background:;}图像。我希望想出一个更简单的解决方案，利用CSS的background-size:cover属性，而不是将div堆叠在一起，然后更改它们的z-index。使用CSS属性似乎比使用时更好地缩放背景图像(我是一个新手，我可能错了，而且很幼稚)：我的问题是，我如何使用下面的代码来更

浏览 2提问于2014-09-07得票数 1

1回答

我如何模拟css背景图像的行为，而不是使用具有绝对定位的div，在它的相对容器中进行缩放？

javascript、html、css、css-transitions、css-position

我已经成功地创建了这个功能，包括转换，使用一个具有相对定位的容器，该容器包含具有绝对定位的图像：。这个解决方案的问题是，我无法解决如何缩放容器内的图像，以便当它增长和缩小时，它会根据容器的大小调整大小。如果它具有以下属性，我希望它的行为像css背景图像： background-size: contain; back

浏览 5提问于2022-09-15得票数 1

1回答

jQuery全屏最小背景图片大小

jquery、css、resize、fullscreen

我正在使用jQuery全屏插件来实现全屏背景图像，它可以根据浏览器窗口大小调整()动态缩放。它对我来说一直运行得很好。在此特定项目中，当单击每个链接时，背景图像会发生变化。这是一个单页面站点，使用jQuery ScrollTo插件单击菜单项时会滚动。我很难弄清楚如何设置最小的背景图像宽度。如果浏览器窗口变得足够小，背景图像中的白色会干扰白色文本。我想设置一个最小宽度，使背景图像缩放到某个点，然后停

浏览 1提问于2012-11-13得票数 0

回答已采纳

1回答

iOS设备上已扩展、固定的背景

css、ipad

我正在尝试制作一个“背景”图像，它既能缩放以充满整个屏幕，又是固定的(即不会与其他内容一起滚动)。我从尝试使用真实的背景图像开始：-webkit-background-size因此，我使用CSS和div尝试了这种方法：#fixedbg{ background:url(&#x

浏览 0提问于2013-06-10得票数 1

6回答

CSS3 (或jQuery)从div中心垂直绘制背景彩色动画

javascript、jquery、html、css

颜色从中间打开的方式是我想要的效果，但不幸的是，这个网站是用Flash完成的，所以我没有选择去研究它是如何完成的。我不知道该找什么。我想的是“背景径向动画jquery”或“来自中心jquery.com的背景颜色动画”。我还考虑了CSS3的易用性，就像他们在这里详细介绍的那样()。问题是，这个问题的答案只是显示了当我需要CSS3垂直工作时，它是水平工作的。我与他们使用的JSFiddle ()合作过，但我似乎只能从顶部过渡到动画，而不是从中</e

浏览 5提问于2013-10-14得票数 0

回答已采纳

1回答

如何在使用CSS背景剪辑属性时使过渡工作

javascript、html、css、css-transitions

因此，我有一个渐变段落，我正在使用背景剪辑:文本，但是，我希望它在出现时淡入。当我尝试在不透明度上设置过渡时，它并没有像预期的那样淡入，相反，它会立即出现。我希望不透明度从0过渡到1。我如何在background-clip: text中实现这一点呢？我需要渐变来跨越整个列表，而不是逐行。

浏览 1提问于2021-03-29得票数 1

1回答

使用img属性上的背景图像响应图像

html、image、css、responsive-design

我正在制作一个响应性的网站，我在HTML标记中使用了img属性，这样图像就可以很好地缩放，直到它们被媒体查询所移动。 (类似于这个小提琴，只是我使用了不同的图像。)但是，为了便于更新，我希望将图像路径添加到css文件中，而不是HTML标记中。我觉得img-后台属性会很好。这就是说，我想远离“背景大小”属性，因为旧的浏览器对它不友好。我想在每个缩放类div中创建一个元素。如果i声明一个固定的高度，则div可以水平缩放，但我似乎无法使它自动垂直缩放

浏览 3提问于2014-05-18得票数 1

回答已采纳

1回答

如何让父容器调整其高度以匹配缩放的div

jquery、css、zooming、transform、scale

我使用jQuery根据父容器的尺寸动态缩放div。然而，我在检测高度时遇到了困难。我将parent设置为auto，但它不会在div重新缩放时检测到高度的变化。('zoom', zoom); $square.css(function () { console.log(

浏览 5提问于2013-04-01得票数 1

1回答

调整大小函数只在一维中工作。

javascript、onload、onresize

我有一个调整大小的函数，使主div的大小保持一致。我最初让它根据窗口的宽度进行调整，它工作得很好(函数中的第一个条件)。然后，我添加了第二个条件，如果窗口太短，它会根据高度调整大小。newerHeight + "px"; }</script> #content由背景图像覆盖

浏览 3提问于2015-01-29得票数 1

回答已采纳

2回答

使用html和css的字体大小问题

html、css、menu、screen-resolution、font-size

当我建立我的第一个纯html/css网站时，我使用可点击的图片作为菜单，每个图片和div都以%为单位进行缩放，所以它可以非常好地适应所有的显示器和浏览器，它确实做到了。现在，在一个新的项目中，我想使用整个页面的背景图像(有菜单按钮，但没有文本)来做网站菜单，然后在图像上添加超链接文本，这样看起来就像是一个合适的菜单。所以我认为，如果我只是将字体大小设置为%，它可能会随着浏览器窗口显示部分的大小的增加或减小而完美缩放，它与其他一切都工作得如此完美，所以为什么它现在不能工作呢……

浏览 0提问于2011-08-31得票数 2

回答已采纳

点击加载更多