음악이나 동영상을 재생할 때 재생 시간을 직접 확인할 수 있을 뿐만 아니라 진행률 표시줄을 관찰하면 사용자에게 재생 시간이 얼마나 걸리는지 더 직관적으로 알 수 있으므로 진행률이 향상됩니다. 바는 일종의 매우 실용적인 특수 효과입니다. 이 문서에서는 CSS3를 사용하여 진행률 표시줄 효과를 얻는 방법을 소개하고 특정 단계에 중점을 두고 있으며 모든 사람이 뭔가를 얻을 수 있기를 바랍니다.
css3을 사용하여 바 진행률 표시줄 효과의 원리 구현
먼저 HTML을 사용하여 두 개의 필수 div를 만들고 position:absolute를 사용하여 두 div를 겹치게 만들고 요구 사항에 따라 서로 다른 색상을 구분합니다. .
키프레임 속성을 사용하여 겹치는 진행률 표시줄을 이동한 다음 애니메이션 제어에 애니메이션을 사용합니다. 구문은 @keyframes animationname {keyframes-selector {css-styles;}}
ps입니다. 위의 지식을 모르시는 분들은 본 사이트의 관련 글을 읽어보시기 바랍니다.
css3를 사용하여 이미지의 자동 캐러셀 효과를 구현하는 방법(전체 코드 첨부)
css3를 사용하여 진행 막대 효과 코드를 구현합니다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1"> <style> .process-bar { width:100px; display:inline-block; *zoom:1; } .pb-wrapper { border:1px solid #cfd0d2; position:relative; background:#cfd0d2; border-radius: 8px; } .pb-container { height:12px; position:relative; left:-1px; margin-right:-2px; font:1px/0 arial; padding:1px; } .pb-highlight { position:absolute; left:0; top:0; _top:1px; width:100%; opacity:0.6; filter:alpha(opacity=60); height:6px; background:white; font-size:1px; line-height:0; z-index:1 } .pb-text { width:100%; position:absolute; left:0; top:0; text-align:center; font:10px/12px arial; color:black; font:10px/12px arial } </style> </head> <body> <div class="process-bar skin-green"> <div class="pb-wrapper"> <div class="pb-highlight"></div> <div class="pb-container"> <div class="pb-text">50%</div> <div class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></div> </div> </div> </div> </body> </html>
효과는 그림과 같습니다.
위 내용은 CSS3을 사용하여 진행률 표시줄 효과를 얻는 방법(전체 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!