CSS3을 사용하여 진행률 표시줄 효과를 얻는 방법(전체 코드 첨부)

坏嘻嘻
풀어 주다: 2018-09-27 11:58:35
원래의
4312명이 탐색했습니다.

음악이나 동영상을 재생할 때 재생 시간을 직접 확인할 수 있을 뿐만 아니라 진행률 표시줄을 관찰하면 사용자에게 재생 시간이 얼마나 걸리는지 더 직관적으로 알 수 있으므로 진행률이 향상됩니다. 바는 일종의 매우 실용적인 특수 효과입니다. 이 문서에서는 CSS3를 사용하여 진행률 표시줄 효과를 얻는 방법을 소개하고 특정 단계에 중점을 두고 있으며 모든 사람이 뭔가를 얻을 수 있기를 바랍니다.

css3을 사용하여 바 진행률 표시줄 효과의 원리 구현

  1. 먼저 HTML을 사용하여 두 개의 필수 div를 만들고 position:absolute를 사용하여 두 div를 겹치게 만들고 요구 사항에 따라 서로 다른 색상을 구분합니다. .

  2. 키프레임 속성을 사용하여 겹치는 진행률 표시줄을 이동한 다음 애니메이션 제어에 애니메이션을 사용합니다. 구문은 @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을 사용하여 진행률 표시줄 효과를 얻는 방법(전체 코드 첨부)

위 내용은 CSS3을 사용하여 진행률 표시줄 효과를 얻는 방법(전체 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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