Html+css realizes the effect of slowly increasing the size of the picture
Introduction : This article explains how to use html+css to achieve the effect of slowly increasing the size of the picture.
full code
The following is the complete code and corresponding explanation of this code.
Added an image to the page and styled it with some CSS. Specifically:
-
Set the left and top margins of the image to 47% and 20% respectively.
-
Set the image height to 100px, set its positioning method to fixed positioning, and set its z-index to -1.
Additionally, the code defines two keyframe animations @keyframes: -
floatup animation: Make the element float up from the initial state and fade away, with a duration of 10 seconds by default.
-
size-up animation: Make the element scale from the initial state and gradually become larger, with a duration of 6 seconds. Modify the scaling factor of the end state to 35, that is, the element is enlarged by 35 times.
Finally, add the size-up animation to the img element to make the image scale according to the rules of the size-up animation.
<!DOCTYPE html>
<html>
<head>
<title>Code Effect</title>
<style>
img{
margin-left: 47%; /* 图片左边距 */
margin-top: 20%; /* 图片上边距 */
height: 100px; /* 将图片高度设置为初始值 */
position: fixed; /* 图片定位方式为固定定位 */
z-index: -1; /* 设置图片z-index */
}
</style>
</head>
<body>
<img src="images/1.png"> <!-- 添加一张图片 -->
<style>
/* 定义floatup动画，使元素向上浮动并逐渐消失 */
@keyframes floatup {
from {
transform: translate(-50%, -50%) scale(1); /* 初始状态 */
opacity: 1;
}
to {
transform: translate(-50%, -150%) scale(2); /* 终止状态，将元素放大2倍，并向上移动50% */
opacity: 0;
}
}
/* 定义size-up动画，使元素从初始状态缩放到35倍大小 */
@keyframes size-up {
from {
transform: scale(0.1); /* 初始状态，将元素缩小10倍 */
}
to {
transform: scale(35); /* 终止状态，将元素放大35倍 */
}
}
/* 将size-up动画添加到img元素中，使图片缩放到35倍大小 */
img {
animation: size-up 6s ease-out forwards; /* 动画持续时间为6秒，并在动画结束后保持最终状态 */
}
</style>
</body>
</html>