css 3 로 진도 바 간단하게 실현

1415 단어
css 3 는 신기 한 것 입 니 다. 방금 손 이 가 려 워 서 아주 간단 한 진도 표를 썼 습 니 다. js 를 사용 하지 않 아 도 됩 니 다.
div 를 직접 끼 워 넣 고 div 를 애니메이션 으로 설정 하면 됩 니 다.
html: 
<div class="loading">
        <div class="progress">

        </div>
    </div>

loading css: 
.loading{
            width: 300px;
            height: 15px;
            border-radius: 10px;
            border: 1px solid blue;
            box-shadow: 2px 2px 5px 1px blue;
        }

progress css: 
.progress{
            width:0%;//         0
            height: 100%;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,blue), to(#7BC3FF));
            border-radius: 10px;
        }

그리고 애니메이션 은 animation 과 transition 으로 모두 할 수 있 습 니 다.
animation 을 예 로 들 면:
@-webkit-keyframes aaa{
            0%{ width: 0%; }
            30%{width:30%; }
            60%{width:60%;}
            100%{width:80%; }
        }
        .progress{
            width:0%;
            height: 100%;
          
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,blue), to(#7BC3FF));
            border-radius: 10px;
           
            -webkit-animation:aaa 2s linear;
        }

이것 은 단지 구우일모 일 뿐, 할 수 없 는 것 은 없고 생각 지도 못 한 것 만 있 습 니 다. css 3, 안녕하세요?
JDBC-데이터베이스 데이터 유형, 배치 처리 -12-30-2014=
응용 수학

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage