@밀라요보비치

작성자설타자|작성시간26.06.13|조회수1 목록 댓글 0

웹피 실제크기 : 360 X 640

배경 실제크기 : 1280 X 853 - 전광판은 투명 처리된 상태입니다

이 플레이어는 크롬화면에 최적화 되어있습니다

분노를 무조건 참는 것도.. 거친 말로 화를 내는 것도.. 좋은 방법이 아니다.. 화를 잘못 표현하면.. 상대는 잘못을 깨닫지 못하고.. 나 또한 상처를 입게 된다....

밀라 요보비치 이미지 다운받기



밀라 요보비치 플레이어..


<style>
.aaha-stage {
    position: relative;
    width: 1280px;
    height: 853px;
    margin: 40px auto;
    overflow: hidden;
    background: #000;
}

/* ================================
   웹피 위치, 크기, 주소
 ================================ */
.aaha-screen {
    position: absolute;
    left: 840px;
    top: 85px;
    width: 300px;
    height: 533px;
    background-image: url('웹피 주소');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* ================================
   배경 크기, 주소
  ================================ */
.aaha-stage::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1280px;
    height: 853px;
    background-image: url('배경 주소');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 2;
    pointer-events: none;
}

/* ================================
   마퀴 
   - 위치 조정: left / top
   - 박스 크기 조정: width / height
================================ */
.aaha-marquee {
    position: absolute;
    left: 852px;
    top: 150px;
    width: 260px;
    height: 42px;
    overflow: hidden;
    z-index: 9998;
    color: #ffffff;
    font-family: 'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',Arial,sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 42px;
    letter-spacing: 1.1px;
    white-space: nowrap;
    text-shadow:
        0 0 2px rgba(255,255,255,0.85),
        0 0 6px rgba(255,255,255,0.45),
        0 2px 5px rgba(0,0,0,0.9);
    pointer-events: none;
}

.aaha-marquee marquee {
    display: block;
    width: 100%;
    height: 42px;
    line-height: 42px;
}

/* ================================
   오디오 플레이어
   - 위치 조정: left / top
   - 크기 조정: width
================================ */
.aaha-audio {
    position: absolute;
    left: 852px;
    top: 660px;
    width: 260px;
    height: 42px;
    z-index: 9999;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    overflow: visible;
}

.aaha-audio audio {
    width: 100%;
    height: 34px;
    display: block;
    opacity: 1;
    background: transparent;
    filter: invert(1) brightness(0.6) contrast(1.05);
}

.aaha-audio audio::-webkit-media-controls-enclosure {
    background: transparent !important;
    box-shadow: none !important;
}

.aaha-audio audio::-webkit-media-controls-panel {
    background: transparent !important;
}
</style>

<div class="aaha-stage">

    <!-- 웹피 / 전광판 안쪽 9:16 영상 이미지 -->
    <div class="aaha-screen"></div>

    <!-- 마퀴 문구 / 전광판 안에서 흐르는 텍스트 -->
    <div class="aaha-marquee">
        <marquee direction="left" scrollamount="3">
       분노를 무조건 참는 것도..&nbsp;&nbsp;&nbsp;&nbsp;
       거친 말로 화를 내는 것도..&nbsp;&nbsp;&nbsp;&nbsp;
       좋은 방법이 아니다..&nbsp;&nbsp;&nbsp;&nbsp;
       화를 잘못 표현하면..&nbsp;&nbsp;&nbsp;&nbsp;
       상대는 잘못을 깨닫지 못하고..&nbsp;&nbsp;&nbsp;&nbsp;
       나 또한 상처를 입게 된다....
       </marquee>
    </div>

    <!-- 오디오  -->
    <div class="aaha-audio">
        <audio src="음악 주소" controls autoplay loop></audio>
    </div>

</div>

다음검색

북마크

댓글 0
댓글쓰기
답글쓰기

댓글 리스트

CAFE

자료보관실2

@밀라요보비치

댓글

카페 검색