css 相关问题

我在 div 中有一个图像，使用我在 div 中有一个图像，使用 <div style="background-image: url(...);></div> 相当大。我想在背景图像中做一些运动。所以我想放大一点并做一些翻译，所以看起来图像移动了一点。我希望它无限循环。我尝试过将 Animate.css 与 <div class="animated pulse infinite"></div> 一起使用，但我不希望 div 移动，只希望 div 内的背景照片移动。脉冲效果也有点过分了。我只是想让它有一点动静。也许只是沿 x 方向向左平移，然后向右平移编辑我已经尝试过了 @keyframes animatedBackground { from { background-size: cover; background-position: 50% 22%; } to { background-size: cover; background-position: 100% 22%; } } 但是如果我使用background-size: cover似乎不起作用？编辑2 我发现它确实有效，但宽度是 100%，所以如果我使用 background-position: 50% 22%; 或 background-position: 100% 22%; 没有任何区别，但如果我改变 y 方向，它确实有效:-D 但是如果我将动画时间设置为超过 5 秒，它会变得非常滞后。有什么办法可以避免延迟吗？您可以使用 CSS3 @keyframes 来制作 background-position 的动画，例如： @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } } #animate-area { width: 200px; height: 200px; background-image: url(https://picsum.photos/400/200); background-position: 0px 0px; background-repeat: repeat-x; animation: animatedBackground 10s linear infinite alternate; } <div id="animate-area"></div> 有关 CSS 动画的更多信息，请参阅 MDN。 html, body { height: 100%; margin: 0; } .outer { height:100%; overflow: hidden; } .inner { height:200%; width:100%; -webkit-animation:mymove 5s linear infinite; /* Safari and Chrome */ animation:mymove 5s linear infinite; background-image: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg'); background-size: 100% 50%; } @-webkit-keyframes mymove { from { background-position: 0% 0%; } to { background-position: 0% -100%; } } @keyframes mymove { from { background-position: 0% 0%; } to { background-position: 0% -100%; } } <div class="outer"> <div class="inner"></div> </div> #horizontal { width: 200px; height: 200px; background: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg'); -webkit-animation: backgroundScroll 20s linear infinite; animation: backgroundScroll 20s linear infinite; } @-webkit-keyframes backgroundScroll { from {background-position: 0 0;} to {background-position: -400px 0;} } @keyframes backgroundScroll { from {background-position: 0 0;} to {background-position: -400px 0;} } <div id="horizontal"></div> 在主 div 中放置一个 div。您正在从框架中看（可以这么说 - 想想相框）。为内部div设置动画。您可以通过在CSS中使用@keyframe动画来做到这一点。这里有一些非常简单的例子：http://codepen.io/webdevpdx/pen/LNobWW 基本上，您声明了您的 div，然后您希望该 div 运行 1 个动画需要多长时间，包括供应商前缀： #box { -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ } 然后声明动画关键帧。您告诉动画在某些点应该是什么样子。您必须指定多少个点取决于您想要执行的动画。这是一个简单的淡入淡出动画： @-webkit-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } 您可以在以下位置阅读有关该主题的更多信息：CSS Tricks 或 W3CSschool 一个建议是使用伪元素。它不会遇到与背景图像相同的问题，并且可以在标记中为您节省一个额外的元素 .anim { position: relative; width: 200px; height: 200px; overflow: hidden; } .anim::before { content: ''; position: absolute; left: 0; top: 0; width: 200%; height: 200%; background: url(http://lorempizza.com/400/400/3) no-repeat center bottom; animation: anim 15s linear infinite alternate; } @keyframes anim { from { transform: scale(1) translateX(0); } to { transform: scale(1.5) translateX(-50%); } } <div class="anim"></div>

javascript jquery html css

回答 5 投票 0

HTML5 视频忽略 z-index

这就是我到目前为止所尝试的：这就是我到目前为止所尝试的： <div id="video" style="position:absolute;margin-top: 231px;margin-left: 127px;"> <video width="520" height="390" style="z-index:-10;"> <source src="m/video.ogv" type="video/ogg"> <source src="m/video.mp4" type="video/mp4"> </video> </div> 我有一个固定的菜单，当菜单位于视频上方时，视频似乎忽略了 z 索引。我目前在 chrome windows 上工作，但运气不佳。有什么想法吗？对重叠的两个元素使用 css position:absolute 属性，并尝试为 0 赋予高于 z-index 的值这是 jsFiddle 的工作示例。 CSS： #main_container { float: left; position: relative; left:0; top:0; } #video { position: absolute; left: 0px; top: 0px; min-height: 100%; min-width: 100%; z-index: 9997; } #overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 9998; } html: <div id="main_container"> <div id="overlay"></div> <video id="video" width="" height="" controls="controls" loop="loop" autoplay=""> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> </div> 注意：使用覆盖 div 来停用控件，您可以使用视频上的任何内容，如 jsFiddle 示例中所示。来源：视频作为网站上的背景，按命令播放在您的覆盖/菜单元素上，使用： backface-visibility: hidden; 这对我有用。我的猜测是它会触发元素上的 3D 渲染，从而消除 z-index 问题。叠加层也需要是视频的同级。如果视频是叠加层的子视频，则它将不起作用。作品： <div id="container"> <div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;"> </div> <video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video> </div> 不工作： <div id="container"> <div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;"> <video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video> </div> </div> 我只在 Chrome 中尝试过这个，所以如果这不是普遍正确的话，我深表歉意。 @media (max-width: 48em) { .primary-navigation { position: fixed; inset: 0 0 0 30%; z-index: 1000; background: steelblue; flex-direction: column; padding: min(30vh,10rem) 2rem; background: hsl(0 0% 0% / 0.75); transform: translateX(100%); transition: transform 350ms ease-out; } .mobile-nav-toggle { display: block; position: absolute; background: url('assets/images/menu.png'); background-repeat: no-repeat; border: 0; width: 3rem; aspect-ratio: 1; top: 0.2rem; right: 1rem; z-index: 9999; } }

javascript jquery css html

回答 4 投票 0

垂直 fancyapp 轮播不起作用，有关如何解决此问题的任何提示吗？

我正在构建一个与平常略有不同的轮播，为了实现这一点，我需要它是垂直的，因为它的动画，但在构建其他任何东西之前，fancyapp的轮播模块...

javascript html css carousel fancybox

回答 1 投票 0

如何使用 Clip-path 或 skew css 对图像进行对角剪切，使其与示例图像相似，并避免那些空格并加入

如何使用剪辑路径避免剪切中的空白，或者可以使用 CSS 倾斜来做到这一点，或者如何使设计与图像中的图像相似，图像彼此相邻。 .

html css

回答 1 投票 0

为什么只有当通过服务器访问 HTML 文件时我的 CSS 才不被应用？

我的 CSS 按预期工作，但通过服务器加载时它不再工作。编辑：好的，我会再试一次，我已将所有内容简化为一个简单的 Express 服务器、一个 html 文件和一个 css 文件：

html css

回答 1 投票 0

自定义轮廓和输入文字颜色问题

我遇到了 css 问题。因此，当我从输入中删除颜色时，轮廓会正常工作，但是当我添加 color:white 时，它首先显示默认轮廓，颜色为白色，然后才是书面的

css input sass outline

回答 2 投票 0

如何通过onsubmit起作用的函数来显示dom元素？

我正在使用 Javascript 和 CSS 制作带有用户输入的贺卡。我需要能够将用户在表单中提交的信息填充为下面的卡片。我有一些 CSS 分配...

javascript html css dom

回答 1 投票 0

占位符显示的伪类似乎不适用于 safari

当我使用 :not(::placeholder-shown) 时，:NOT 似乎在 safari 浏览器中不起作用。如果你没有使用 safari：下面我添加了一种使用 safari 浏览器与 playwright 的方法，以便你可以测试一下...

css pseudo-class

回答 1 投票 0

如何在 TailwindCSS 中拥有动态“主要”类？

我的网站需要一个来自数据库的动态主题，可能的值为 theme-1、theme-2 等，我希望每个主题都能更改网站的调色板，即主尾部。 ..

javascript css tailwind-css

回答 2 投票 0

如何接受 iframe 中的点击但忽略从父页面的滚动

我在网页中嵌入了多个 iframe。在父页面上滚动时，一旦鼠标光标位于其上，滚动就会停止并开始转发到 iframe。我知道我可以...

javascript html css

回答 1 投票 0

如何使用 CSS 在表头中用空格将单词换行？

我有一个 Angular 的 Mat-Table。以下是标题 HTML 代码。我有一个 Angular 的 Mat-Table。以下是标题 HTML 代码。 <ng-container matColumnDef="{{column}}" *ngFor="let column of columns; let j=index"> <mat-header-cell *matHeaderCellDef class="table-header"> <div *ngFor="let option of options"> <div class="table-header-title">{{option.title}}</div> </div> </mat-header-cell> </ng-container>  标题列的标题来自我的后端 API ({{option.title}})。每个标题通常包含两个字符串，例如“Some event0”； “一些事件1-5”； “一些事件50-500”等。当我调整窗口大小时，文本将换行为两行。我想要的是，当它换行成两行时，它应该保持单词完整。例如，如果窗口宽度减小时文本“some events50-500”被换行为两行，则第一行应为“some”，第二行应为“events50-500”。但是现在第一行显示“Some events5”，第二行显示“0-500”。或者它在第一行显示“一些事件”，在第二行显示“50-500”。我希望纯 CSS 按空格分割文本并相应地换行。我不想重写表头的列数组。我想要纯CSS... 抱歉。那不存在。有一个开放的问题，用于标准化 CSS 中的解决方案来处理这种情况，但它还没有实现。我不想重写表头的列数组。您现在最好的选择可能是用不间断的连字符替换连字符。看起来像这样： <div>Some event0</div> <div>some events1‑5</div> <div>some events50‑500</div> 现在，很明显您正在动态构建此 HTML，因此我建议在 Angular 模板中采用以下方法之一： <div [innerHTML]="option.title.replace(/-/g, '‑')"></div> <div>{{ option.title.replace(/-/g, '‑') }}</div>

html css

回答 1 投票 0

css 相关问题

最新问题