这是将图像插入动画帧的代码。 除了一个我找不到解决方案的烦人问题外,该代码运行良好。

我想在图片框阴影效果,但意想不到的是,现在的图像 这是.box .content的 box-shadow CSS

box-shadow: 0 0 0.262vh deeppink, 0 0 0.6553vh rgba(0, 0, 0, 1), inset 0 0 0.6553vh rgba(0, 0, 0, 1);

这是代码:(我已经在很多方面尝试过 z-index,但我认为我需要一只手才能正确使用它!)

 const content = document.querySelector('.content'); let image = document.createElement('img'); content.appendChild(image); image.id = 'shot'; image.src = 'https://static01.nyt.com/images/2020/01/30/t-magazine/oakImage-1580415371326/oakImage-1580415371326-superJumbo.jpg'; let shot = document.getElementById("shot"); shot.onload = function() { imageWidth = this.naturalWidth; imageHeight= this.naturalHeight; //console.log(imageWidth, imageHeight); let viewPortClipWidth = imageWidth * (100 / document.body.clientWidth); let viewPortClipHeight = imageHeight * (100 / document.body.clientHeight); //console.log(viewPortClipWidth, viewPortClipHeight); document.querySelector('.box .content').style.width = `${viewPortClipWidth}vw`; document.querySelector('.box .content').style.height = `${viewPortClipHeight}vh`; }
 img { position: absolute; top: 0; left: 0; max-width: 100%; max-height: 100%; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } body { height: 100vh; margin:0; display: flex; align-items: center; justify-content: center; background-color: #11151a; } .box { border-radius: 0.5vh; position: relative; overflow: hidden; } .box::after { content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(-45deg, white 0 0.48828125vw, #f00c36 0 0.9765625vw) 0 0/1.380859375vw 1.380859375vw; width: calc(100% + 1.380859375vw); height: calc(100% + 1.380859375vw); transform: translate(-1.380859375vw, -1.380859375vw); will-change: transform; animation: animate 4s linear infinite; } .box .content { position: relative; max-width: 93vw; max-height: 89vh; box-shadow: 0 0 0.262vh deeppink, 0 0 0.6553vh rgba(0, 0, 0, 1), inset 0 0 0.6553vh rgba(0, 0, 0, 1); margin:0.3vw; } @keyframes animate { to { transform: translate(0, 0); will-change: transform; } }
 <div id='box' class="box"> <div class="content"></div> </div>

  ask by foxer translate from so

本文未有回复,本站智能推荐:

6回复

使用jQuery通过CSS框阴影产生脉冲效果

我正在尝试使用jquery使用CSS盒阴影创建脉冲效果。 我尝试了以下代码,但完全失败了。 我想要实现的是具有盒子阴影的平滑脉冲效果 我尝试过的代码是html 的CSS jQuery的 小提琴http://jsfiddle.net/KXp4D/2/
1回复

框阴影和其他颜色效果在mozillafirefox上不起作用

我创建了带有引导模态类的弹出注册表单。 我使用了一些jQuery验证引擎来验证表单。 然后在其中添加了阴影,并更改了背景色和颜色。 这在Chrome和Internet Explorer上运行良好,但在Firefox上却无法运行。 这是我的表格 这是CSS jQuery-Vali
1回复

渲染性能-图像与css渐变或带阴影的框阴影?

我对网站滚动,动画表现有疑问。 最好在您的移动网络应用或网站中使用: 重复薄图像或CSS3渐变? 要么 用边框重复图像而不是框阴影? 这不是关于兼容性的问题,我只想知道滚动,元素渲染和动画的性能方面。 因为证明了CSS线性渐变对于元素渲染比对背景颜色更重。
3回复

当图像scr为空时删除框阴影[重复]

这个问题已经在这里有了答案: 非空属性的CSS属性选择器 1回答 我想在图像源为空(src =“”)时删除矩形阴影。 如何使用javascript实现此目的? 我认为最好的方法是在源为空白时删除该类,但我不知道该怎么做。 有人知道吗? .property { m
1回复

带框阴影的CSS剪辑图像不起作用

我正在尝试clip图像。 该图像具有box-shadow属性。 我想要的是将clip应用于图像,但我想保留box-shadow ,而不是原始图像,而是clip图像。 我怎样才能做到这一点? 遵循我的HTML / CSS3代码: img { position: absolut
1回复

如何删除由div的背景图像模糊造成的意外框阴影?

我正在尝试使用filter: blur(<x>px)属性filter: blur(<x>px) div 的图像。 我所做的是拥有 3 个 div。 最后面的第一个 div 有一个盒子阴影。 中间的第二个 div(均以 z-index 表示)具有模糊图像。 最前面的 div 有
2回复

使用jQuery提供阴影效果

我想使用jQuery给出叠加和阴影效果。我很难使用它
2回复

Css滚动内容阴影效果

我正在寻找一个插件(类似于我猜的粘性标题),它可以在可滚动内容上创建盒子阴影效果(当你向下滚动时)。 我找到了一种现有技术,它使用纯CSS技巧 ,它完全符合我的需要(使用background-color属性) 但是,可滚动内容超出阴影,我需要它低于阴影。 是否有任何插件可以创建相同的