我正在尝试使用HTML
和CSS
重新创建徽标,以练习更多地了解旋转,过渡和动画。在定位方面,我觉得这很乏味,觉得我可能会以错误的方式来做。这是我徽标的基本表示形式:
到目前为止,HTML
和CSS
相当简单,但是正如我所说的那样,由于对div
元素的高度或位置的任何调整都迫使我将内容转移到任何地方,这似乎很繁琐。我希望有一个徽标适合的父div
元素,并根据父元素调整大小/位置。
我以为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
撰写了一个非常详细的答案,回答了我上面提到的所有问题。定位
缩放比例
动画制作
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没有声明
width
或height
,它将占用所有可用宽度。因此,您可以将其放入所需宽度的容器中。如果容器可以缩放,SVG将立即采用相同的大小。定位:SVG元素可以像其他任何HTML内联元素一样定位
样式在CSS中,我已经设置了行的
stroke-width
。如果需要更改颜色,也可以在CSS中完成。在这种情况下,我使用了SVG转换,但是我也可以在CSS中完成它:g{transform: rotate(45deg);}
您可以使用SMIL animations,CSS动画和Javascript动画为SVG元素设置动画。如果要对日志进行动画处理,请询问一个问题,指定要如何对SVG进行动画处理。