我偶然发现Codepen上的this HTML / CSS动画,它基本上是一颗旋转的钻石。我一直在尝试在其中添加功能,但无法这样做。我想要某种文本,例如菱形中间的“ HELLO”,当用户单击切换按钮时,“ HELLO”文本位于菱形的中间。但是文字总是附着在钻石的侧面。
<div class='diamond-slice diamond-slice--1'>
<div class='diamond-slice-a'>
<div class='pavilion'>
<div class='pavilion__face'></div>
</div>
<div class='diamond-slice-b'>
<div class='facet'></div>
<div class='top'></div>
</div>
</div>
</div>
"HELLO WORLD"
<div class='diamond-slice diamond-slice--2'>
可以这样做吗?
答案 0 :(得分:2)
那呢?
https://codepen.io/anon/pen/RePRrZ
我添加了
<div class='diamond intro'>
<div class="helloText">Hello</div>
还有CSS
.helloText{
position: absolute;
top: 15px;
margin-left: 100px;
color: white;
}