Skip to content

Commit

Permalink
fixed 部分页面无法正常预览
Browse files Browse the repository at this point in the history
  • Loading branch information
linyisonger committed Oct 12, 2024
1 parent 24c0342 commit 63fb59a
Show file tree
Hide file tree
Showing 10 changed files with 1,850 additions and 1,831 deletions.
195 changes: 92 additions & 103 deletions 017.瀑布流效果.html
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,47 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/global.css">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./assets/global.css" />

<style>
/* 第一种 */

.masonry {
column-count: 4;
column-gap: 0;
}

.item {
padding: 2px;
position: relative;
counter-increment: item-counter;
}

.item img {
display: block;
width: 100%;
height: auto;
}

.item::after {
position: absolute;
display: block;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
background-color: #000;
color: #fff;
content: counter(item-counter);

}


/* 第二种 */
/* .masonry {
/* 第一种 */

.masonry {
column-count: 4;
column-gap: 0;
}

.item {
padding: 2px;
position: relative;
counter-increment: item-counter;
}

.item img {
display: block;
width: 100%;
height: auto;
}

.item::after {
position: absolute;
display: block;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
background-color: #000;
color: #fff;
content: counter(item-counter);
}

/* 第二种 */
/* .masonry {
display: flex;
flex-direction: column;
flex-wrap: wrap;
Expand Down Expand Up @@ -98,66 +95,58 @@
} */
</style>
</head>
</head>

<body>
<body>
<div class="masonry">
<div class="item">
<img src="http://placekitten.com/g/360/460?random=1" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/360?random=2" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/260?random=3" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/560?random=4" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/260?random=5" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/320?random=6" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/310?random=7" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/330?random=8" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/310?random=9" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/140?random=10" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/240?random=11" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/640?random=12" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/440?random=13" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/240?random=14" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/130?random=15" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/640?random=16" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/430?random=17" alt="">
</div>
<div class="item">
<img src="http://placekitten.com/g/360/460?random=18" alt="">
</div>
<div class="item">
<img src="http://iph.href.lu/360x460" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x360" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x260" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x560" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x260" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x320" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x310" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x330" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x310" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x140" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x240" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x640" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x440" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x240" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x130" alt="" />
</div>
<div class="item">
<img src="http://iph.href.lu/360x640" alt="" />
</div>
</div>

</body>

</html>
</body>
</html>
108 changes: 53 additions & 55 deletions 019.翻牌效果.html
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,60 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/global.css">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./assets/global.css" />
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.card-container {
width: 300px;
height: 400px;
position: relative;
perspective: 1000px;
}

.cover,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
transition: transform .5s ease-in-out;
}

.cover {
background-image: url("http://placekitten.com/g/300/400?random=1");
transform: rotateY(0deg);
}

.back {
background-image: url("http://placekitten.com/g/300/400?random=2");
transform: rotateY(180deg);

}

.card-container:hover .cover {
transform: rotateY(180deg);
}

.card-container:hover .back {
transform: rotateY(0deg);
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.card-container {
width: 300px;
height: 400px;
position: relative;
perspective: 1000px;
}

.cover,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
transition: transform 0.5s ease-in-out;
}

.cover {
background-image: url("./assets/movie-poster/m-byxz.jpg");
background-size: cover;
transform: rotateY(0deg);
}

.back {
background-size: cover;
background-image: url("./assets/movie-poster/m-dbs.jpg");
transform: rotateY(180deg);
}

.card-container:hover .cover {
transform: rotateY(180deg);
}

.card-container:hover .back {
transform: rotateY(0deg);
}
</style>
</head>
</head>

<body>
<body>
<div class="card-container">
<div class="cover">COVER</div>
<div class="back">BACK</div>
<div class="cover">COVER</div>
<div class="back">BACK</div>
</div>

</body>

</html>
</body>
</html>
2 changes: 1 addition & 1 deletion 041.Canvas奇幻之旅第一季.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@

<body>
<script type="module">
import { Maths, Randoms, Animation, v2, Vector2 } from "https://unpkg.com/@3r/tool"
import { Maths, Randoms, Animation, v2, Vector2 } from "https://gcore.jsdelivr.net/npm/@3r/tool/index.js";
/**
* 创建画布
*/
Expand Down
Loading

0 comments on commit 63fb59a

Please sign in to comment.