Fetch the repository succeeded.
This action will force synchronization from 木兰君/前端页面效果合集, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
background: #708d00;
}
img {
width: 100%;
height: 100%;
}
.card {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 400px;
background: #fff;
transform-style: preserve-3d;
transform: translate(-50%, -50%) perspective(2000px);
box-shadow: inset 300px 0 50px rgba(0, 0, 0, 0.5), 0 20px 100px rgba(0, 0, 0, 0.5);
transition: 1s;
}
.card:hover {
transform: translate(-50%, -50%) perspective(2000px) rotate(-10deg);
box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.5), 0 10px 100px rgba(0, 0, 0, 0.5);
}
.card::before {
content: '';
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 5px;
z-index: 10;
background: #475b02;
transform: skewX(-45deg);
}
.card::after {
content: '';
position: absolute;
top: 0;
right: -5px;
width: 5px;
height: 100%;
background-color: #7ea301;
}
.card .imgBox {
user-select: none;
width: 100%;
height: 100%;
position: relative;
transform-origin: left;
transition: 1s cubic-bezier(.15, 1.7, .84, .58);
}
.card:hover .imgBox {
transform: rotateY(-155deg);
}
.card .details {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
padding: 20px;
z-index: -1;
}
</style>
</head>
<body>
<div class='card'>
<div class="imgBox">
<img src="https://cdn.pixabay.com/photo/2016/03/15/18/12/forest-1258845_1280.jpg">
</div>
<div class='details'>
<h2>《造心》</h2>
<p>心的边疆,可以造的很大很大,像延展性最好的金箔,铺设整个宇宙,把日月包涵,没有一片乌云,可以覆盖心灵辽阔的疆域;没有哪次地震火山,可以彻底覆盖心灵的宏伟建筑;没有任何风暴,可以冻结心灵深处喷涌温泉;没有某种天灾人祸,可以在秋天,让心的田野颗粒无收。</p>
</div>
</div>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。