3D立方体信息提交

下载代码

html

css

分享到微信朋友圈

html

<div class="scene">
    <div class="cube">
		 <nav class="steps">
			 <div class="dot step_1 done"></div>
			 <div class="dot step_2"></div>
			 <div class="dot step_3"></div>
			 <div class="dot step_4"></div>
			 <div class="dot step_5"></div>
			 <div class="dot step_6"></div>
		 </nav>
		   <div class="cube__face  cube__face--front" id="step__1">
            <div class="container">
					<input type="text" class="label" placeholder="请选择一种颜色" disabled>
					<div class="radio">
						<div class="item blue" data-color="blue"></div>
						<div class="item yellow" data-color="yellow"></div>
						<div class="item purple" data-color="purple"></div>
						<div class="item green" data-color="green"></div>
						<div class="item violet" data-color="violet"></div>
					</div>
                <div class="btn" style="display:none">
                    <span data-step="1">Continue</span>
                </div>
            </div>
        </div>
        <div class="cube__face cube__face--bottom" id="step__2">
            <div class="container">
                <input type="text" placeholder="What's your full name ?">
                <div class="btn">
                    <span data-step="2">Continue</span>
                </div>
            </div>
        </div>
        <div class="cube__face" id="step__3">
            <div class="container">
                <input type="email" placeholder="告诉我你的电子邮件地址">
                <div class="btn">
                    <span data-step="3">Continue</span>
                </div>
            </div>
        </div>
        <div class="cube__face" id="step__4">
            <div class="container">
                <input type="text" placeholder="你的爱号（至少4个字符）">
                <div class="btn">
                    <span data-step="4">Continue</span>
                </div>
            </div>
        </div>
        <div class="cube__face" id="step__5">
            <div class="container">
		<select name="fav_color" id="fav_color">
                    <option disabled selected>选择你最喜欢的忍者龟</option>
                    <option value="Leo">Leo</option>
                    <option value="Mikey">Mikey</option>
                    <option value="Donnie">Donnie</option>
                    <option value="Raph">Raph</option>
                </select>
                <div class="btn">
                    <span data-step="5">Continue</span>
                </div>
				</div>
        </div>
        <div class="cube__face" id="step__6">
			  <div class="container">
			  <input type="text"  class="label" placeholder="你真棒!" disabled>
			  <div class="right">
				  <label for="">No</label>
				  <div class="checkbox">
					  <div class="circle"></div>
				  </div>
				  <label for="">Yes</label>
				</div>
			</div>
		 </div>
    </div>
</div>
<div class="welcome">
	<div class="content">Welcome !</div>
</div>

css

* {
    box-sizing: border-box;
}

body {
    font-family: helvetica;
    height: 100vh;
    width: 100vw;
    background: #e90052;
    margin: 0;
    display: flex;
	transition:background 0.5s;
}

.scene {
    width: 650px;
    height: 70px;
    /*   margin: 80px; */
    perspective: 400px;
    margin: auto;
    position: relative;
	transition:opacity 0.5s;
	z-index:2;
}

.scene.end{
	opacity:0;
	transition-delay:0.25s;
	transition:opacity 0.5s;
	z-index:0;
}

.welcome{
	opacity:0;
	width:100%;
	position:absolute;
	height:100%;
	display:flex;
	transition-delay:0.25s;
	transition:opacity 0.5s;
}

.welcome .content{
	margin:auto;
	font-size:2rem;
	color:#ffffff;
}

.welcome.show{
	opacity:1
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-100px);
}

.steps{
	position:absolute;
	top:140%;
	display:flex;
	width:100%;
	justify-content:center;
}

.steps .dot{
	width:15px;
	height:15px;
	background:rgba(0,0,0,0.75);
	border-radius:100%;
	margin:0 10px;
	transition:0.25s;
}

.steps .dot.done{
	background:rgba(255,255,255,0.75);
}

.cube__face {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 40px;
    font-weight: bold;
    transition: transform 0.5s;
    opacity: 0;
    background: #ffffff;
    border-radius: 5px;
}

.cube__face--front {
    transform: rotateY( 0deg) translateZ(35px);
    opacity: 1;
    box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.5);
}

.cube__face--top {
    transform: rotateX( 90deg) translateZ(35px);
    opacity: 1;
}

.cube__face--top .container{
	opacity:0;
	transition:opacity 0.5s;
}

.cube__face--bottom {
    transform: rotateX(-90deg) translateZ(35px);
}

.hidden {
    display: none;
}

input:not([type=radio]),
select{
    display: block;
    margin: 0;
    /*     padding: 0 0 0.15em; */
/*     padding-left: 50px; */
    width: 100%;
    border: none;
    background-color: transparent;
    color: #202020;
    text-overflow: ellipsis;
    font-weight: normal;
    font-size: 1.5rem;
    height: 100%;
    /* 	padding-right:185px; */
}

input:focus,
select:focus {
    outline: none;
}

input::placeholder {
    color: #a0a0a0;
}

.cube__face .container {
    height: 100%;
    width: 100%;
    position: relative;
    padding-right: 185px;
	padding-left: 50px;
}

div.btn.show {
	opacity:1 !important;
}

div.btn.show span{
	display:block !important;
}

div.btn {
    position: absolute;
    right: 10px;
    top: 0;
    height: 100%;
    display: flex;
	transition:opacity 0.25s ease;
	opacity:0;
}

div.btn span {
    color: #e90052;
    font-size: 1.25rem;
    padding: 10px 25px;
    border: 3px solid #e90052;
    border-radius: 40px;
    display: inline-block;
    margin: auto;
    cursor: pointer;
	transition: all 0.25s;
	display:none;
}

div.btn span:hover {
    color: #ffffff !important;
    background: #e90052;
}

input.label::placeholder{
	color:#202020 !important;
}

#step__1 .container,#step__6 .container{
	display:flex;
	padding-right:10px;
}

.radio{
	display:flex;
	align-items:center;
}

.item{
	width:46px;
	height:46px;
	margin:2px;
	cursor:pointer;
	transition:transform 0.25s;
	border-radius:4px;
}

.item:hover{
	transform:scale(1.2)
}

body.blue,.item.blue{
	background:#04f5ff;
}

body.yellow,.item.yellow{
	background:#EBFF00;
}

body.purple,.item.purple{
	background:#e90052;
}

body.green,.item.green{
	background:#00ff85;
}

body.violet,.item.violet{
	background:#38003c;
}

div.btn.blue span{
	color: #04f5ff;
	border-color:#04f5ff;
}

div.btn.blue span:hover{
	background:#04f5ff;
}

div.btn.yellow span{
	color: #EBFF00;
	border-color:#EBFF00;
}

div.btn.yellow span:hover{
	background:#EBFF00;
}

div.btn.purple span{
	color: #e90052;
	border-color:#e90052;
}

div.btn.purple span:hover{
	background:#e90052;
}

div.btn.green span{
	color: #00ff85;
	border-color:#00ff85;
}

div.btn.green span:hover{
	background:#00ff85;
}

div.btn.violet span{
	color: #38003c;
	border-color:#38003c;
}

div.btn.violet span:hover{
	background:#38003c;
}

.right{
	display:flex;
	align-items: center;
}

.right label{
	font-size: 1.5rem;
	font-weight: normal;
}

.checkbox{
	padding:4px;
	border:3px solid #e90052;
	display:inline-block;
	width:64px;
	border-radius:40px;
	margin:auto 8px;
}

.checkbox .circle{
	height:25px;
	width:25px;
	border-radius:100%;
	background: #e90052;
	display:block;
	transform:translateX(0px);
	transition:transform 0.25s ease,background 0.25s ease;
}

.checkbox.checked{
	background:#e90052;
}

.checkbox.checked .circle{
	transform:translateX(25px);
	background:white !important;
}

.checkbox.blue{
	border-color: #04f5ff;
}

.checkbox.blue .circle{
	background:#04f5ff;
}

.checkbox.checked.blue{
	background:#04f5ff;
}

.checkbox.yellow{
	border-color: #EBFF00;
}

.checkbox.yellow .circle{
	background:#EBFF00;
}

.checkbox.checked.yellow{
	background:#EBFF00;
}

.checkbox.purple{
	border-color: #e90052;
}

.checkbox.purple .circle{
	background:#e90052;
}

.checkbox.checked.purple{
	background:#e90052;
}

.checkbox.green{
	border-color: #00ff85;
}

.checkbox.green .circle{
	background:#00ff85;
}

.checkbox.checked.green{
	background:#00ff85;
}

.checkbox.violet{
	border-color: #38003c;
}

.checkbox.violet .circle{
	background:#38003c;
}

.checkbox.checked.violet{
	background:#38003c;
}

JavaScript

const btn = document.querySelectorAll('.btn span');

for(let i=0; i<btn.length ; i++){
	btn[i].addEventListener('click',function(){
	document.querySelector('nav .dot.step_'+ (parseInt(this.getAttribute('data-step'))+1) +'').classList.add('done')
	turn(parseInt(this.getAttribute('data-step')));

})
}

function turn(step){
	
	if(!!document.querySelector('#step__' + (step-1))){
		document.querySelector('#step__' + (step-1)).classList.add('hidden');
	}
	
	document.querySelector('#step__' + step).classList.add('cube__face--top');
	document.querySelector('#step__' + step).classList.remove('cube__face--front');

step+=1;
	if(!!document.querySelector('#step__' + step)){
		document.querySelector('#step__' + step).classList.add('cube__face--front');
		if(!!document.querySelector('#step__' + step + ' input')){
			document.querySelector('#step__' + step + ' input').focus();
		}
		document.querySelector('#step__' + step).classList.remove('cube__face--bottom');
	}
	
	step+=1;
	if(!!document.querySelector('#step__' + step)){
			document.querySelector('#step__' + step).classList.add('cube__face--bottom');
	}
}

const colors = document.querySelectorAll('.radio .item');
const btns = document.querySelectorAll('.btn');

for(var i=0; i<colors.length;i++){
	colors[i].addEventListener('click',function(){
		this.closest('.container').querySelector('.btn span').click();
		document.body.classList.add(this.getAttribute('data-color'));
		for(var j=0; j<btns.length; j++){
			btns[j].classList.add(this.getAttribute('data-color'));
		}
		document.querySelector('.checkbox').classList.add(this.getAttribute('data-color'));
	})
}

document.querySelector('.checkbox').addEventListener('click', function(){
	this.classList.toggle('checked');
	document.querySelector('.scene').classList.add('end');
	
	document.querySelector('.welcome').classList.add('show');
})

document.querySelector('select').addEventListener('change',function(){
	this.closest('.container').querySelector('.btn').classList.add('show');
})

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg