CSS를 사용하여 간단한 스켈레톤 화면 구현
- Guanhui앞으로
- 2020-06-17 17:08:016179검색
머리말
네트워크 데이터를 로딩할 때 사용자 경험을 향상시키기 위해 일반적으로 원을 그리며 회전하는 로딩 애니메이션이나 스켈레톤 화면을 사용합니다. 애니메이션 로딩에 비해 Skeleton Screen은 더욱 생생한 효과를 제공하며 구현도 매우 간단합니다. CSS를 사용하여 간단한 Skeleton Screen을 구현할 수 있습니다. (스켈레톤 화면이란 무엇인가요?)
추천 학습: CSS 동영상 튜토리얼, CSS 튜토리얼(그림 및 텍스트)
ideas
HTML 빌딩 스켈레톤
-
CSS plus 스타일
CSS 플러스 애니메이션
스켈레톤 만들기부터 시작하세요
스켈레톤 구조는 매우 간단합니다. 원하는 블록 수준 요소 몇 개를 무작위로 넣으면 괜찮습니다.
<p class='screen-root'> <ul> <li/> <li/> <li/> </ul></p>
보세요, 정말 간단해요.
CSS 컬러링
우리가 자주 보는 스켈레톤 화면은 이런 느낌입니다
설명을 쉽게 하고 대비를 높이기 위해 먼저 고스트 버전을 만들어보겠습니다
첫번째 CSS는 linear-gradient 속성은 작은 녹색 그라데이션 이미지로 빨간색을 그려서 li 태그에 배경으로 채웁니다. 다양한 색상의 선형 그라디언트 사진을 더 알고 싶으시면 여기linear-gradient 属性画一个红中带点绿的渐变图片，并把它当作背景填充给li标签
linear-gradient()可以创建一个多种颜色线性渐变的图片，想了解更多可以看这里
li{ background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%); width: 100%; height: 0.6rem; list-style: none;
}
实际使用中将渐变图换成正常的颜色，如：
background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)
让它动起来
剩下要做的就是让中间的绿色动起来
你可以想一下有什么办法让它动？
这里用到的是，通过拉伸背景图片，动态设置背景定位百分比，改变背景定位，从而计算得到图片相对容器的不同偏移值，以此实现了动画的效果。
li{ background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%); width: 100%; height: 0.6rem; list-style: none; background-size: 400% 100%; background-position: 100% 50%; animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
0% { background-position: 100% 50%;
}
100% { background-position: 0 50%;
}
}
这里给background-position属性设置了两个值，第一个值代表水平位置相对容器的偏移，第二个代表垂直位置相对容器的偏移。
使用百分比设置background-position值时，它会执行一个计算实际定位值公式(container width - image width) * (position x%) = (x offset value)，即容器和图片的宽度差乘上设置的百分比定位值，得到的结果就是实际的偏移值，将background-size的宽度设置为400%的其中一个目的就是，这样就会和容器产生宽度差。
有同学可能会问，将background-size值设为50%，也可以和容器产生宽度差。是的，但是这样，背景图片会平铺整个容器，你会惊喜的发现，绿点变成了double。
你可以试着给background-size设置不同的值，观察它的表现，并想一下为什么会这样。
最后利用关键帧动画，设置background-position在x坐标的值从100%到0%
@keyframes skeleton-loading {
0% { background-position: 100% 50%;
}
100% { background-position: 0 50%;
}
}
假设容器的宽度是100px,那么背景图片的宽度就是400px,利用上边的公式，第一帧的动画中，背景图相对容器偏移的真实值是
(100px-400px)*100% = -300px
最后一帧实际偏移
(100px-400px)*0% = 0
动画的过程实际就是一个3倍容器宽的线性背景图片相对于容器的偏移从-300px到0
실제 사용시 그라디언트 이미지를 다음과 같은 일반 색상으로 변경하세요. 이미지: 선형- 그래디언트(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)🎜🎜
움직이게 해주세요🎜 🎜나머지 중앙에 있는 녹색을 움직이기만 하면 됩니다🎜🎜🎜이를 움직일 수 있는 방법이 있나요? 🎜🎜🎜여기서 사용되는 것은 배경 이미지를 늘리고, 배경 위치 비율을 동적으로 설정하고, 배경 위치를 변경함으로써 컨테이너를 기준으로 이미지의 다양한 오프셋 값을 계산하여 애니메이션 효과를 얻는 것입니다. 🎜rrreee🎜 배경 위치 속성에는 두 가지 값이 설정됩니다. 첫 번째 값은 컨테이너를 기준으로 한 가로 위치의 오프셋을 나타내고 두 번째 값은 세로 위치의 오프셋을 나타냅니다. 컨테이너에. 🎜🎜백분율을 사용하여 배경 위치 값을 설정할 때 실제 위치 값 (컨테이너 너비 - 이미지 너비) * (위치 x%) = (x 오프셋을 계산하는 수식을 수행합니다. value), 즉 컨테이너와 이미지의 너비 차이에 설정된 백분율 위치 값을 곱한 결과가 <code>배경의 너비를 설정하는 목적 중 하나입니다. size를 400%로 설정합니다. 즉, 컨테이너와 너비 차이가 발생합니다. 🎜🎜일부 학생들은 배경 크기 값을 50%로 설정하면 컨테이너와 너비 차이가 발생할 수도 있다고 요청할 수 있습니다. 네, 하지만 이렇게 하면 배경 이미지가 컨테이너 전체를 타일링하게 되고, 녹색 점이 이중으로 변하는 것을 보면 놀랄 것입니다. 🎜🎜🎜배경 크기에 대해 다양한 값을 설정해 보고 성능을 관찰하며 왜 이런 일이 발생하는지 생각해 볼 수 있습니다. 🎜🎜🎜마지막으로 키프레임 애니메이션을 사용하여 x 좌표의 배경 위치 값을 100%에서 0%🎜rrreee🎜로 설정합니다. 컨테이너 너비가 100px이고 배경 이미지의 너비가 400px라고 가정합니다. 위 공식을 사용하면 애니메이션의 첫 번째 프레임에서 오프셋의 실제 값이 됩니다. 컨테이너를 기준으로 한 배경 이미지는 🎜rrreee🎜마지막 프레임의 실제 오프셋🎜rrreee🎜입니다. 애니메이션 프로세스는 실제로 -300px에서 컨테이너를 기준으로 컨테이너 너비의 3배에 해당하는 선형 배경 이미지의 오프셋입니다. 에서 0으로 변경 프로세스를 진행합니다. 🎜🎜🎜관련 튜토리얼 추천: "🎜PHP 프로그래밍 소개 튜토리얼🎜"🎜🎜
위 내용은 CSS를 사용하여 간단한 스켈레톤 화면 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!