CSS3의 세 가지 로딩 디자인 예제 코드 공유(2)
- 零下一度원래의
- 2017-05-05 15:20:591527검색
이 글은 CSS Loading이 디자인한 두 번째 글입니다. 사실 첫 번째 글에는 많은 내용이 포함되어 있기 때문에 이번 글에서는 속성에 대한 소개가 상대적으로 적습니다. 속성이 이해가 안 되시면 이전 글의 내용을 참고해주세요.
CSS 로딩 디자인(1)
한 번 로딩
Paste_Image.png
이렇게 하면 안 돼요. 뭐든지애니메이션 효과를 여기서 보여주려면 화면으로 영상을 녹화한 뒤 사진으로 변환해야 하는 게 너무 번거롭거든요. 혹시 쉬운 방법이 있는지 모르겠습니다. 그렇다면 알려주시기 바랍니다. 이제 이 애니메이션 효과를 만드는 방법을 살펴보겠습니다. 먼저 Html
<p class="box">
<p class="loader">
<i></i>
<i></i>
<i></i>
</p>
</p> 코드를 살펴보겠습니다. 이는 두 개의 태그가 중첩되어 있음을 나타냅니다. p 코드 CSS
.box {
width: 100%;
padding: 3%;
}
.loader {
width: 30%;
height: 200px;
margin: 50px auto;
border: 1px solid chocolate;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.loader i {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #333333;
position: absolute;
opacity:0;
}를 보면 이 코드가 첫 번째 기사의 코드와 거의 동일하다는 것을 알 수 있습니다. 실제로 다음 세 가지 효과도 디자인되었습니다. 이런 식으로 유일한 차이점은 애니메이션 디자인이 다르다는 것입니다. @-webkit-keyframes loading {
0%{
transform: scale(0);
opacity: 0;
}
5%{
opacity: 1;
}
100%{
transform: scale(1);
opacity:0;
}
}이 애니메이션이 무엇을 의미하는지 설명하겠습니다. 1. 0% ： 这个时候将我们画的圆形缩放为 0%，透明度也是 0 2. 5% ： 这个时候将透明度设置为 1 ，也就是图形是出于可见的状态， 但是这个时候图形已经被缩放为 0，所以还是什么东西都看不到。 3. 100% : 注意在 100 % 的状态下，图形被缩放为原始状态，但是透明度为0，这说明了什么？ 这说明在 5% - 100% 过程中，图形逐渐出现，但是透明度逐渐降低，这样就会出现一个动画效果。좋아, 이제 애니메이션 효과가 정의되었으므로
태그에 대해 설정해 보겠습니다. i
.loader i:nth-child(1){
-webkit-animation: loading 1s linear 0s infinite;
}
.loader i:nth-child(2){
-webkit-animation: loading 1s linear 0.2s infinite;
}
.loader i:nth-child(3){
-webkit-animation: loading 1s linear 0.4s infinite;
}자, 여기서 첫 번째 애니메이션 효과가 나타납니다. 직접 연습해보고 구체적인 효과를 확인하는 것이 좋습니다. 개인적으로 이 애니메이션은 꽤 멋있다고 생각합니다. 2개 불러오기
코드를 보세요Html
<p class="box">
<p class="loader">
<p class="loader-child">
<i></i>
<i></i>
</p>
</p>
</p>여기 코드는 위와 조금 다릅니다. 아래에서 분석해 보겠습니다.CSS
.box {
width: 100%;
padding: 3%;
}
.loader {
width: 30%;
height: 200px;
margin: 50px auto;
border: 1px solid chocolate;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.loader-child {
width: 40px;
height: 40px;
position: relative;
}
.loader-child i {
display: block;
border: 2px solid #333333;
border-color: transparent #333333;
border-radius: 50%;
position: absolute;
}
.loader-child i:first-child {
width: 35px;
height: 35px;
top: 0;
left: 0;
-webkit-animation: loading 1s ease-in-out 0s infinite;
}
.loader-child i:last-child {
width: 15px;
height: 15px;
top: 10px;
left: 10px;
-webkit-animation: loading 1s ease-in-out 0.5s infinite reverse;
}그런 줄이 있는 걸 알 수 있습니다. 네 번째 블록의 코드 원래는 원을 그리도록 설정되어 있었습니다. 원이 아니기 때문에 이 속성 행을 설정한 후에는 색상 속성이 1/4 호마다 변경됩니다. 즉, 투명합니다. border-color: transparent #333333; 원하는 그래픽 효과를 얻을 수 있도록 변경하세요. #333333
태그에 i 속성을 설정합니다. 이 두 속성은 top,left과 함께 사용해야 하며 설정 후 사용 방법도 소개했습니다. 이 두 가지 특성을 통해 얻을 수 있는 효과는 큰 원에 작은 원이 포함되어 있다는 것이며, 이는 그림의 효과입니다. position
애니메이션 효과에 주목하세요. 끝에 last-child를 추가했는데 이는 시계 반대 방향 실행을 의미합니다. reverse
rree
위의 애니메이션 실행에 대한 저의 분석과 결합하면 이 애니메이션의 효과를 시뮬레이션할 수 있었을 것입니다. , 정말 멋진 효과네요. 3개 로드
에 노출되어 있어서 매우 어렵습니다. 그것도 며칠 안됐는데 왜 속성이 많이 설정되어 있는지 모르겠네요. 인터넷으로 여러 정보를 찾아봐도 아직 잘 이해가 안 가네요. 이제 제가 알고 있는 내용을 공유해 드리겠습니다. 아직 확실하지 않은 속성에 대해서는 모든 위대한 불멸자들이 나에게 가르쳐 주기를 바랍니다. 이전과 동일합니다. CSS
@-webkit-keyframes loading {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(0.6);
}
100% {
transform: rotate(360deg) scale(1);
}
}HTML 여기에는 주로 사용에 협력하기 위한 추가 레이어가 포함되어 있음을 분명히 알 수 있습니다. 속성의 <p class="box">
<p class="loader">
<p class="loader-child">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p>
</p>p현재 5개의 position 태그가 있지만 예상되는 5개가 아닌 원 하나만 볼 수 있습니다. 이런 일이 발생합니까? 나도 잘 모르겠다.
애니메이션 효과를 살펴보겠습니다irree
.box{
width: 100%;
padding: 3%;
}
.loader{
width:30%;
height: 200px;
border: 1px solid chocolate;
box-sizing: border-box;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
}
.loader-child{
width: 80px;
height: 20px;
position: relative;
}
.loader-child i{
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333333;
margin-right: 10px;
position: absolute;
}다음은 각 요소에 대한 애니메이션 효과를 설정하는 것입니다 @-webkit-keyframes loading {
0%{
left: 100px;
top: 0;
}
80%{
left:0;
top:0;
}
85%{
left:0px;
top:-20px;
width: 20px;
height: 20px;
}
90%{
width: 40px;
height: 20px;
}
95%{
left: 100px;
top: -20px;
width: 20px;
height: 20px;
}
100%{
left: 100px;
top:0;
}
}그렇습니다. 피드백을 환영합니다. 서로에게서 배우십시오. 【관련 추천】1. 무료 CSS 온라인 동영상 튜토리얼
3. php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼
위 내용은 CSS3의 세 가지 로딩 디자인 예제 코드 공유(2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!