CSS 특수 효과 공유 - 오른쪽으로 깜박임

零下一度
풀어 주다: 2017-06-24 14:20:14
원래의
2143명이 탐색했습니다.
 1 <!DOCTYPE html> 2 <html lang="en"> 3     <head> 4         <meta charset="utf-8"> 5         <style> 6             .shadow { 7                 text-align: center; 8                 /* 背景颜色线性渐变 */ 9                     /* 老式写法 */10                         /* linear为线性渐变,也可以用下面的那种写法。left top,right top指的是渐变方向,左上到右上 */11                         /* color-stop函数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。所以本次渐变为两边灰色,中间渐白色 */12                 background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));13                     /* 新式写法 */14                 /* background: -webkit-linear-gradient(left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d)); */15 16                 /* 设置为text,意思是把文本内容之外的背景给裁剪掉 */17                 -webkit-background-clip: text;18                 /* 设置对象中的文字填充颜色 这里设置为透明 */19                 -webkit-text-fill-color: transparent;20                 /* 每隔2秒调用下面的CSS3动画 infinite属性为循环执行animate */21                 -webkit-animation: animate 1.5s infinite;22             }23             /* 兼容写法,要放在@keyframes前面 */24             @-webkit-keyframes animate {25                 /* 背景从-100px的水平位置,移动到+100px的水平位置。如果要移动Y轴的,设置第二个数值 */26                 from {background-position: -100px;}27                 to {background-position: 100px;}28             }29             @keyframes animate {30                 from {background-position: -100px;}31                 to {background-position: 100px;}32             }33         </style>34     </head>35     <body>36         <div class="shadow">文字向右闪过效果</div>37     </body>38 </html>
로그인 후 복사

1. 코드를 직접 입력하세요! 렌더링은 다음과 같습니다.

2. 이 흰색 그라데이션 플래시 효과는 CSS3로 만들기가 매우 쉽고 편리합니다. 유일한 단점은 아마도 호환성 문제일 것입니다. 그래서 이제는 일반적으로 모바일 단말기에서 사용됩니다.

3. 어서 어서! (칠판을 두드리며) 코드 설명이 비교적 명확한 것 같으니 핵심만 그려주세요! ! ! 무한 ~                                                     .

2. -webkit-text-fill-color: transparent; 텍스트 채우기 색상이 투명하게 설정되지 않으면 흰색 그라데이션 효과가 표시되지 않습니다.

3. -webkit-Background-clip: 텍스트;                                                                                                                                                                                                                                                                                

4. color-stop() 그라디언트의 색상 중지 기능은 그라디언트를 원하는 위치에 만든 다음 움직이게 하면 반짝이는 효과가 나타납니다. 나타납니다.

4. 마지막으로 아이디어에 대해 이야기해 보겠습니다.

먼저 중앙은 흰색, 양쪽은 회색으로 그라데이션 배경색을 설정합니다.

두 번째로 텍스트 채우기 색상을 투명하게 설정합니다(흰색 배경만 가능).

다음으로 텍스트를 추가합니다. 외부 배경색이 잘립니다(텍스트만 표시됨).

마지막으로 @keyframes를 사용하여 흰색 배경 위치를 왼쪽에서 오른쪽으로 순환합니다.

궁금한 점이 있으시면 메시지를 남겨주세요! ! !

위 내용은 CSS 특수 효과 공유 - 오른쪽으로 깜박임의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!