이전 글 "CSS를 사용하여 사실적인 물 파급 효과를 만드는 방법을 단계별로 가르쳐주세요(코드 포함)"에서는 CSS를 사용하여 사실적인 물 파급 효과를 만드는 방법을 소개했습니다. 다음 기사에서는 CSS3를 사용하여 러브 로딩을 만드는 방법을 소개합니다.
웹 페이지에는 이러한 CSS3 사랑 로드가 종종 있습니다. 렌더링을 본 후 이를 구현하는 방법을 연구하고 html+css 이미지 및 텍스트 레이아웃의 기본 프로세스를 설명하겠습니다. .
효과는 다음과 같습니다
1. 먼저 새 HTML 파일을 만들고 9개의div
태그를 정의합니다.div
标签。
2、开始定义css样式来进行修饰添加background-color
属性设置背景颜色,宽度设置为100%,高度设置为100%,margin
属性设置所有外边距属性。
body { width: 100%; height: 100%; margin: 0; background-color: #ccc; }
3、container标题文本样式,利用align-items
属性居中对齐。
.container { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center;
4、header标题文本样式,利用position
属性指定一个元素定位。
.header { position: relative; width: 138px; /* display: flex; */
5、class*='header-'标题文本样式,利用position
属性定位元素,语法“position: absolute;top: -5px;border-radius: 5px
”生成绝对定位的元素。
[class*='header-']{ position: absolute; width: 10px; height: 10px; top: -5px; border-radius: 5px; }
6、header0-8标题文本样式,利用animation
(动画)属性绑定到每8个元素,让元素摆动起来。
.header-0, .header-8 { animation: header-0 3.2s infinite; } .header-1, .header-7 { animation: header-1 3.2s infinite; } .header-2, .header-6 { animation: header-2 3.2s infinite; } .header-3, .header-5 { animation: header-3 3.2s infinite; } .header-4 { animation: header-4 3.2s infinite; }
7、使用4个@keyframes
规则,给4个创建动画逐步改变0%是开头动画,100%。
@keyframes header-0 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 30px; top: -10px; } } @keyframes header-1 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 60px; top: -31px; } } @keyframes header-2 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 80px; top: -37px; } } @keyframes header-3 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 90px; top: -31px; } } @keyframes header-4 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 94px; top: -23px; }
8、header0-8标题文本样式添加animation-delay
属性等待1秒然后开始动画,background
.header-0 { left: 0; animation-delay: 0s; background: #92fe9d; } .header-1 { left: 16px; animation-delay: 0.15s; background: #00c9ff; } .header-2 { left: 32px; animation-delay: 0.3s; background: #ff758c; } .header-3 { left: 48px; animation-delay: 0.45s; background: #ff7eb3; } .header-4 { left: 66px; animation-delay: 0.6s; background: #fa71cd; } .header-5 { left: 82px; animation-delay: 0.75s; background: #6f86d6; } .header-6 { left: 98px; animation-delay: 0.9s; background: #f9f586; } .header-7 { left: 114px; animation-delay: 1.05s; background: #b1f4cf; } .header-8 { left: 130px; animation-delay: 1.2s; background: #fef9d7; }
background-color
속성을 추가하고 너비를 100%로 설정하고 높이를 100%로 설정합니다. code>margin속성. 모든 여백 속성.
3. 컨테이너 제목 텍스트 스타일,
align-items
속성을 사용하여 가운데 정렬하세요.
rrreee4. 헤더 제목 텍스트 스타일,
position
속성을 사용하여 요소의 위치를 지정하세요.
5. class*='header-'title 텍스트 스타일,position
속성을 사용하여 요소 위치 지정, 구문은 "position:absolute;top: -5px;border- radius: 5px
code>"는 절대 위치에 있는 요소를 생성합니다.
6. Header0-8 제목 텍스트 스타일,animation
(애니메이션) 속성을 사용하여 요소가 흔들리도록 8개 요소마다 바인딩합니다.rrreee7. 4개의@keyframes
규칙을 사용하여 오프닝 애니메이션에 대해 생성된 4개의 애니메이션을 0%에서 100%까지 점진적으로 변경합니다.
animation-delay
속성을 추가하고 애니메이션을 시작하기 전에 1초 동안 기다립니다. 8개의 요소를 묶습니다. rrreee코드 효과가 나왔습니다아래 전체 코드rrreee추천 학습: CSS 비디오 튜토리얼
위 내용은 초급 기사: CSS3를 사용하여 러브 로딩을 만드는 방법(자세한 코드 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!