<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animal frame</title>
<style>
.container {
height: auto;
width: 100%;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
border: 1px solid red;
}
.super {
width: 800px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.sub {
width: 1600px;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid darkblue;
background-color: rgba(88, 88, 88, 0.9);
z-index: 100;
color: aliceblue;
animation: myShow 0.5s infinite ease;
animation-iteration-count: 1;
animation-direction: alternate;
-webkit-animation: myShow 0.5s infinite ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
}
tr:hover {
cursor: pointer;
background-color: azure;
}
@keyframes myShow {
from {
right: -1600px;
opacity: 0;
}
to {
right: 0px;
opacity: 1;
}
}
@-webkit-keyframes myShow {
from {
right: -1600px
}
to {
right: 0px
}
}
</style>
</head>
<body>
<div class="container">
<table id="superTable" border="1" cellpadding="0" cellspacing="0" class="super">
<thead>
<th>sub col 1</th>
<th>sub col 2</th>
<th>sub col 3</th>
</thead>
<tbody>
<tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
<td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td>
<td>row 2 col 2</td>
<td>row 2 col 3</td>
</tr>
<tr>
<td>row 3 col 1</td>
<td>row 3 col 2</td>
<td>row 3 col 3</td>
</tr>
</tbody>
</table>
<div id="sub" class="sub">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
<td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td>
<td>row 2 col 2</td>
<td>row 2 col 3</td>
</tr>
<tr>
<td>row 3 col 1</td>
<td>row 3 col 2</td>
<td>row 3 col 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
let sub = document.querySelector("#sub");
sub.style.display = 'none';
let s = document.querySelector("#super");
let st = document.querySelector("#superTable");
let dataRows = st.querySelector("tbody").querySelectorAll("tr");
dataRows.forEach(row => {
row.onclick = e => {
let cells = e.target.cells;
if (cells) {
} else {
cells = e.target.parentNode.cells;
}
let content = cells[0].innerText
console.log(content);
sub.style.display = sub.style.display == 'none' ? 'block' : 'none';
}
})
</script>
</body>
</html>
CSS3 动画 简单的应用
猜你喜欢
转载自blog.csdn.net/csdn_meng/article/details/105375757
今日推荐
周排行