CSS：有没有可能让一个元素看起来像一个正弦/余弦函数？

r6l8ljro 于 2023-04-01 发布在其他

关注(0)|答案(4)|浏览(126)

在我的页面上，我希望元素将作为水平“休息”，以同样的方式作为hr元素，但我希望他们的形状像一个正弦函数。
有可能吗？如果有，怎么做？
这里有一个小提琴为您完成：http://jsfiddle.net/pdov7u85/
HTML：

<p>Here's some red text</p>
<!--some element with id someElement will go here-->
 <p>Here's some blue text, which should be divided from the red text with a wavy line</p>

CSS：

p:nth-of-type(1)
{
    color: red;
}

#someElement
{

}

p:nth-of-type(2)
{
    color: blue;
}

css

来源：https://stackoverflow.com/questions/26575797/css-is-it-possible-to-make-an-element-look-like-a-sine-cosine-function

4条答案

按热度按时间

oaxa6hgo1#

接受挑战。

.sine { 
	text-align: center;
}
.sine_span {
	display: inline-block;
	margin:0;
	padding:0;
	height: 20px;
	width: 40px;
	border: 1px solid black;
}
.sine_span_first {
	border-bottom: none;
	border-radius: 20px 20px 0 0;
	transform: translate(-20px, 0) scale(2,1);
}
.sine_span_second {
	border-top: none;
	border-radius: 0 0 20px 20px;
	transform: translate(20px, 20px) scale(2,1);
}
.sine_span_first_2 {
  transform: translate(0, 20px) scale(1,2);
}
.sine_span_second_2 {
  transform: translate(0, 60px) scale(1,2);
}

Flat curve
<div class="sine">
  <span class="sine_span sine_span_first"></span><span class="sine_span sine_span_second"></span>
</div>

<br />
Sharp curve
<div class="sine">
  <span class="sine_span sine_span_first sine_span_first_2"></span><span class="sine_span sine_span_second sine_span_second_2"></span>
</div>

顺便说一句，你不应该使用一些gif图像吗？

赞(0）回复(0）举报 2023-04-01

jc3wubiy2#

你可以在JavaScript中绘制正弦函数：

var canvas = document.getElementById("canvas");
if (canvas == null || !canvas.getContext) {
    return;
}
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "rgb(11,153,11)";

for (var i = 0; i <= 1000; i++) {

    var x = i * 5;
    var y = Math.sin(5 * x + 1);
    ctx.lineTo(0.5 + x, 25 - y * 24);
}
ctx.stroke();

JSFiddle
或者你可以像Paulie_D建议的那样使用SVG图像。

赞(0）回复(0）举报 2023-04-01

mspsb9vt3#

这对于OP来说已经晚了十年，但是我在试图弄清楚如何做和他们一样的事情时发现了这个问题（对于一个稍微不同的用例：我正在做一个愚蠢的小浏览器游戏，你是一个水母）。这里的答案并没有真正画出一个有用的正弦波，所以我召集了一些代码，有效地做到这一点，参数可以修改，我已经测试了它的工作相当不错。

<!DOCTYPE html>
<html>
<head>
  <title>Horiz sine</title>
</head>
<body>
  <canvas id="canvas" width="500" height="200"></canvas>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    const amplitude = 50; // Height of the wave
    const frequency = 0.05; // Frequency of the wave
    const phaseShift = 0; // Phase shift of the wave
    const verticalShift = canvas.height / 2; // Vertical position of the wave

    ctx.beginPath();
    ctx.moveTo(0, verticalShift);

    for(let x = 0; x < canvas.width; x++) {
      const y = amplitude * Math.sin((2 * Math.PI * frequency * x) + phaseShift) + verticalShift;
      ctx.lineTo(x, y);
    }

    ctx.stroke();
  </script>
</body>
</html>

这个的修改版本绘制垂直正弦波，向下，如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>Vert sine</title>
</head>
<body>
  <canvas id="canvas" width="500" height="200"></canvas>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    const amplitude = 50; // Width of the wave
    const frequency = 0.05; // Frequency of the wave
    const phaseShift = 0; // Phase shift of the wave
    const horizShift = canvas.width / 2; // Horizontal position of the wave

    ctx.beginPath();
    ctx.moveTo(horizShift, 0);

    for(let x = 0; x < canvas.width; x++) {
      const y = horizShift - amplitude * Math.sin((2 * Math.PI * frequency * x) + phaseShift);
      ctx.lineTo(y, x);
    }

    ctx.stroke();
  </script>
</body>

你可以随意改变这里的常数来创建不同形状或位置的正弦波。

赞(0）回复(0）举报 2023-04-01

oyjwcjzk4#

正如@Paulie_D所说，不要想太多。
语义和使用HR，给予它一个高度和背景图像。

hr{ 
    border:none; 
    height:82px; 
    background:url('http://i60.tinypic.com/df8y75.png'); 
    background-size:50%;
  }

例如
http://jsfiddle.net/pdov7u85/3/
注意：旧版本的IE不支持background-size，但我只是为了方便才使用它。

赞(0）回复(0）举报 2023-04-01

我来回答

CSS：有没有可能让一个元素看起来像一个正弦/余弦函数？

4条答案

相关问题

热门标签

最新问答