时间戳

首页 > 解决方案 > 在 CSS 中创建徽标的问题？

html - 在 CSS 中创建徽标的问题？

问题描述

我正在尝试使用HTML并CSS作为练习来重新创建我的徽标，以了解有关旋转、过渡和动画的更多信息；我发现在定位方面相当乏味，并且觉得我可能会以错误的方式进行。这是我的徽标的基本表示：

在此处输入图像描述

到目前为止，and 非常简单，但正如我所说，这似乎真的很乏味，因为对元素的高度或位置的任何调整都会迫使HTML我到处移动。我希望有一个徽标适合的父元素，并根据父元素调整大小/重新定位。CSSdivdiv

我认为这position: relative将完成重新定位，但我不确定在此过程中使用百分比width和属性的效果如何。height

这是我当前的代码；它是不完整的，但我想在让它走得太远并最终不得不重新编写整个东西之前寻求更有经验的建议。

.box {
  width: 100px;
  height: 100px;
  background-color: #3CF;
  transform: rotatez(45deg);
  margin: auto;
  position: fixed;
  top: 50px;
  left: 500px;
}
.astick {
  width: 3px;
  height: 250px;
  background-color: #FC0;
  transform: rotatez(45deg);
  position: fixed;
  top: -8px;
  left: 460px;
}
.bstick {
  width: 3px;
  height: 250px;
  background-color: #8C3;
  transform: rotatez(-45deg);
  position: fixed;
  top: -45px;
  left: 460px;
}
<div class="logo">
  <div class="box"></div>
  <div class="astick"></div>
  <div class="bstick"></div>
  <div class="cstick"></div>
</div>

我想知道是否有更聪明或更有效的方法来实现这一点。当我说更高效时，我的意思是维护和重用很简单并且花费最少的时间。

此外，为我的元素大小设置动画以获得良好的过渡效果会出现什么样的问题？我相信仅仅修改尺寸会在过渡期间导致定位问题，但我认为我可能无法理解所有潜在问题。

编辑：使用 SVG

我已经根据已经提供的评论和答案做出了决定，这SVG将是一个很好的决定；我将分配 50 赏金给写出非常详细的答案的人，SVG该答案回答了我上面提到的所有问题。

标签： htmlcsssvg

解决方案

实际上，影响旋转功能的三个因素是起点、页面大小、对象的宽度、长度以及方向。对于 SVG 来说，在这里阅读更多信息是件好事：https ://svgontheweb.com/ 和https://css-tricks.com/transforms-on-svg-elements/ https://www.jotform.com/blog/更好的定位和转换与嵌套 svgs/

这里如何使用它：

 

 <svg width="450" height="250" style="background: gray">
  <g transform="rotate(45)">
  <rect x="150" y="-80" width="80" height="80" fill="#3cf" />
  <line stroke="#fc0"  x1="170"  x2="70"  />
  
  <line stroke="#fc0" x1="150" y1="-80" x2="150" y2="150" />
   <line stroke="#fc0" x1="70" y1="0" x2="70" y2="70" />
  
  </g>
</svg>

.box {
  width: 100px;
  height: 100px;
  background-color: #3CF;
  transform: rotatez(45deg);
  margin: auto;
  position: fixed;
  top: 50px;
  left: 500px;
}
.astick {
  width: 3px;
  height: 250px;
  background-color: #FC0;
  transform: rotatez(45deg);
  position: fixed;
  top: -8px;
  left: 460px;
}
.bstick {
  width: 3px;
  height: 90px;
  background-color: #FC0;
  transform: rotatez(-45deg);
  position: fixed;
  top: 23px;
  left: 447px;
}

.astick1 {
  width: 3px;
  height: 300px;
  background-color: #FC0;
  transform: rotatez(45deg);
  position: fixed;
  top: -10px;
  left: 310px;
}
<div class="logo" style=" position: center;">
  <div class="box"></div>
  <div class="astick"></div>
  <div class="bstick"></div>
  <div class="cstick"></div>
   <div class="astick1"></div
</div>

推荐阅读