效果图
CSS의 도구
@keyframes _fade-in_mkmxd_1 {
0% {
필터: 흐림(20px);
불투명도: 0
}
에게 {
필터: 없음;
불투명도: 1
}
}
@keyframes _drop-in_mkmxd_1 {
0% {
변환: var(--transform) 번역Y(-100px) 번역Z(400px)
}
에게 {
변환: var(--transform)
}
}
._examples_mkmxd_3 {
여백 상단:200px;
위치: 상대;
너비:1000px;
높이: 640px;
전환: .15초의 완화를 변환합니다.
필터: drop-shadow(0 4px 18px rgba(0,0,0,1));
--그리드 너비: 140px;
왼쪽: 50%;
변환: 변환(-50%, 0px);
}
._examples_mkmxd_3 div {
위치: 상대;
전환: 0.25초 완화 필터;
애니메이션: _fade-in_mkmxd_1 .35s 큐빅 베지어(.215,.61,.355,1) var(--delay) 뒤로;
}
._examples_mkmxd_3 div:hover {
필터: drop-shadow(0 4px 8px rgba(0,0,0,.4));
Z-인덱스: 3;
}
._examples_mkmxd_3 a {
위치: 절대;
--transform:spective(75em)rotateX(0deg)rotateZ(-0deg)translate(calc(var(--x) * 100%), calc(var(--y) * 86.67%)) scale(1.145);
변환: var(--transform);
애니메이션: _drop-in_mkmxd_1 .35s 큐빅 베지어(.215,.61,.355,1) var(--delay) 뒤로;
전환: .25초의 완화 변환;
/*클립 경로: 다각형(50% 100%,93.3% 75%,93.3% 25%,50% 0%,6.7% 25%,6.7% 75%);*/
/*클립 경로: 다각형(25% 93.3%,75% 93.3%,93.3% 50%,75% 6.7%,25% 6.7%,6.7% 50%);*/
클립 경로: 다각형(25% 87%,75% 87%,98.3% 50%,75% 13%,25% 13%,1.7% 50%);
}
._examples_mkmxd_3 a:hover{
변환: var(--transform)translateZ(10px) scale(1.1);
}
._examples_mkmxd_3 img {
종횡비: 1;
개체 맞춤: 커버;
높이: 64px;
너비: 64px;
변환: 변환(-50%, 40px);
왼쪽: 50%;
위치: 절대;
/*필터: 드롭 섀도우(2px 2px 0px #00BFFF);*/
}
img {
최대 너비: 100%;
높이: 자동;
디스플레이: 블록;
}
*{
상자 크기 조정: 테두리 상자;
}
.메뉴 상자{
디스플레이: 블록;
너비:200px;
높이:200px;
/*배경:rgba(84, 109, 231,.6);*/
배경: 중간 보라색;
위치: 상대;
}
.메뉴 텍스트{
색상: #fff;
위치: 절대!중요;
상단: 120px;
왼쪽: 50%;
글꼴 두께: 굵게;
변환: 변환(-50%, 0px);
/*필터: 드롭 섀도우(2px 2px 0px #00BFFF);*/
글꼴 크기: 16px;
텍스트 정렬: 중앙;
}
.back-img{
너비: 64px !중요;
위치: 절대;
왼쪽: 50%;
변환: 변환(-50%, 20px);
/*필터: 드롭 섀도우(2px 2px 0px #00BFFF);*/
}
a:hover+.menu-box .menu-text{
색상: #00BFFF;
필터: drop-shadow(2px 2px 0px #fff);
}HTML
<div class="_examples_mkmxd_3" >
<div v-for="(item,index) in tempData" :key="index" :style="{'--delay': item.showTime}">
<a href="#" :title="item.name" @mouseenter="menuEnter(item)" @mouseleave="menuLeave(item)" @click="menuClick(item,tempData)" :style="{' --x': 항목.x, '--y': 항목.y}">
<span class="menu-box" :style="{'Background':item.color}">
<img v-if="item.name!=='上一层'" :src="item.imgPath?item.imgPath:'../img/navigation/화车站.png'" >
<img v-if="item.imgPath&&item.name==='上一层'" :src="item.imgPath" class="back-img">
<span class="menu-text">{{item.name}}</span>
</span>
</a>
</div>
</div>vue代码
새로운 Vue({
엘:'#앱',
데이터(){
반품 {
메뉴데이터:[
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'A系统',img:'',어린이:[
{
x:0,y:0, 경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'B系统',img:'',children:[
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'E系统',img:'',어린이:[]
},
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'A系统',img:'',어린이:[]
},
]
},
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'C系统',img:'',어린이:[]
},
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'D系统',img:'',어린이:[]
},
]
},
{
x:0,y:0, 경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'B系统',img:'../img/navigation/ 화차站.png',어린이:[]
},
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'C系统',img:'',어린이:[]
},
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'D系统',img:'',어린이:[]
},
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'E系统',img:'',어린이:[]
},
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'A系统',img:'',어린이:[]
},
{
x:0,y:0, 경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'B系统',img:'',children:[]
},
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'C系统',img:'',어린이:[]
},
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'D系统',img:'',어린이:[]
},
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'E系统',img:'',어린이:[]
},
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'A系统',img:'',어린이:[]
},
{
x:0,y:0, 경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'B系统',img:'',children:[]
},
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'C系统',img:'',어린이:[]
},
{
x:0,y:0,경로:'https://observablehq.com/@d3/bar-chart/2?intent=fork',이름:'D系统',img:'',어린이:[]
},
],
임시데이터:[],
그림 물감:[
'#1874CD', '#3CB371', '#FF7F50', '#CD1076', '#CD00CD',
'#1C86EE', '#00FF7F', '#FF8C00', '#EE1289', '#EE00EE',
'#1E90FF', '#00FF00', '#FFA500', '#FF1493', '#FF00FF',
]
}
},
보다:{
메뉴데이터(){
this.initCoor()
}
},
마운트(){
_이것을 = 이것으로 놔두세요
this.getUser()
// this.getMenuData()
this.tempData = this.menuData
this.initCoor()
this.timer = setInterval(함수(){
_this.localDate = _this.dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')
},1000)
},
의해 파괴됨(){
클리어 인터벌(this.timer)
},
행동 양식:{
menuEnter(항목){
if(item.name==='상일层')
반품
this.msgData = 항목
this.msgShow = true
},
menuLeave(항목){
this.msgShow = 거짓
},
쇼타임(항목){
if(item.name==='상일层')
'0'을 반환
Math.random()+'를 반환합니다.
},
menuClick(항목,부모){
arr =[]라고 놔두세요
if(item.name==='上一层'){
this.changeMenu(item.children)
}그렇지 않은 경우(item.children.length>0){
arr.push({x:0,y:0,path:'',name:'上一层',imgPath:'../img/navigation/icon-返回上一级.png',children:parant} )
item.children.forEach(t=>{
arr.push(t)
})
this.changeMenu(arr)
}또 다른{
window.location.href = 항목.경로
}
},
변경메뉴(데이터){
_이것을 = 이것으로 놔두세요
this.tempData = []
setTimeout(함수(){
_this.tempData = 데이터
_this.initCoor()
},10)
},
초기화쿠어(){
this.tempData.forEach((t,index)=>{
t.color = this.colors[색인]
t.showTime = this.showTime(t)
if(!t.children){
t.어린이 = []
}
if(인덱스<5){
타이=0
tx=인덱스*0.86
if(색인%2!==0){
타이 += 0.5
// tx = (인덱스-1)+0.8
}
}else if(index>4&&index<10){
타이=1
tx=(인덱스-5)*0.86
if(색인%2===0){
타이 += 0.5
// tx = (인덱스-1)+0.8
}
}else if(index>9&&index<15){
타이=2
tx=(인덱스-10)*0.86
if(색인%2!==0){
타이 += 0.5
// tx = (인덱스-1)+0.8
}
}
})
},
}
})다우 ncodes.com은 이전의 문서와 비교하여 더 많은 downcodes.com을 제공합니다.