- 作者简介:一名后端开发人员,每天分享后端开发以及人工智能相关技术,行业前沿信息,面试宝典。
- 座右铭:未来是不可确定的,慢慢来是最快的。
- 个人主页:极客李华-CSDN博客
- 合作方式:私聊+
- 这个专栏内容:BAT等大厂常见后端java开发面试题详细讲解,更新数目100道常见大厂java后端开发面试题。
- 我的CSDN社区:https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
- 微信公众号,抖音,b站等平台统一叫做:极客李华,加入微信公众号领取各种编程资料,加入抖音,b站学习面试技巧,职业规划
html+css实现图片缓慢变大效果
简介:本文讲解如何使用html+css实现让图片缓慢变大的效果。
完整代码
下面是是这代码的完整代码和对应的解释。
在页面中添加了一张图片并给它设置了一些CSS样式。具体为:
-
设置图片的左边距和上边距分别为47%和20%。
-
设置图片高度为100px,并将其定位方式设置为固定定位,z-index为-1。
此外,该代码还定义了两个关键帧动画@keyframes: -
floatup动画:使元素从初始状态向上浮动并逐渐消失,持续时间为默认值10秒。
-
size-up动画:使元素从初始状态开始缩放并逐渐变大,持续时间为6秒。将终止状态的缩放比例修改为35,即将元素放大35倍。
最后,将size-up动画添加到img元素中,使图片按照size-up动画的规则进行缩放。
<!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>
如果大家觉得有用的话,可以关注我下面的微信公众号,极客李华,我会在里面更新更多行业资讯,企业面试内容,编程资源,如何写出可以让大厂面试官眼前一亮的简历等内容,让大家更好学习编程,我的抖音,B站也叫极客李华。大家喜欢也可以关注一下