SVG 네온 효과-CSS 튜토리얼-php.cn

SVG 네온 효과

一个新手

풀어 주다： 2017-09-06 10:53:28

원래의

1837명이 탐색했습니다.

렌더링은 다음과 같습니다:

개미들이 그 위를 기어다니는 원과 같습니다. . . . . 음 이상한 비유

fill:none; 이 속성을 추가하지 않으면 기본 채우기 색상이 검은색이 됩니다.

채우기, 투명도 및 획 속성이 매우 흥미롭습니다. 스트로크-라인캡이지만 가장 일반적으로 사용되는 효과는 스트로크-다샤레이 및 스트로크-대시오프셋입니다.

Stroke-miterlimit는 획 교차(예각) 표현을 나타냅니다. 기본 크기는 4입니다. 베벨 대 베벨의 각도 손실은 무엇을 의미합니까? 값이 클수록 손실이 작아집니다. 정확히 무엇을 하는지는 잘 모르겠습니다. 기타 정보를 확인하실 수 있습니다. stroke-miterlimit 表示描边相交（锐角）的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思，值越大，损耗越小。具体干嘛的，我自己也不确定。大家可查查其他资料。
stroke-dasharray 表示虚线描边。可选值为：none, <dasharray>, inherit. 其中，none表示不是虚线；<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值，也可以是百分比值；inherit表继承。
stroke-dashoffset 表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。
stroke-opacity 表示描边透明度。默认是1.

特别佩服作者列举的一个生动形象的例子：

一根火腿肠12厘米，要在上面画虚线，虚线间隔有15厘米，如果没有dashoffset，则火腿肠前面15厘米会被辣椒酱覆盖！实际上只有12厘米，因此，我们看到的是整个火腿肠都有辣椒酱。现在，dashoffset也是15厘米，也就是虚线要往后偏移15厘米，结果，辣椒酱要抹在火腿肠之外，也就是火腿肠上什么辣椒酱也没有。如果换成上面的直线SVG，也就是直线看不见了。我们把dashoffset

Stroke-dasharray는 점선 획을 나타냅니다. 선택 값은 none, <dasharray>, inherit입니다. 그 중 none은 없음을 의미합니다. 점선 <dasharray>는 쉼표 또는 공백으로 구분된 값 목록입니다. 각 점선 끝의 길이를 나타냅니다. 고정 길이 값 또는 상속 테이블 상속일 수 있습니다.

Stroke-dashoffset은 점선의 시작 오프셋을 나타냅니다. 선택 값은 <percentage>, <length>, inherit입니다. 백분율 값, 길이 값, 상속.

🎜🎜획 불투명도는 획 투명도를 나타냅니다. 기본값은 1입니다.🎜🎜저자가 나열한 생생한 예가 특히 감탄스럽습니다. 🎜🎜햄 소시지는 12cm인데 점선을 그려야 합니다. 점선간격은 15cm 입니다. dashoffset이 없으면 햄소시지 앞쪽 15cm가 칠리소스로 덮혀집니다! 실제로는 12cm에 불과하므로 우리가 보고 있는 것은 칠리 소스를 곁들인 전체 소시지입니다. 이제 dashoffset도 15센티미터입니다. 즉, 점선을 15센티미터 뒤로 이동해야 하므로 햄 바깥쪽에 칠리소스를 발라야 하는데, 이는 칠리소스가 없다는 의미입니다. 햄에. 위의 직선 SVG로 변경하면 더 이상 직선이 보이지 않게 됩니다. 점차적으로 dashoffset 값을 작게 만들어 보면 마치 햄소시지 뿌리부터 칠리소스가 묻어나는 것처럼 햄소시지 위에 칠리소스가 조금씩 나타나는 것을 알 수 있습니다. 🎜

<style type="text/css">    
    body{background-color:#00688B;    
    }   
    .text{font-size: 64px;    
     font-weight: normal;    
     text-transform: uppercase;    
     fill:none;   
    stroke: #B0E0E6;    
    stroke-width: 2px;
    stroke-dasharray: 90 310;
    animation: stroke 6s infinite linear;
    }
    .text-1{stroke: #FFEC8B;
        animation-delay:-1.5s;    
    text-shadow:5px 5px 5px #FFEC8B;
        }
    .text-2{stroke:#AEEEEE;    
        animation-delay:-3s;     
        text-shadow:5px 5px 5px #7FFFD4;
        }
    .text-3{stroke:#EEE0E5;animation-delay:-4.5s;text-shadow:5px 5px 5px #7FFFD4;
        }
    .text-4{stroke:#FFC1C1;animation-delay:-6s;text-shadow:5px 5px 5px #7FFFD4;
        } 
    @keyframes stroke { to { stroke-dashoffset: -400;}}
</style>
<svg width="100%" height="100">   
 <text text-anchor="middle" x="50%" y="50%" class="text text-1" > Happy birthday to you❤ </text>
 <text text-anchor="middle" x="50%" y="50%" class="text text-2" > Happy birthday to you❤</text>    
 <text text-anchor="middle" x="50%" y="50%" class="text text-3" > Happy birthday to you❤ </text>
 <text text-anchor="middle" x="50%" y="50%" class="text text-4" > Happy birthday to you❤ </text>
</svg>

로그인 후 복사

🎜 🎜🎜🎜🎜

위 내용은 SVG 네온 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!