CSS se da cuenta de que el amor late
Primero echemos un vistazo al sentimiento emocionante:
no, no, una confesión de amor tan romántica se puede completar con CSS. ¡Sí, has escuchado bien! A continuación, el editor te mostrará cómo hacer una confesión de amor:
principio:
Use dos cuadros rectangulares para cambiar su posición usando atributos como posicionamiento o flotación. Después de efectos de deformación como traslación y rotación, use el atributo de esquina redondeada. En este momento, se puede completar la forma del corazón y luego combinar los atributos de animación. para finalmente Realizar el latir del amor.
Pasos específicos:
- Primero, preparamos una caja grande para envolverla y preparamos dos cajas pequeñas en la caja grande para convertirlas en corazones mediante el atributo de deformación;
2. Haga que los dos cuadros se superpongan entre sí mediante posicionamiento o atributos flotantes.
Debido a que los dos cuadros son elementos a nivel de bloque, el segundo cuadro naturalmente estará debajo.
-
Utilice el efecto flotante:
al dejar que el primer cuadro flote fuera del flujo del documento, el segundo cuadro aparecerá, de modo que los dos cuadros queden apilados uno encima del otro. (Tenga en cuenta que debido a que el texto está al mismo nivel que el flotante, el texto en el cuadro 2 no se puede mover hacia arriba)
-
Utilice el efecto de posicionamiento:
coloque el segundo cuadro para cubrir el primer cuadro.
-
Utilice las propiedades de deformación (aquí se utilizan traslación y rotación) para formar un prototipo de corazón.
-
Utilice el atributo de esquina redondeada para convertirlo en forma de corazón
. Para facilitar la observación, le dimos a los dos cuadros diferentes colores. Después de formar el corazón, podemos usar rojo para ambos cuadros y comentar los bordes del cuadro grande y el números dentro de las dos cajas pequeñas.
-
Usa atributos de animación para hacer que el amor se mueva.
/* 爱心的动画名字为love，一定要前后对应 */
@keyframes love{
0%{
transform: scale(1);
}
50%{
transform: scale(0.8);
}
100%{
transform: scale(1.1);
}
}
- Finalmente, para crear una atmósfera más romántica, puedes establecer el color de fondo y establecer un halo de sombra para el amor para realzar la atmósfera. También puedes agregar mensajes de texto para confesar al Ta en tu corazón~
¿Has descubierto que el amor genial y romántico puede ser tan sencillo? Creo que muchos amigos deben estar ansiosos por probarlo en este momento.
Finalmente, el editor presenta el código completo:
<style>
/* 添加背景颜色烘托浪漫的氛围 */
body{
background-color: darksalmon;
}
.wrap {
position: relative;
width: 420px;
height: 400px;
margin: 20px auto;
/* border: 1px solid rebeccapurple; */
/* 此处的动画效果的一些属性，可自由发挥，动画名一定要和后面的相互对应 */
animation: love 1s infinite alternate;
}
/* 添加的文字信息的属性设置，可自由发挥 */
.wrap p{
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 30px;
color: yellow;
}
.box-left {
/* 此处通过给盒子1使用浮动属性使两个盒子重叠;或者第一个盒子不变，给第二个盒子用定位 用一种即可*/
/* float: left; */
width: 200px;
height: 350px;
background-color: red;
/* 平移、旋转 */
transform: translate(55px) rotate(-45deg);
/* 圆角属性 */
border-radius: 120px 120px 0 0;
/* 添加阴影光环 */
box-shadow: 0 0 80px 0 red;
}
.box-right {
/* 此处通过给盒子2使用定位属性使两个盒子重叠;或者给盒子1使用浮动属性，第二个盒子不变 用一种即可*/
position: relative;
top: -350px;
width: 200px;
height: 350px;
background-color: red;
/* 平移、旋转 */
transform: translate(161px) rotate(45deg);
/* 圆角属性 */
border-radius: 120px 120px 0 0;
/* 添加阴影光环 */
box-shadow: 0 0 80px 0 red;
}
/* 爱心的动画名字为love，一定要前后对应 */
@keyframes love{
/* 此处主要是通过变形属性的缩放来实现跳动 */
0%{
transform: scale(1);
}
50%{
transform: scale(0.8);
}
100%{
transform: scale(1.1);
}
}
/* 鼠标悬停的效果 */
.wrap:hover{
animation-play-state: paused;
}
p{
font-size: 20px;
text-align: center;
font-family: '楷体';
line-height: 30px;
color: chocolate;
}
</style>
</head>
<body>
<div class="wrap">
<p>I Love you</p>
<div class="box-left">
<!-- 1 -->
</div>
<div class="box-right">
<!-- 2 -->
</div>
</div>
<p>如果季节更替，树叶落地，银色满际</p>
<p>没能走回原地，我再做个梦给你</p>
<p>梦见我们相遇，没有话题，满眼笑意</p>
<p>真的再见到你，再次拥抱你在怀里</p>
</body>