html+css实现图片缓慢变大效果 |
您所在的位置：网站首页 › ppt怎么让图片从小变大 › html+css实现图片缓慢变大效果 |
|
作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。座右铭：未来是不可确定的，慢慢来是最快的。个人主页：极客李华-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> Code Effect img{ margin-left: 47%; /* 图片左边距 */ margin-top: 20%; /* 图片上边距 */ height: 100px; /* 将图片高度设置为初始值 */ position: fixed; /* 图片定位方式为固定定位 */ z-index: -1; /* 设置图片z-index */ } /* 定义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秒，并在动画结束后保持最终状态 */ }如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |