#html #css
#HTML #css
Вопрос:
кажется, есть прямоугольная граница, которая также считается областью с возможностью перемещения. Я хочу, чтобы только символы могли перемещаться. Я попытался использовать span, чтобы исправить это, но это не дало никакого эффекта.
a:hover{
color: #ff0000;
text-shadow: 1px 1px 20px #ff0000;
}
#shrine{
display: inline-block;
font-family: 'aurora';
text-shadow: 1px 1px 0px #ff0000, 1px -1px 0px #ff0000, -1px -1px 0 #ff0000, -1px 1px 0px #ff0000;
transform: scaleY(1.6) scaleX(.9);
padding: 0;
margin: 0;
font-size: 8vw;
margin-bottom: 2vw;
} <div class='maindiv'>
<ul>
<li>
<a href=''><span id='shrine'>SHRINE</span></a>
</li>
<ul>
<div> Ответ №1:
Это связано со transform свойством, изменяющим способ отображения элемента.
При преобразовании встроенного элемента его контур все равно будет ссылаться на его начальную позицию.
Смотрите примеры в предоставленном фрагменте. При преобразовании контур элемента попытается использовать как преобразованную, так и исходную ограничительную рамку для запуска событий. Если вы просто хотите увеличить размер текста, я бы предложил использовать font-size
* {
box-sizing: border-box;
}
a {
outline: 1px solid #000;
}
a:hover{
color: #ff0000;
text-shadow: 1px 1px 20px #ff0000;
}
#shrine,
#shrineSmaller,
#shrineNoTransform,
#shrineRight {
display: inline-block;
font-family: 'aurora';
text-shadow: 1px 1px 0px #ff0000, 1px -1px 0px #ff0000, -1px -1px 0 #ff0000, -1px 1px 0px #ff0000;
padding: 0;
margin: 0;
font-size: 8vw;
margin-bottom: 2vw;
}
#shrine {
transform: scaleY(1.6) scaleX(.9);
}
#shrineSmaller {
transform: scaleY(1.6) scaleX(.5);
}
#shrineRight {
transform: scaleY(1.6) scaleX(.9) translateX(115%);
} <div class='maindiv'>
<ul>
<li>
<a href=''><span id='shrine'>SHRINE</span></a>
</li>
<li>
<a href=''><span id='shrineSmaller'>SHRINE</span></a>
</li>
<li>
<a href=''><span id='shrineNoTransform'>SHRINE</span></a>
</li>
<li>
<a href=''><span id='shrineRight'>SHRINE</span></a>
</li>
<ul>
<div> Ответ №2:
Вы можете использовать путь SVG, чтобы сделать доступным только текст.
- Сначала перейдите к https://danmarshall.github.io/google-font-to-svg-path / и сгенерируйте SVG-путь.
- Во-вторых,
<a href=''><span id='shrine'>SHRINE</span></a>замените сгенерированным кодом пути SVG. - В-третьих, примените стиль наведения CSS к пути.
.maindiv svg > g > path:hover {
fill: red;
stroke: red;
} <div class='maindiv'>
<ul>
<li>
<svg width="255.8" height="70" viewBox="0 0 255.8 70" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none"><path d="M 195.1 68.1 L 195.1 70 L 160.9 70 L 160.9 68.1 L 167.5 68.1 L 152.6 41.7 L 136.7 68.1 L 147.3 68.1 L 147.3 70 L 126.6 70 L 126.6 68.1 L 133.3 68.1 L 150.8 38.7 L 129.9 2 L 124.5 2 L 124.5 0 L 158.2 0 L 158.2 2 L 151.4 2 L 164.9 26.2 L 180 2 L 169.6 2 L 169.6 0 L 190.1 0 L 190.1 2 L 183.5 2 L 166.6 29 L 189.3 68.1 L 195.1 68.1 Z M 66.8 2.2 L 66.8 0 L 118.8 0 L 119.8 19.8 L 118 19.8 A 67.919 67.919 0 0 0 115.61 14.629 Q 112.508 8.647 109.2 5.95 A 14.803 14.803 0 0 0 104.453 3.42 Q 100.776 2.2 95.7 2.2 L 92.2 2.2 L 92.2 33.1 L 95.6 33.1 A 10.151 10.151 0 0 0 103.094 29.98 A 12.683 12.683 0 0 0 103.5 29.55 A 17.096 17.096 0 0 0 106.329 25.162 Q 107.216 23.219 107.796 20.88 A 30.604 30.604 0 0 0 108 20 L 109.5 20 L 109.5 49.6 L 107.8 49.6 A 43.088 43.088 0 0 0 106.689 45.721 Q 105.372 41.871 103.587 39.632 A 10.977 10.977 0 0 0 102.95 38.9 A 10.075 10.075 0 0 0 97.44 35.96 A 14.764 14.764 0 0 0 94.6 35.7 L 92.2 35.7 L 92.2 67.8 L 96 67.8 A 25.565 25.565 0 0 0 104.39 66.468 A 22.33 22.33 0 0 0 111.65 62.3 Q 118.1 56.8 120.5 48.2 L 122.5 48.2 L 121.7 70 L 66.8 70 L 66.8 67.8 L 72.7 67.8 L 72.7 2.2 L 66.8 2.2 Z M 1 0 L 60 0 L 61 25.1 L 59.1 25.1 Q 54.709 11.827 51.314 6.97 A 17.41 17.41 0 0 0 51.3 6.95 A 10.911 10.911 0 0 0 43.334 2.207 A 15.276 15.276 0 0 0 41.5 2.1 L 40.3 2.1 L 40.3 67.9 L 48.8 67.9 L 48.8 70 L 12.3 70 L 12.3 67.9 L 20.8 67.9 L 20.8 2.1 L 19.5 2.1 A 12.906 12.906 0 0 0 14.943 2.871 Q 11.833 4.035 9.734 6.959 A 14.19 14.19 0 0 0 9.6 7.15 A 29.46 29.46 0 0 0 7.691 10.387 Q 5.851 13.948 3.837 19.465 A 169.507 169.507 0 0 0 1.9 25.1 L 0 25.1 L 1 0 Z M 195.8 0 L 254.8 0 L 255.8 25.1 L 253.9 25.1 Q 249.509 11.827 246.114 6.97 A 17.41 17.41 0 0 0 246.1 6.95 A 10.911 10.911 0 0 0 238.134 2.207 A 15.276 15.276 0 0 0 236.3 2.1 L 235.1 2.1 L 235.1 67.9 L 243.6 67.9 L 243.6 70 L 207.1 70 L 207.1 67.9 L 215.6 67.9 L 215.6 2.1 L 214.3 2.1 A 12.906 12.906 0 0 0 209.743 2.871 Q 206.633 4.035 204.534 6.959 A 14.19 14.19 0 0 0 204.4 7.15 A 29.46 29.46 0 0 0 202.491 10.387 Q 200.651 13.948 198.637 19.465 A 169.507 169.507 0 0 0 196.7 25.1 L 194.8 25.1 L 195.8 0 Z" vector-effect="non-scaling-stroke"/></g></svg>
</li>
</ul>
</div> Ответ №3:
Масштабирование, которое вы выполняете, увеличивает высоту текста за пределы высоты строки li , которая его содержит. Если вы установите li{overflow:hidden} , вы можете увидеть, какая часть высоты текста li учитывает переполнение.
Например, я могу добавить li {line-height: 350%; overflow:hidden} в ваш CSS, чтобы высота строки соответствовала точному размеру текста (в моем браузере), чтобы обеспечить более плотный периметр наведения. Тем не менее, я не рекомендую это; Я просто пытаюсь показать вам, что происходит.
a:hover{
color: #ff0000;
text-shadow: 1px 1px 20px #ff0000;
}
#shrine{
display: inline-block;
font-family: 'aurora';
text-shadow: 1px 1px 0px #ff0000, 1px -1px 0px #ff0000, -1px -1px 0 #ff0000, -1px 1px 0px #ff0000;
transform: scaleY(1.6) scaleX(.9);
padding: 0;
margin: 0;
font-size: 8vw;
margin-bottom: 2vw;
}
li {line-height: 350%; overflow:hidden} <div class='maindiv'>
<ul>
<li>
<a href=''><span id='shrine'>SHRINE</span></a>
</li>
<ul>
<div>