首先还是来看看架构部分
还是准备一个大盒子card
input：是表单标签，文本框的意思，类型是文本框里面的类型是什么类型
id选择器的意思只能定义一位类名，不能在里面写第二位
lable标签：
<label> 标签为 input 元素定义标注。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
下面还是放一个盒子名字叫card-inside，下面在放一个盒子叫text-one，里面放我们想写的内容，比如标题写h1 h2写内容
<div class="card"> <input id="open" type="checkbox"> <label class="open" for="open"></label> <div class="card-front"> <img src="./love.png" alt="" class="love"> <div class="note">Open it! 💗💗💗 </div> </div> <div class="card-inside"> <div class="text-one"> <h1>💌5201314💌</h1> <h2> Your eyes are really beautiful, there are rain, sun and moon, mountains, rivers, clouds, flowers and birds, but my eyes are better, because I have you in my eyes. </h2> </div> </div> </div>
接下来就是css
body { height: 100vh; display: flex; justify-content: center; align-items: center; background:-webkit-linear-gradient(left,#ff65f0,#a9d6ff); } input#open { display: none; } .card { position: relative; width: 300px; height: 300px; transform-style: preserve-3d; transform: perspective(2500px); transition: .3s; } .card-front { position: relative; background-color: #fff0f3; width: 300px; height: 300px; transform-origin: left; box-shadow: 30px 0 50px rgba(0, 0, 0, 0.3); transition: .3s; } .card-front:before { content: ""; position: absolute; width: 280px; height: 280px; background-color: #f38e8e; top: 10px; left: 10px; } .card-inside { position: absolute; background-color: #fff0f3; width: 300px; height: 300px; z-index: -1; left: 0; top: 0; background-color: #f5f5f5; } .open { position: absolute; width: 300px; height: 300px; left: 0; top: 0; background-color: transparent; z-index: 6; cursor: pointer; } #open:checked~.card-front { transform: rotateY(-145deg); } #open:checked~.card-front:before { z-index: 5; background-color: #fff0f3; width: 330px; height: 300px; top: 0; left: 0; background-image: url(./love.gif); background-size: cover; transform: rotateY(155deg) translateX(16px); } .note { position: relative; width: 200px; height: 150px; background-color: #fff0f3; top: 85px; left: 50px; color: #333; font: 900 35px ''; display: flex; align-items: center; text-align: center; filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.3)); } img { position: absolute; width: 90px; left: 50%; transform: translateX(-50%); z-index: 2; top: 25px; } .text-one { position: absolute; color: #333; font-size: 15px; top: 30px; width: 300px; text-align: center; color: #ff9999; font-family: 'Sacramento'; } .text-one:after { content: ""; top: 80px; }
结果展示一下吧
大家也可以尝试一下，下期再来分享好玩的程序哦
素材我放这里了
