我正在尝试使用HTMLCSS重新创建徽标,以练习更多地了解旋转,过渡和动画。在定位方面,我觉得这很乏味,觉得我可能会以错误的方式来做。这是我徽标的基本表示形式:

html - 在CSS中创建徽标时遇到问题?-LMLPHP

到目前为止,HTMLCSS相当简单,但是正如我所说的那样,由于对div元素的高度或位置的任何调整都迫使我将内容转移到任何地方,这似乎很繁琐。我希望有一个徽标适合的父div元素,并根据父元素调整大小/位置。

我以为position: relative可以完成重新定位,但是我不确定在此过程中对widthheight属性使用百分比的效果如何。

这是我当前的代码;它是不完整的,但是我想在走得太远之前寻求更多有经验的建议,最终不得不重新编写整个过程。



.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撰写了一个非常详细的答案,回答了我上面提到的所有问题。


定位
缩放比例
动画制作
CSS样式
等等

最佳答案

这就是我要做的:
我将div用于绿线,将::before用于金线,将::after用于蓝色方块。



.logo {
  position:relative;
  margin-top:50px;
  width: 250px;
  height: 250px;
  border-top: 4px solid #8c3;
  transform:rotate(45deg) scale(.9,.9);
  box-sizing:border-box;
}
.logo::after,.logo::before{
  content:"";
  display:block;
  position:absolute;
  top:-100px;
  width:100px;
  box-sizing:border-box;
}

.logo::before{
  right:0;
  height:100%;
  border-left:4px solid #fc0;
}

.logo::after{
  height:100px;
  background-color:#3cf;
  right:0;
  top:-100px;
  border-bottom:4px solid #8c3;
  border-left:4px solid #fc0;
}

<div class="logo"></div>





希望对您有所帮助。

更新

但是,如果您想到了SVG,我会这样做:

在这种情况下,SVG具有在CSS中声明的宽度。



line{stroke-width:4px}
svg{border:1px solid; width:90vh}

<svg viewBox="0 0 250 215">
  <g transform="rotate(45)">
  <rect x="150" y="-100" width="100" height="100" fill="#3cf" />
  <line stroke="#8c3"  x2="250" />
  <line stroke="#fc0" x1="150" y1="-100" x2="150" y2="150" />
  </g>
</svg>





缩放:使用SVG时,如果您的SVG没有声明widthheight,它将占用所有可用宽度。因此,您可以将其放入所需宽度的容器中。如果容器可以缩放,SVG将立即采用相同的大小。

定位:SVG元素可以像其他任何HTML内联元素一样定位

样式在CSS中,我已经设置了行的stroke-width。如果需要更改颜色,也可以在CSS中完成。在这种情况下,我使用了SVG转换,但是我也可以在CSS中完成它:g{transform: rotate(45deg);}

您可以使用SMIL animations,CSS动画和Javascript动画为SVG元素设置动画。如果要对日志进行动画处理,请询问一个问题,指定要如何对SVG进行动画处理。

10-05 20:37
查看更多