Korean English Japanese

움직이는 마우스 버튼 CSS

라이브러리 브랜드

마우스 버튼 아이콘

해당 소스는 Dribbble에서 확인하실 수 있습니다.

 

Micro animation for site scroll icons

Also check little different version in attachment. Thanks. Here are code versions too Created by Awesome guys from codepen. SVG version by Mishka Pankvelashvili and CSS version by Ryan Mulligan Full presentation on Behance

dribbble.com

 

메인 슬라이드 마우스 버튼 아이콘 삽입
메인 슬라이드 마우스 버튼 아이콘 삽입

Also check little different version in attachment. Thanks. Here are code versions too Created by Awesome guys from codepen. SVG version by Mishka Pankvelashvili and CSS version by Ryan Mulligan

Full presentation on Behance

위 내용을 통해서 SVG 버전과 CSS 버전을 통해 소스를 얻을 수 있으며, 티스토리 HTML 스킨편집을 통해서 원하는 위치에 이 버튼을 삽입할 수 있습니다.

CSS/SVG site scroll micro animation (SVG) 버전을 통해 쉽게 적용이 가능하며, HTML 부분에 스킨을 적용하고 CSS에 마우스 버튼 아이콘을 추가하면 미려한 마우스 아이콘을 사용할 수 있습니다.

 

HTML

<div class="mouse-wrap">
	<div class="mouse">
		<div class="frame">
			<svg version="1.1" id="mouse" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 54.9 91" style="enable-background:new 0 0 54.9 91;" xml:space="preserve"><path id="XMLID_173_" class="st0" linejoin="round" stroke-linecap="round" stroke-miterlimit="10" d="M27.4,3.6L27.4,3.6C14.2,3.6,3.5,14.3,3.5,27.5v36c0,13.2,10.7,23.9,23.9,23.9h0 c13.2,0,23.9-10.7,23.9-23.9v-36C51.4,14.3,40.7,3.6,27.4,3.6z"></path></svg>
		</div>
		<div class="mouse-left">
			<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 27.4 91" style="enable-background:new 0 0 27.4 91;" xml:space="preserve"><path linejoin="round" stroke-linecap="round" stroke-miterlimit="10" class="Draw-Frame Animate-Draw" d="M27.4,87.5L27.4,87.5c-13.2,0-23.9-10.7-23.9-23.9v-36c0-13.2,10.7-23.9,23.9-23.9h0"></path></svg>
		</div>
		<div class="mouse-right">
			<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 27.4 91" style="enable-background:new 0 0 27.4 91;" xml:space="preserve"><path linejoin="round" stroke-linecap="round" stroke-miterlimit="10" class="Draw-Frame Animate-Draw" d="M0,3.6L0,3.6c13.2,0,23.9,10.7,23.9,23.9v36c0,13.2-10.7,23.9-23.9,23.9h0"></path></svg>
		</div>
	</div>
	<p>
		Scroll
	</p>
</div>

 

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
	background-color:#21272b;
}
.mouse-wrap {
	display:inline-block;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
p {
	font-family:"Raleway",sans-serif;
	letter-spacing:12px;
	font-size:14px;
	color:#ffffff;
	animation:nudgeText 5.5s ease-out infinite;
	position:absolute;
	left:50%;
	top:90px;
	transform:translateX(-50%) translateY(0);
	margin-left:6px;
}
.mouse {
	top:0;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	width:48px;
	animation:nudgeMouse 5.5s ease-out infinite;
}
.mouse:after {
	content:'';
	background-color:#ffffff;
	width:7px;
	height:7px;
	border-radius:100%;
	animation:trackBallSlide 5.5s linear infinite;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	transform:translateY(20px);
}
.mouse .frame {
	width:100%;
	position:absolute;
	z-index:1;
}
.mouse .frame path {
	fill:none;
	stroke:#ffffff;
	stroke-width:3;
	opacity:0.5;
}
.mouse .mouse-left,.mouse .mouse-right {
	width:50%;
	position:absolute;
	z-index:2;
}
.mouse .mouse-right {
	right:0;
}
.mouse .Animate-Draw {
	fill:none;
	stroke:#FFFFFF;
	stroke-width:3;
	fill-opacity:1;
}
.mouse .mouse-left .Animate-Draw {
	animation:DrawLine 5.5s ease-out infinite;
}
.mouse .mouse-right .Animate-Draw {
	animation:DrawLineBack 5.5s ease-out infinite;
}
/*Keyframes*/ @keyframes DrawLine {
	0% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:1;
	}
	22% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:1;
	}
	38% {
		stroke-dashOffset:125;
		stroke-dasharray:120;
		stroke-opacity:1;
	}
	38.1% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:0;
	}
	48% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:1;
	}
	64% {
		stroke-dashOffset:125;
		stroke-dasharray:120;
		stroke-opacity:1;
	}
	64.1% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:0;
	}
	74% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:1;
	}
	90% {
		stroke-opacity:1;
		stroke-dashOffset:125;
		stroke-dasharray:120;
	}
	90.1% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:0;
	}
}
@keyframes DrawLineBack {
	0% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:1;
	}
	22% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:1;
	}
	38% {
		stroke-dashOffset:-114;
		stroke-dasharray:120;
		stroke-opacity:1;
	}
	38.1% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:0;
	}
	48% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:1;
	}
	64% {
		stroke-dashOffset:-114;
		stroke-dasharray:120;
		stroke-opacity:1;
	}
	64.1% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:0;
	}
	74% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:1;
	}
	90% {
		stroke-opacity:1;
		stroke-dashOffset:-114;
		stroke-dasharray:120;
	}
	90.1% {
		stroke-dashOffset:0;
		stroke-dasharray:120;
		stroke-opacity:0;
	}
}
@keyframes nudgeMouse {
	0% {
		transform:translateY(0) translateX(-50%);
	}
	22% {
		transform:translateY(0px) translateX(-50%);
	}
	38% {
		transform:translateY(9px) translateX(-50%);
	}
	48% {
		transform:translateY(0px) translateX(-50%);
	}
	64% {
		transform:translateY(9px) translateX(-50%);
	}
	74% {
		transform:translateY(0px) translateX(-50%);
	}
	90% {
		transform:translateY(9px) translateX(-50%);
	}
}
/*Text*/ @keyframes nudgeText {
	0% {
		transform:translateY(0) translateX(-50%) scaleY(1);
		opacity:1;
	}
	22% {
		transform:translateY(0px) translateX(-50%) scaleY(1);
		opacity:1;
	}
	38% {
		transform:translateY(5px) translateX(-50%) scaleY(0.9);
		opacity:0.5;
	}
	48% {
		transform:translateY(0px) translateX(-50%) scaleY(1);
		opacity:1;
	}
	64% {
		transform:translateY(5px) translateX(-50%) scaleY(0.9);
		opacity:0.5;
	}
	74% {
		transform:translateY(0px) translateX(-50%) scaleY(1);
		opacity:1;
	}
	90% {
		transform:translateY(5px) translateX(-50%) scaleY(0.9);
		opacity:0.5;
	}
}
/*Mouse wheel*/ @keyframes trackBallSlide {
	0% {
		transform:translateY(20px) scale(1);
		opacity:1;
	}
	22% {
		transform:translateY(20px) scale(1);
		opacity:1;
	}
	26% {
		transform:translateY(30px) scale(0.9);
		opacity:1;
	}
	34% {
		transform:translateY(55px) scale(0.1);
		opacity:0;
	}
	41% {
		transform:translateY(30px) scale(0);
		opacity:0.3;
	}
	48% {
		transform:translateY(20px) scale(1);
		opacity:1;
	}
	52% {
		transform:translateY(30px) scale(0.9);
		opacity:1;
	}
	60% {
		transform:translateY(55px) scale(0.1);
		opacity:0;
	}
	67% {
		transform:translateY(30px) scale(0);
		opacity:0.3;
	}
	74% {
		transform:translateY(20px) scale(1);
		opacity:1;
	}
	78% {
		transform:translateY(30px) scale(0.9);
		opacity:1;
	}
	86% {
		transform:translateY(55px) scale(0.1);
		opacity:0;
	}
	93% {
		transform:translateY(30px) scale(0);
		opacity:0.3;
	}
	100% {
		transform:translateY(20px) scale(1);
		opacity: 1;
	}
}

 

 

css-svg-site-scroll-micro-animation (2).zip
다운로드

 

같이보기

 

스크롤바 없애는 CSS

스크롤 기능은 존재하지만, 스크롤바가 보이지 않는 CSS 부분적으로 적용할 경우, 특정 섹션에는 클래스로 선택자를 잡고 적용하면 된다. 한 웹사이트의 전체에 적용할 경우, 아래의 스타일을 그

creativestudio.kr

 

CSS3 텍스트 그림자 효과(Text Shadow Effects)

CSS3 텍스트 그림자 효과(Text Shadow Effects) 4가지 Elegant Shadow Deep Shadow Inset Shadow Retro Shadow 해당 기술은 텍스트에 그림자 효과를 입히는 방법으로 총 4가지 스타일이 있다. 어떤 스타일을 선택..

creativestudio.kr

 

CSS SVG/CSS Loader 예제

CSS SVG/CSS Loader SVG로 구현할 수 있는 CSS 로더, 티스토리 에디터에서는 적용한 HTML과 CSS 가 실시간 구현되지는 않지만, 콘텐츠에 적용할 수 있다는 것만으로도 매우 좋은 장점을 가지고 있다. 자

creativestudio.kr

저작자표시 비영리 변경금지

'Web Development > CSS' 카테고리의 다른 글

텍스트 링크에 밑줄 없애는 법 CSS  (0) 2022.08.06
CSS3 filter 속성과 함수 및 예제  (0) 2022.08.05
스크롤바 없애는 CSS  (0) 2021.10.07
이미지 클릭 되지 않게 하는 방법 - pointer-events  (0) 2021.07.24
-webkit-이란 무엇인가?  (0) 2021.07.17
간단한 웹배너 만드는 방법  (0) 2021.07.17
CSS 다중 선택자 참조  (0) 2021.07.17
웹 디자인을 위한 디바이스 별 스크린 사이즈  (0) 2021.07.17

이 글을 좋아한 당신을 위한 추천글


카테고리 전체보기

티스토리툴바