用纯CSS绘制动画弧线
我知道可以在SVG和画布中绘制和动画弧.但是,在CSS中可能吗? 我使用以下方法创建了一个弧: .arc{ width:150px; height:400px; border-radius:50%; border-right:1px solid black; border-left:1px solid black; border-top:1px solid black; border-bottom:1px solid white; } 但是,我该如何动画?我能想到的唯一方法是在其上有一个纯白色的div,然后向右滑动,逐渐揭示了弧线.有更好的方法吗? 解决方案 这里是使用最少的硬编码变量的工作演示.这是基于动画圆的一半来工作的: .circle { display: inline-flex; overflow: hidden; } .circle__half { height:
0 2024-02-26
编程技术问答社区
带有水滴阴影和边框的圆形CSS形状
更新,所以我刚刚发现了椭圆边界半径.取得了几乎相同的结果,但是边界与省略号变厚,因此,如果有人知道关于更好的方法,我仍在寻找. 小提琴中使用的代码 border-bottom: 3px solid green; -moz-border-radius-bottomleft: 70% 40px; -webkit-border-bottom-left-radius: 70% 40px; -webkit-box-shadow: 0 3px 7px 0 rgba(0,0,0,0.91) ; box-shadow: 0 3px 7px 0 rgba(0,0,0,0.91) ; 原始帖子 我想知道是否可以创建类似于下面的形状 形状将与图像重叠.我知道我可以使用border-bottom-left-radius创建一个conngular Div,然后给出border-bottom: 3px solid green和drop-shadow,但是边界半径并没有真正达到与上图中的一个相
8 2024-01-15
编程技术问答社区
带有可点击项目的CSS3圆圈 jQuery(Radial Menu)
我可以在哪里找到一个示例来创建一个使用CSS3和jQuery(用于导航)的圈子 中心应该有文本(html) 当您单击(或悬停)下一个项目时,中心内容应更改,背景颜色也应更改 解决方案 摘自Codepen /** * Circular menu v2 */ * { margin: 0; padding: 0; } html { font: 100%/1.3 Century Gothic, Verdana, sans-serif; } body { overflow: hidden; min-width: 20em; } .menuopt { display: none; } .circle, .circle:before, .circle:after { border-radius: 50%; } nav { margin: 5em auto; min-width: 16em; width: 72%; max-width: 40em; }
2 2024-01-13
编程技术问答社区
使用jquery和CSS绘制十字符号
我使用JavaScript在运行类型上创建了DIV元素来绘制不同类型的形状.我正在使用jQuery和CSS在项目中绘制形状和类似的形状.钻石的以下代码. $(symbol).css({ "width": options.ShapeSize.width/2, "height": options.ShapeSize.height/2, "left": (evt.startX), "top": (evt.startY), "border-style": "solid", "background-color": options.Style.Color, "border-color": options.Style.BorderColor, "margin": "3px 0 0 30px", "transform": "rotate(-45deg)", "transform-origin": "0 100%",
0 2024-01-13
编程技术问答社区
自定义瓢状边框风格-响应式,自定义和动态边框风格-适合高度,自定义边角-双笔画
有什么方法可以在CSS或JQuery中制作自定义的Scoop边框样式? 喜欢下图: 解决方案 这是小提琴... a> 这个适合您吗? body { background: #D8D8D8; } .corner { background:white; height:20px; width:20px; position:absolute; } #sw { left: -2px; bottom: -2px; border-radius: 0px 20px 0px 0px; border-top: 2px solid white; border-right: 2px solid white; background:#D8D8D8; } #se { right: -2px; bottom: -2px; border-radius: 20px 0px 0px 0
2 2024-01-13
编程技术问答社区
从DIV中切出的CSS椭圆形状
上面的图像是我要创建的图像,但是椭圆形的形状有一些困难.解释: 菜单栏是一个div,带有轻微的线性梯度(深灰色至透明浅灰色) 公司徽标图像具有透明的BG,将坐在菜单栏的" Ontop" 椭圆形切口将需要匹配徽标的椭圆形,并在其中具有透明的差距,将显示背景颜色(每页上的更改,橙色只是一个示例) 我尝试了径向梯度多次尝试并失败了 - 我能够切出一个圆圈,但无法弄清楚如何使其椭圆形,然后无法使线性梯度工作.请参阅代码: .circle { height: 10em; background: radial-gradient(circle 50px at 50% 100%, transparent 50px, rgba(84, 82, 94, 0.8) 50px); background: -webkit-radial-gradient(50% 100%, circle, transparent 50px, rgba(84, 82, 94, 0.8)
2 2024-01-12
编程技术问答社区
Css箭头进度条
我目前正在学习有关CSS的所有过程,因此我正在尝试生成具有不同功能的不同形状. 我目前正在从事一个项目,该项目需要一个水平箭头以显示事务的"进度". 所以我试图生成一个箭头"进度栏",例如: |\ | \ +----------------+ \ |XX| 10% > +----------------+ / \ | / \ |/ \the XX's depict a different color. 我目前可以"填充"直到箭头,但是我生成箭头的方式,我似乎也无法将其"填充"(即,在〜90%,一半,一半物理头应该已经满) - 而不是整个事情. 我的当前片段: .arrow{ margin:0 auto; height:100px; width:200px;
2 2024-01-12
编程技术问答社区
没有宽度或高度的CSS圆圈? : 纯粹的CSS是否可以这样做?
我可以将Div变成这样的圆圈: .circle { background-color: rgba(0, 0139, 0139, 0.5); height: 200px; width: 200px; -moz-border-radius:50%; -webkit-border-radius: 50%; border-radius:50%; } ,但我必须指定宽度高度: 我想用" no-wrap"在div中显示三行文本 我想在一个圆的中心显示这些内容,并使圆扩展以适合文本线. 文本线将通过PHP从数据库中拉出,并且角色长度会有所不同. 问题是上面显示的方法仅在指定宽度/高度时起作用. 仅使用CSS使用百分比,或者我需要JS工作. 预先感谢. 解决方案 纯CSS解决方案 这个小提琴仅使用CSS 展示了解决方案.它在现代浏览器中(IE9+,border-rad
0 2024-01-12
编程技术问答社区
是否有可能拥有一个非矩形的div?
我需要在以下形状中形成一个 div标签: 是否可以使其交叉浏览器?我不一定需要圆角.我需要它,这样我就可以在悬停在整个div上更改整个边界的颜色,所以我认为它无法通过使用两个divs. 来实现. 解决方案 是的,您可以使用html和css这样做: http://jsfiddle.net/brofa/364eq/ 本质上是使用三个div来汇总鼠标事件,例如: 我使用A:外部元素上的悬停规则来影响内部divs上的边框颜色: #outer .inner {border-color: red} #outer:hover .inner {border-color: blue} 使用此标记的唯一怪癖是内容区域 - 您在图像中绘制的区域 - 是两个Divs,而不是一个.因此,文本不会按照您期望的方式包装和流
4 2024-01-12
编程技术问答社区
使用html和css创建一个动态的坦克水平/仪表
我目前在我的项目中遇到问题.我正在使用MVC和使用以下标记,我已经实现了: 使用: #container { position:absolute; margin:0; margin-top:-50px; width:100%; padding:0; -moz-perspective: 1000px; /*required to make cylinder shape*/ -webkit-perspective: 1000px; } #frame { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; margin-left:5%; -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(40%, 6
6 2024-01-12
编程技术问答社区
用CSS创建响应式的三角形
我今天试图在CSS中为响应迅速的网站创建三角形,但找不到stackoverflow上的一个很好的例子,所以这就是我的做法. 解决方案 使角形响应能力有点棘手,因为您不能将百分比用作CSS中的border值,因此我编写了几个功能来计算页面宽度并相应地调整三角形大小.第一个计算加载页面时的大小,第二个重新计算大小随着页面宽度的变化. CSS: .triangle { width: 0; height: 0; border-top: 50px solid rgba(255, 255, 0, 1); border-right: 100px solid transparent; } html: JS: $(document).ready(function () { var windowWidth = $(window).width(); $(".tria
4 2024-01-12
编程技术问答社区
CSS折角效果透明背景
我使用CSS折叠角的代码: body { background-color: #e1e1e1 } .note { position: relative; width: 480px; padding: 1em 1.5em; margin: 2em auto; color: #fff; background: #97C02F; overflow: hidden; } .note:before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 16px 16px 0; /* This trick side-steps a webkit bug */ border-style: solid; border-color: #fff #fff #658E15 #658E15; /* A bit mo
8 2024-01-11
编程技术问答社区
带有圆形进度条的倒数计时器
我创建了一个倒数计时器.我得到了一个圆形的边界.随着计时器趋向零,圆形边框应随着几秒钟的降低而改变颜色. 我创建了jsfiddle html 0.00 JS代码 var displayminutes; var displayseconds; var initializeTimer = 1.5 // enter in minutes var minutesToSeconds = initializeTimer*60; $("#document").ready(function(){ setTime = getTime(); $(".btn-timer").html(setTime[0]+":"+setTime[1]) }); $(".btn-timer").click(funct
0 2024-01-11
编程技术问答社区
Bootstrap Jumbotron底部的CSS箭头
我正在尝试使用边框创建一个CSS形状,以表示下图中的黑色形状.. 黑色的形状将坐在(或越过)bootstrap jumbotron.红色区域是背景图像. 我一直在尝试以下代码,这给了我一个箭头,但不是我需要的形状(也许是两个箭头?). 任何帮助. .jumbotron:after { content: ""; position: absolute; top: 100%; left: 0; border-bottom: 60px solid red; border-left: 50vw solid transparent; border-right: 50vw solid transparent; } 解决方案 使用@iwrestledabearone模板,这是底部有一种箭头. bootply : CSS : .yomama{ background-image: url(https://i.stack.imgur.com/O
4 2023-10-28
编程技术问答社区
CSS响应式斜边
我正在创建一个基本的网页,但是对于页脚来说,将会有一个倾斜的边缘,该边缘将在页面底部运行.我遇到问题的地方,因为您无法在边框上添加100%,因为我正在使用Bootstrap,因此该页面必须响应迅速.有没有办法实现这一影响,同时反应迅速. div { width:200px; height:80px; background: red; top:150px;left:100px; position: relative; } div:before { content: ''; position: absolute; top: 40px; right: 0; border-right: 200px solid white; border-top: 40px solid red; width: 20; } http://jsfiddle.net/2bzaw/3675/ 解决方案 这应该对您有用.同样,我使用了一个伪元素来改变颜色,但是一般共识是相同的.链接
8 2023-10-28
编程技术问答社区
有没有可能给bootstrap btn一个5分?
我希望使Bootstrap BTN看起来有些不同,因为其底部的底部有5点.我知道可以使用以下方式以这样的方式这样做形状,并且以下工具和转换之后,但我想将文本放在其中,这就是为什么我遇到这么多麻烦的原因.是否可以直接与BTN类打交道以实现这种效果? ://i.stack.imgur.com/hqhed.png" alt ="在此处输入图像说明"> 解决方案 您可以使用SkewY,如下演示中所示: div { height: 100px; width: 500px; display: inline-block; border: 10px solid green; border-bottom: none; text-align: center; line-height: 100px; position: relative; color: green; font-size: 20px; } div:before, d
6 2023-10-28
编程技术问答社区
创建底部响应的箭头
我需要用向下箭头创建网格.请参阅下图: 问题是DIV由于.col-xs-3而具有可变宽度.我如何将箭头(:after元素)提供适当的宽度,以使其仍能响应? 我的CSS : .grid-arrow::after { content: " "; display: block; width: 0; height: 0; border-top: 47px solid transparent; border-bottom: 47px solid transparent; border-left: 40px solid rgb(173, 173, 173); position: absolute; /* top: 50%; */ margin-top: -37px; /* margin-left: 1px; */ left: 50%; z-index: 3; -webki
6 2023-10-28
编程技术问答社区
背景正方形,有一个边的角度
我希望能够仅使用CSS创建透明的背景,但在一端具有角度.我找到了各种尝试这样做的方法,但不能完全理解它.我真的不想使用任何脚本,只有CSS. 背景图像需要看起来像: 解决方案 您可以使用边界: http://jsfiddle.net/wnhjb/ #shape { height: 0; width: 80px; border-top: 80px solid blue; border-left: 40px solid transparent; }
22 2023-10-25
编程技术问答社区
右边的梯形轮廓形状(有透明度)。
我正在尝试模仿类似于 此图像 . 我正在这样做的方式是使用两个梯形形状,而与,但我意识到我希望形状的休息 透明,而不是能够重叠其他对象. 核心只是CSS, Outlinemaker div righttrapezoid div. .rightTrapezoid { border-bottom: 100px solid red; border-left: 0 solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; } .outlineMaker { border-bottom: 80px solid white; border-left: 0 solid transparent; border-right: 40px solid transparent; height: 20px; wi
4 2023-10-25
编程技术问答社区