원생 JS+CSS 멋 진 중력 시 뮬 레이 션 점프 시스템 로그 인 페이지 구현
효과 그림:
하지만 코드 를 보기 전에 먼저 소 영 과 css 의 opacity,transition,box-shadow 세 가지 속성 을 보 세 요.
1.opacity
CSS 3 불투명 도 속성
실례
div 요소 의 투명도 단 계 를 설정 합 니 다:
div
{
opacity:0.5;
}브 라 우 저 지원
Internet ExplorerFirefoxOperaGoogle ChromeSafari
모든 주류 브 라 우 저 는 opacity 속성 을 지원 합 니 다.
메모:IE8 과 초기 버 전 은 다른 필터 속성 을 지원 합 니 다.이미지:filter:Alpha(opacity=50)
속성 정의 및 사용 설명
Opacity 속성 은 투명도 단 계 를 설정 합 니 다.
기본 값:
1
계승:
no
버 전:
CSS3
JavaScript 문법:
object.style.opacity=0.5
문법
opacity: value|inherit;값.묘사 하 다.
value
불투명 도 를 지정 합 니 다.0.0(완전 투명)에서 1.0(완전 불투명)까지
inherit
Opacity 속성의 값 은 부모 요소 로부터 계승 해 야 합 니 다.
2.transition
역할:요 소 를 한 스타일 에서 다른 효과 로 바 꿉 니 다.
정의 와 용법
transition 속성 은 네 개의 과도 속성 을 설정 하 는 데 사용 되 는 약자 속성 입 니 다.
문법
transition: property duration timing-function delay;값.묘사 하 다.
transition-property
과도 효 과 를 설정 하 는 CSS 속성의 이름 을 지정 합 니 다.
transition-duration
과도 효 과 를 완성 하 는 데 몇 초 또는 밀리초 가 필요 한 지 규정 하 다.
transition-timing-function
속도 효 과 를 규정 하 는 속도 곡선.
transition-delay
과도 효과 가 언제 시작 되 는 지 정의 합 니 다.
3.box-shadow
역할:요소 에 그림자 효 과 를 추가 합 니 다.
정의 와 용법
box-shadow 속성 은 상자 에 하나 이상 의 그림 자 를 추가 합 니 다.
알림:border-image-*속성 을 사용 하여 예 쁜 신축 단 추 를 만 드 세 요!
기본 값:
none
계승 성:
no
버 전:
CSS3
JavaScript 문법:
object.style.boxShadow="10px 10px 5px #888888"
문법
box-shadow: h-shadow v-shadow blur spread color inset;설명:box-shadow 는 상자 에 하나 이상 의 그림 자 를 추가 합 니 다.이 속성 은 쉼표 로 구 분 된 그림자 목록 으로 그림자 마다 2-4 개의 길이 값,선택 할 수 있 는 색상 값,선택 할 수 있 는 inset 키워드 로 정 합 니 다.길 이 를 생략 한 값 은 0 입 니 다.값.
묘사 하 다.
테스트
h-shadow
필수수평 음영 의 위치.마이너스 허용.
테스트
v-shadow
필수수직 그림자 의 위치.마이너스 허용.
테스트
blur
선택 할 수 있다.모호 한 거리.
테스트
spread
선택 할 수 있다.음영 사이즈.
테스트
color
선택 할 수 있다.음영 의 색.CSS 색상 값 을 참조 하 십시오.
테스트
inset
선택 할 수 있다.외부 그림자(outset)를 내부 그림자 로 변경 합 니 다.
테스트
어떻게 이 루어 졌 을 까?하하 하,코드 는 여기 보 세 요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
overflow: hidden;
}
#bg_wrap {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
#bg_wrap div {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
/* */
transition: opacity 3s;
}
/* nth-of-type(1) * */
#bg_wrap div:nth-of-type(1) {
opacity: 1;
}
#Login {
width: 272px;
height: 300px;
margin: 200px auto;
}
#Login .move {
position: absolute;
top: -100px;
z-index: 999;
}
#Login h3 {
width: 270px;
font-size: 30px;
font-weight: 700;
color: #fff;
font-family: ' ';
text-align: center;
margin-bottom: 30px;
cursor: move;
/* top: 100px; */
}
/* #username {
top: 170px;
}
#password {
top: 225px;
} */
#Login input.text {
width: 270px;
height: 42px;
color: #fff;
background: rgba(45, 45, 45, 0.15);
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 1.0) inset;
text-indent: 10px;
}
#Login input.btn {
/* top: 280px; */
background: #ef4300;
width: 272px;
height: 44px;
border-radius: 6px;
color: #fff;
box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 7px 0 rgba(0, 0, 0, 0.2);
/* -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 7px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 7px 0 rgba(0, 0, 0, 0.2); */
border: 0;
text-align: center;
}
/* #Login input.focus {
outline: none;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2) inset;
} */
input::-webkit-input-placeholder {
color: #fff;
}
</style>
</head>
<body>
<div id="bg_wrap">
<div><img src="images/1.jpg" width="100%" height="100%"></div>
<div><img src="images/2.jpg" width="100%" height="100%"></div>
<div><img src="images/3.jpg" width="100%" height="100%"></div>
</div>
<div id="Login">
<h3 id="title" class="move">User Login</h3>
<form action="#" method="post" target="_blank">
<input type="text" placeholder="UserName" name="username" id="username" class="text move">
<input type="password" placeholder="PassWord" name="password" id="password" class="text move">
<input type="submit" value="Sign in" class="btn move" id="submit">
</form>
</div>
<script type="text/javascript">
/* */
/*function(){}
()() IIFE ， */
(function() {
var timer = null; //
var oImg = document.querySelectorAll('#bg_wrap div') //h5
//querySelector ie8
var len = oImg.length; //3
var index = 0;
timer = setInterval(function() {
oImg[index].style.opacity = 0;
index++;
// if(index>=3){
// index=0;
// }
index %= len; //index=index%len 0%3=0; 1%3=1; 2%3=2; 3%3=0;
oImg[index].style.opacity = 1;
}, 2000);
})();
//
(function() {
/*
top
*/
var oMove = document.querySelectorAll('.move');
var oLen = oMove.length;
var timer = null;
var timeout = null;
var speed = 3; //
move(oLen - 1);
function move(index) {
if (index < 0) {
clearInterval(timer); //
clearTimeout(timeout); //
return; //
}
var endTop = 150 + (index * 60); // endTop
timer = setInterval(function() {
speed += 3;
var T = oMove[index].offsetTop + speed; // top
if (T > endTop) {
T = endTop;
speed *= -1 // ，
speed *= 0.4;
//
}
oMove[index].style.top = T + 'px';
}, 20);
timeout = setTimeout(function() {
clearInterval(timer);
index--;
console.log(9);
move(index);
console.log(index);
}, 900) // 900
}
})()
</script>
</body>
</html>앞서 소 편 이 소개 한 원생 JS+CSS 의 시 크 한 중력 모 의 점프 시스템 을 구현 한 로그 인 페이지 입 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 이 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
