먼저 마지막 렌더링
밤에 거리의 광고판과 매우 유사하다는 것을 알았습니까? css를 사용하여 달성하는 방법을 살펴보겠습니다.
구조 분석
우선, 상자를 사용하여 텍스트를 패킹하고 텍스트를 중앙에 배치해야 한다는 것이 명백하며, 상자 주변에 두 개의 밝은 띠가 있는 것을 볼 수 있는데, 이 두 개의 밝은 띠는 어떻게 실현됩니까?
사실 이것은 4개의 작은 상자를 사용하여 이루어집니다.이 4개의 작은 상자를 큰 상자 주위에 놓고(큰 상자의 내벽에 가깝게) 이 작은 상자를 사용하여 스트리머(마키) 효과를 얻습니다.
다음으로 특정 코드 구현을 살펴봅니다.
암호
HTML 구조
먼저 div大슬로건을 위한 상자 하나와 큰천막을 위한 작은 상자 4개를 준비합니다.
<div class="main">
跑马灯
<div></div>
<div></div>
<div></div>
<div></div>
</div>브라우저에서 볼 수 있도록 큰 상자의 스타일을 설정합니다.
body {
background-color: #000;
}
.main {
position: absolute;
width: 400px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);//当为百分百单位时，相对的是自身的宽高
overflow: hidden; //溢出部分隐藏
text-align: center;
line-height: 150px;
background-color: transparent;
color: aquamarine;
font-size: 30px;
font-family: '宋体';
}현재 효과는 이렇습니다
다음으로 큰 상자의 조명 효과를 설정합니다.
인테리어 조명 효과
효과 그림에서 빛의 꼬리 색이 더 밝아지고 머리 색이 더 밝아져 전환 효과를 나타내는 것을 볼 수 있습니다.이 효과는 어떻게 달성됩니까?
background여기서 우리는 css3에서 새로운 속성 값을 사용해야 합니다 linear-gradient: 이 속성을 통해 여러 색상을 상자의 배경색으로 설정할 수 있으며 전환 효과도 있습니다.더 강력한 것은 이 속성 값을 설정할 수 있다는 것입니다. 그라데이션의 방향입니다.
문법:linear-gradient(渐变方向,color1,color2,color3...)
여기서는 #fff, #acd, 시안 그래디언트 3가지 컬러를 골랐습니다.
그런 다음 작은 상자(상단) 중 하나의 효과인 이 속성 값을 사용하여 시작하면 다른 효과도 유사한 방식으로 구현됩니다.
.main div {
position: absolute;
}
.main :nth-child(1) {
top: 0;
left: 0;
width: 100%; //与父盒子等宽
height: 2px; //高要设置得较小
background: linear-gradient(to right, #fff, #acd, cyan);
}상단 조명 효과는 위와 의 속성을 사용하여 상자의 위치를 설정하고 , 를 사용 하여 상자의 너비를 큰 상자와 일치시킨 다음 를 사용하여 top라이트 바의 너비를 2px로 설정합니다. 물론 실제 필요에 따라 사용할 수도 있고 라이트 바의 너비를 변경할 수도 있습니다.leftwidth:100%height:2px
그러면 나머지 3개 조명의 구현 원리는 기본적으로 동일하고 위치와 배경색만 다릅니다.
나머지 오른쪽, 아래, 왼쪽 배경색 그라데이션 방향은 to bottom, to left,to top
현재 효과는 다음과 같습니다.
이것은 우리가 원하는 선택 윤곽 효과와 점점 더 비슷해지고 있습니다.
사실 css3의 애니메이션 애니메이션 속성인 조명에 애니메이션 효과를 추가하는 마지막 단계가 아직 부족합니다.
마찬가지로 상단에 조명 효과를 데모로 설정했습니다.
CSS3 애니메이션:
@keyframes run1 {
from {
transform: translateX(-100%) //初始让它沿X轴负方向（向左）位移自身的宽度
}
to {
transform: translateX(100%) //动画结束时，让它回到原位
}
}
상자 애니메이션
.main :nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
animation: run1 1s linear infinite;//复合属性写法，其中infinite是让动画效果无限循环
background: linear-gradient(to right, #fff, #acd, cyan);
}애니메이션을 설정하기 전에 가장 어두운 부분이 가장 오른쪽에 있는 것을 볼 수 있는데 마키의 구현 요구 사항은 가장 어두운 부분이 왼쪽에서 나타났다가 오른쪽으로 이동하는 것이므로 애니메이션의 초기 위치는 전체 상자 길이에 대해 왼쪽으로 이동하여 요구 사항이
나머지 세 상자의 구현은 비슷합니다.설정 후 마침내 원하는 마키 효과를 얻을 수 있습니다.
css3 애니메이션을 이해하고 싶다면 자세히 설명되어 있는 이 문서를 읽을 수 있습니다.
전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background-color: #000;
}
.main {
position: absolute;
width: 400px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
text-align: center;
background-color: transparent;
line-height: 150px;
color: aquamarine;
font-size: 30px;
font-family: '宋体';
}
.main div {
position: absolute;
}
.main :nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
animation: run1 1s linear infinite;
/* animation-delay: 0s; */
background: linear-gradient(to right, #fff, #acd, cyan);
}
.main :nth-child(2) {
top: 0;
right: 0;
height: 100%;
width: 2px;
animation: run2 1s linear infinite;
/* animation-delay: 1s; 设置动画延迟加载时间*/
background: linear-gradient(to bottom, #fff, #acd, cyan);
}
.main :nth-child(3) {
bottom: 0;
left: 0;
height: 2px;
width: 100%;
animation: run3 1s linear infinite;
/* animation-delay: 2s; 设置动画延迟加载时间*/
background: linear-gradient(to right, #fff, #acd, cyan);
}
.main :nth-child(4) {
top: 0;
left: 0;
height: 100%;
width: 2px;
animation: run4 1s linear infinite;
/* animation-delay: 3s; 设置动画延迟加载时间 */
background: linear-gradient(to top, #fff, #acd, cyan);
}
@keyframes run1 {
from {
transform: translateX(-100%)
}
to {
transform: translateX(100%)
}
}
@keyframes run2 {
from {
transform: translateY(-100%)
}
to {
transform: translateY(100%)
}
}
@keyframes run3 {
from {
transform: translateX(100%)
}
to {
transform: translateX(-100%)
}
}
@keyframes run4 {
from {
transform: translateY(100%)
}
to {
transform: translateY(-100%)
}
}
</style>
<body>
<div class="main">
海绵宝宝
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>마지막으로 이 글이 Arigado에게 도움이 되었기를 바랍니다.