当前位置: 首页 > article >正文

基于html+css的图片展示32

准备项目

项目开发工具

Visual Studio Code 1.44.2
版本: 1.44.2
提交: ff915844119ce9485abfe8aa9076ec76b5300ddd
日期: 2020-04-16T16:36:23.138Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.19044

项目结构

在这里插入图片描述

index.html代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上下移动</title>
    <style>
        img {
            animation: up .5s infinite;
        }

        @keyframes up {
            to {
                margin-top: 200px;
            }
        }
    </style>
</head>

<body>

    <img src="./images/1.jpg" alt="">
</body>

</html>

总结

此代码可以实现图片的无限重复向下移动展示效果,能够让让图片有动态的效果,基于html+css的图片展示32。


http://www.kler.cn/a/14528.html

相关文章:

  • Mac 安装Charles抓包工具及使用教程(什么,都什么时候了还不会抓包)
  • 25K 入职阿里的那天,我特么哭了
  • 网络系统管理Linux服务部署 试卷
  • 容器网络与生态
  • Java内存模型详解
  • 【Tensorflow】模型如何加载HDF文件数据集?
  • 银行数字化转型导师坚鹏:银行业务数字化创新工作坊(简版)
  • KMP字符串匹配算法详解
  • GitHub 开源神器 Bark模型,让文本转语音更简单
  • 宝光股份 | 打造营销管理数据平台,实现营销管理和业务双提升
  • GStreamer第一阶段的简单总结
  • Autosar-Interface接口
  • STM32常用的开发工具有哪些
  • php弱类型相等漏洞绕过
  • 为什么说过早优化是万恶之源?
  • java基于J2EE的学生宿舍信息管理系统
  • 王阳明心学
  • flv转换mp4最简单方法,3个保姆级教程
  • 不得不说的结构型模式-装饰器模式
  • 国内可用ChatGPT镜像网站盘点(4月23日更新)