Menu

https://webtool.yah101.com/ko/e_d/Base64_Encode

<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#7BF4F7"  d="M512 209.403241c-201.731514 ></path></svg>

색상을 변경해서 암호화 하고 입력에 넣음 <path fill="#7BF4F7"

background-image: url(data:image/svg+xml;base64,입력 )}

사용된 제품 : SSD 740, 2230, 1T

최근 호기심으로, 펀샵에서 하는 제품으로  SHARGE DISK & DOCKCASE 스마트 포켓 SSD Enclosure
두 제품을 모두 구매해서 사용해 봄 일단 안드로이드에서 작동하는걸 기대했는데...
아무래도 NTFS는 모바일에서 작동하기 힘든 거 같음 그렇다고  exFAT 는 안정성이 떨어져서 자료가 없어질 수 있다고 함
그래서  찾아보니까

여기서 exFAT/NTFS for USB    (NTFS 부분을 유로 구매함, 가격도 저렴하니 하는 게 좋음
그리고 SSD 하드를 컴퓨터로 연결하고 자료를 받고 조각모음을 해주면 됨 그럼 인식이 될 것임

좋은점 

SHARGE DISK : 읽기 쓰기 제한 버튼이 있고 , 온도가 낮음 디자인 이쁨 

DOCKCASE :강제로 연결을 끊으면 3초간 전력을 유지 하여 데이터 전송 오류를 방지함 

단점

 SHARGE DISK : 소음이 있음 약간의 연결 오류가 있어보임

DOCKCASE : 발열이  SHARGE DISK  보다 높다.. 

 속도가 빠르니 사용 빈도는 별로 없을듯 20 ~ 40기가는 1분안에 다 되니까 쓸만하다.

https://support.google.com/googleplay/answer/7018481?hl=ko&co=GENIE.Platform%3DAndroid

가우르 구라 영상에서 소리를 직접 따서 만들었습니다. 

출처: https://www.youtube.com/@GawrGura

z-index: 2; 부분은 블로그에 맞게 수정해 주세요.
가우르 구라 효과음 원하는 효과음 넣어서 해주세요.

<a id="BackToTop" href="#" title="위로 가기">
<img src="" alt="위로 가기" />
</a>
</div>

<script>
jQuery(function($) {
    var images = [
        './images/maste.webp',
        './images/이미지주소',
        './images/이미지주소'
    ];

    var randomImage = images[Math.floor(Math.random() * images.length)];

    $('#BackToTop img').attr('src', randomImage);

    $('#BackToTop').click(function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: 0 }, '500');
    });
});
</script>

css --부분 
#BackToTop {
    bottom: 0;
    right: 0;
    position: fixed;
    opacity: 0.5; 투명도
    transition: all .5s;
    cursor: pointer;
    transform: scale(.5, .5); -이미지 사이즈
    transform-origin: right bottom;
    display: none; 
	z-index: 1;
}

@media (min-width: 1000px) {
    #BackToTop {
        display: block;
    }
}

#BackToTop:hover { 마우스오버레이
    opacity: 1;
}

오늘도 웹 서핑을 하다가 귀여운 코드를 발견했네요.

원본 : https://github.com/xiamuguizhi/Typecho-BackToTop/tree/master

티스토리에 맞게 수정했습니다.
반응형 부분은 스킨에 맞게 수정해서 사용해 주세요. 기본적으로 1000px 아래로는 안 보이게 됩니다.

패러디할 때 좋을 거 같습니다.~ 

사이트 : https://lab.nulla.top/ba-logo

웹 서핑을 하다가 재미있는 위젯을 발견하여 소개합니다. 리코 리스 리코일 4화에서 등장하는 장면으로 두 주연이 하는 동작을 위젯으로 패러디한 거 같습니다.

https://github.dsrkafuu.net/sakana-widget/ 

사카나 위젯  다른 이미지로 바꿔서 사용 가능하다고 합니다. 

부분만 붙여넣기 하면 이런 식으로 

통통 튕기는 게 재미있네요.

<!--마법진 애니메이션-->
<div class="absolute_bg_book_open"> 
<img class="magic_parts1_bg" src="./images/Magiccircle1.svg" alt="Magic circle1"> 
<img class="magic_parts2_bg" src="./images/Magiccircle2.svg" alt="Magic circle2"> 
<img class="magic_parts3_bg" src="./images/Magiccircle3.svg" alt="Magic circle3"> 
<img class="magic_parts4_bg" src="./images/Magiccircle4.svg" alt="Magic circle4"> 
<img class="magic_parts5_bg" src="./images/Magiccircle5.svg" alt="Magic circle5"> 
</div>


css ---
.absolute_bg_book_open {
	margin: 15% 0 0 -40%;
  top: 98px;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  position: absolute;
  align-items: center;
}

.absolute_bg_book_open .magic_parts1_bg {
  width: 15%;
  z-index: -1;
  border-radius: 50%;
  animation: spin-reverse 120s infinite linear;
	filter: drop-shadow(10px 0px 0px rgb(0, 45, 248)) invert(0%);

}
.absolute_bg_book_open .magic_parts2_bg {
  width: 19%;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  animation: spin-reverse2 180s infinite linear;
	filter: drop-shadow(0px 0px 0px rgb(245, 47, 47)) invert(100%);
}
.absolute_bg_book_open .magic_parts3_bg {
  width: 26%;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  animation: spin-reverse 100s infinite linear;
	filter: drop-shadow(8px 0px 0px rgb(34, 132, 243)) invert(1%);
	
}
.absolute_bg_book_open .magic_parts4_bg {
  width: 53%;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  animation: spin-reverse2 150s infinite linear;
	filter: grayscale(40%);

}
.absolute_bg_book_open .magic_parts5_bg {
  width: 59%;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  animation: spin-reverse 220s infinite linear;
	filter: grayscale(100%); 
}


@keyframes spin {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(225deg);
  }
}
@keyframes spin-reverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes spin-reverse2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes setup {
  0% {
    top: 40%;
    transform: scale(1.5);
    font-size: 450%;
    opacity: 0;
    filter: blur(5px);
  }
  25% {
    top: 40%;
    transform: scale(1.5);
    font-size: 450%;
    opacity: 1;
    filter: blur(0px);
  }
  70% {
    top: 40%;
    transform: scale(1.5);
    font-size: 450%;
    opacity: 1;
    filter: blur(0px)
  }
  85% {
    top: 40%;
    transform: scale(1.5);
    font-size: 450%;
    opacity: 0;
    filter: blur(15px)
  }
  90% {
    top: 0%;
    transform: scale(0.5);
    font-size: 150%;
    opacity: 0;
    filter: blur(15px)
  }
  100% {
    top: 0;
    transform: scale(1);
    font-size: 150%;
    opacity: 1;
    filter: blur(0px)
  }
}

키프레임을 이용한 마법진 

이미지 사이즈 1920x1080

티스토리 블로그 배경으로 하려면 https://pixlr.com/kr/e/

webp 확장자  변환 사용  opacity 1; 넣어주셈