相关疑难解决方法(0)
双曲线形状
我目前正试图生成一个"波浪幽灵般的底部"形状.此形状包含两条双曲线:
虽然这个图像的底部部分我认为它描绘的是更好的图像.
我的守则
我当前尝试生成此形状是使用伪元素overflow: hidden,虽然这不允许渐变背景(需要简单的背景):
尝试1 - 使用隐藏溢出的伪元素
.bottom {
height: 300px;
width: 300px;
background: lightgray;
position: relative;
overflow: hidden;
margin-top:-150px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.bottom:before, .bottom:after{
position: absolute;
content: "";
background: white;
}
.bottom:before {
height: 150%;
width: 150%;
top: 50%;
border-radius:50%;
left: -45%;
}
.bottom:after {
height: 200%;
width: 100%;
bottom: -40%;
border-radius:50%;
left: 90%;
}<div class="bottom"></div>尝试2 - 使用具有's'形状的伪元素
.bottom {
background: lightgray;
width: 300px;
height: 300px;
position: relative;
overflow:hidden;
color:white;
border-radius:0 100% …推荐指数
解决办法
查看次数
CSS中的波形边框
推荐指数
解决办法
查看次数
在CSS中两个渐变div之间创建曲线的好方法？
我有两个具有不同渐变背景的div,我需要在它们之间创建一个S形曲线.
这是渐变div的示例小提琴:https://jsfiddle.net/JerryGoyal/rjyfc46c/2/
<div id="section1">
</div>
<div id="section2">
</div>
#section1{
height:200px;
background: linear-gradient(to bottom right, #ad3, #add);
}
#section2{
height:200px;
background: linear-gradient(to bottom right, #de350b, #0065ff);
}
我想到了几件事情,但是:
- svg:不知道如何处理其他渐变div.
- border-radius:无法获得真正类似S的曲线加上当我调整屏幕大小时它会变得难看.
- clip-path:某些浏览器不支持https://caniuse.com/css-clip-path
- png image: nope!需要是动态内容.
任何帮助,将不胜感激!
PS:未来读者必读:https://css-tricks.com/creating-non-rectangular-headers/
推荐指数
解决办法
查看次数
CSS波动画文本
这个怎么运作
.png下面显示的图像被剪切为带有动画的文本;
在行动中
body { background: #000000; }
.Wave-Loader {
text-transform: uppercase;
font-family: 'Cabin Condensed', sans-serif;
font-weight: bold;
font-size: 100pt;
text-align: center;
height: 120px;
line-height: 110px;
vertical-align: bottom;
position: absolute;
left: 0;
right: 0;
top: 100px;
bottom: 0;
}
.Wave-Loader.Wave {
background-image: url("http://i.imgur.com/uFpLbYt.png");
-moz-background-clip: text;
-o-background-clip: text;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0px 0px rgba(255, 255, 255, 0.06);
animation: Wave-Loader 1s infinite linear;
background-size: 200px 100px;
background-repeat: repeat-x;
opacity: 1;
}
@keyframes Wave-Loader {
0% { background-position: …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何创建弯曲的css内容分隔符？
我正在开发一个小型的Web项目,并在页面上得到了一个很好的细节:一个弯曲的内容分隔符.通常这些只是线条,但事实并非如此.所以我在思考,如何在CSS或可能的SVG中编写代码,但我不确定它是如何工作的.在这里你可以看到我的意思:
如您所见,上面的灰色内容与橙色曲线完全结束,下方的白色内容部分沿曲线开始.有没有办法用css或svg编码,而不是使用图像？
谢谢!我非常感谢任何帮助.
推荐指数
解决办法
查看次数
如何在 CSS 中实现曲线背景？
我有一个带有曲线背景的登录页面。请参考下图。我想知道从 CSS 编码时的最佳方法。我还需要使其具有响应性，并且我使用引导程序作为 CSS 框架。以下是我所做的。
我使用了 SVG 图像作为背景，并将其与 :before 伪类一起使用以显示在底部。而且我还从 SVG 中删除了宽度和高度，并保留了视图框，并向 SVG 添加了 preserveAspectRatio="xMinYMin meet" 以使其具有响应性。（请注意这些属性未添加到 JSFiddle 中的示例中）
创建这些曲线背景的最佳方法是什么？
.hero-container {
background-image: url(https://images.unsplash.com/photo-1581362508717-f542c1ecf295?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1651&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
padding: 16.625rem 0;
}
.hero-container:after {
content: url('http://svgshare.com/i/Hud.svg');
position: absolute;
width: 100%;
height: auto;
bottom: -85px;
}<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<section class="hero-container position-relative">
<div class="container">
<div class="row">
<div class="col-md-7 col-xs-12">
<h1 class="mb-3">Lorem ipsum dolor sit amet</h1>
<p class="mb-4 text-white">Lorem ipsum dolor sit amet Lorem ipsum dolor sit …推荐指数
解决办法
查看次数