css3

0热度

1回答

通常情况下，我曾经用html嵌入SVG代码，用CSS3动画。但现在的问题是我有很多的标志和图标添加到一个单一的HTML页面。在这里，它看起来太多的源代码。这就是为什么我倾向于使用对象标记来减少源代码，但我不知道如何动画SVG与对象标记。下面的代码只是两个图标，它已经很多了。 svg:hover path { stroke-dasharray: 200; stro

2热度

1回答

同时淡入和淡出两个不同元素的转换

我是Vue js和转换的新手，我正在设计一个Vue组件，我打算将数据从服务器中缓慢加载，这样当数据不可用时，显示加载gif。它工作得很好。但是，当我添加一个简单的淡入淡出转换来使加载gif淡出并且当数据可用时内容淡入（反之亦然）时，当出现另一个时，内容和gif互相推上或推下，消失。这是我Lazy.vue组件文件： <template> <div class="fixed-pos">

0热度

2回答

使用十六进制值在反应风格backgroundColor中添加不透明度？

我想解析一个Javascript中的变量值到React style属性。但是，看起来只能用rgba值添加不透明度？说我有： const blueColor = "#2c8da9" 现在我想将它添加到JSX背景颜色属性与0.2的不透明度。我可以用RGBA做到这一点，但它并不好看： backgroundColor: rgba(blueColor, 0.2) 有没有一种方法来达到同样的，直接引用的十

-2热度

1回答

使用增加/减少无线电输入

我想：推在大的输入上/下按钮应该增加/减小值。当点击价格下方的单选按钮时，价格应该被替换为选定的值。 .priceBlock { width: 80%; border-radius: 4px; background-color: white; text-align: center; box-shadow: 0px 0 40p

0热度

1回答

儿童DIV -margin并没有忽视父母的填充

我想内部div来填补外层div。我被告知在孩子身上使用负填充，这听起来合乎逻辑，但在我的情况下不起作用。我相信这是由于我在父母和子女的使用过渡。我有孩子从透明到不透明的悬停。我有孩子的背景图像从父母的背景图像过渡。我想填充添加到父，这样我可以自定义div的高度，但是当我这样做，孩子不填充父。当我给孩子添加负边距时，没有效果。 .outer{ font-size: 2em; \

1热度

2回答

带透明填充物的角DIV

我正在试图制作一个角块，以创建一个如下图所示的单页。但我遇到了一个问题。我试图让div斜坡，但当看着不同的决议，它看起来歪曲。 What i need screen （也有在这些倾斜的div有一个背景图像和一些孔，其离开这个div前一个问题，画面显示通过。）My Fail Screen .tri-index-right { background: #fff; heig

1热度

2回答

图像填充整个div而不是只填充标题下方的空间

我试图用图像填充容器中标题下方的空间。问题在于图像用图像填充整个容器，而不是到达标题位置并停止。这里是我的代码： .container { height: 100vh; } .showcase { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../i

1热度

1回答

网格属性无法在网格容器内的元素上工作

我试图在最上面的ul上创建的CSS网格上定位嵌套的li（ul li ul li）。没有爱（它不工作）。也许这是不可能的，或者我错过了什么？ #orgChart ul.orgChartLevel1 { display: grid; grid-template-columns: 12px auto; grid-template-rows: 100px auto

0热度

1回答

使用CSS flexbox放置顶部/开始使用孤立元素的高效方法

当您使用flexbox wrap创建网格并且最后一行的元素少于之前的行时，“孤立”元素的默认行为flex: 1将水平拉伸以填充宽度 - 使元素大于先前的行。我想要相同的行为，除了我希望较大的项目出现在顶行而不是底行。我已经想出了一个解决方案（如下所示），但它不能很好地扩展，感觉像一个糟糕的黑客攻击。有没有更好的（更优雅）的方式来实现这种布局？该解决方案需要处理动态内容;即，我不会事先知道元素的数

-1热度

1回答

如何在多个ID或类

我尝试应用CSS属性选项应用CSS元素属性：禁用在多个ID，但其仅在最后一个ID 申请我尝试两种方式 select#id1, #id2, #id3 , #id4,#id5 option:disabled{ color: #333336; } select#id1, #id2, #id3 , #id4,#id5 > option:disabled{ color: #3333