基于html+css的图片展示10

news2024/11/16 13:37:39

准备项目

项目开发工具

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的图片展示10。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/420048.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

10个有趣python模块

一、说明 Python 是一种高级、解释型和通用动态编程语言&#xff0c;侧重于代码的可读性。它在许多组织中使用&#xff0c;因为它支持多种编程范例。它还执行自动内存管理。它是世界上最受欢迎的编程语言之一。这是有很多原因的&#xff1a; 这很容易学习。 它超级多才多艺。 …

腾讯云轻量应用服务器性能如何?测评来了

腾讯云轻量应用服务器性能如何&#xff1f;CPU型号主频、内存、公网带宽和系统盘存储多维对比&#xff0c;轻量应用服务器会不会比云服务器CVM性能差&#xff1f;相对于CVM云服务器轻量服务器更适合轻量级的应用&#xff0c;轻量服务适合中小企或个人开发者用于搭建We网站b应用…

svn 安装 和配置idea

SVN客户端安装 一、SVN客户端安装 1、下载安装包地址&#xff1a;svn下载地址 此安装包是英文版的&#xff0c;还可以下载一个语言包&#xff0c;在同界面的下方 这里可以下载 一个汉化的 语言包&#xff08;在下载界面向下翻即可&#xff09; 下载完成之后&#xff0c;就会…

JavaSE异常

文章目录JavaSE异常一、异常的概念二、异常的体系结构三、异常的分类四、异常的处理五、自定义异常类JavaSE异常 一、异常的概念 在Java中&#xff0c;将程序执行过程中发生的不正常行为称为异常 常见逻辑异常&#xff1a; 算数异常 System.out.println(10 / 0); // 执行结…

关于分布式唯一ID的思考-雪花算法及美团Leaf方案详解

引言 首先&#xff0c;我们看一下日常开发中常见的雪花算法工具类&#xff1a; 引入hutool <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.7.20</version> </dependency>工具类…

推荐10个AI学习、工作用的有趣网站

来源&#xff1a;towardsai 作者&#xff1a;学姐 编辑&#xff1a;学姐 1.VERSE BY VERSE 帮你写诗 https://sites.research.google/versebyverse/ 2.Let’s Enhance 照片放大增强 https://letsenhance.io/ 让扭曲和模糊的照片变得漂亮&#xff0c;用这个网站实现增强&am…

A01-固件库开发模板

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;Silence Lamb &#x1f4d6; 本章内容&#xff1a;【固件库开发模板】 Silence-STM v1.0.0 基于固件库开发模板 一、前提准备 &#x1f680;从ST官网获取stm32f103标准例程固件库&#x1f680; 参考文档 1.1&#x1f333;…

[HAOI2011]Problem b(莫比乌斯反演)

[HAOI2011]Problem b 题目链接&#xff1a;https://www.luogu.com.cn/problem/P2522 题目描述 对于给出的 nnn 个询问&#xff0c;每次求有多少个数对 (x,y)(x,y)(x,y)&#xff0c;满足 a≤x≤ba \le x \le ba≤x≤b&#xff0c;c≤y≤dc \le y \le dc≤y≤d&#xff0c;且 …

【CE】Mac下的CE教程Tutorial:进阶篇(第7关:代码注入)

▒ 目录 ▒&#x1f6eb; 导读开发环境1️⃣ 第7关&#xff1a;代码注入翻译非代码注入完成任务代码注入完成任务&#x1f6ec; 文章小结&#x1f4d6; 参考资料&#x1f6eb; 导读 开发环境 版本号描述文章日期2023-03-操作系统MacOS Big Sur 11.5Cheat Engine7.4.3 1️⃣ 第…

PADS生成SMT坐标文件

做SMT时&#xff0c;除了“gerber文件”外&#xff0c;还要提供 “BOM文件” 和 “坐标文件”。 “gerber文件” 和 “BOM文件”&#xff0c;前面都有介绍过了&#xff0c;现在详细说一下生成“坐标文件”的方法。 贴片厂家提供了操作教程&#xff0c;如下&#xff1a; 所以&a…

Leetcode力扣秋招刷题路-0289

从0开始的秋招刷题路&#xff0c;记录下所刷每道题的题解&#xff0c;帮助自己回顾总结 289. 生命游戏 根据 百度百科 &#xff0c; 生命游戏 &#xff0c;简称为 生命 &#xff0c;是英国数学家约翰何顿康威在 1970 年发明的细胞自动机。 给定一个包含 m n 个格子的面板&a…

应届生,实力已超6年,太卷了!

你好&#xff0c;我是田哥今晚上&#xff0c;给一位朋友做模拟面试&#xff0c;原本说好的90分钟左右&#xff0c;结果整了2个多小时。很多人估计也很好奇&#xff0c;我们这两个多小时聊聊什么&#xff0c;下面我给大致总结一下&#xff1a;面试技巧面试中&#xff0c;我们回答…

企业招采系统实现方案(SRM系统)

企事业数字化转型专家&#xff0c;提供各类应用解决方案。您身边的赋能小助手&#xff01; 文章目录前言一、当下采购的痛点二、解决方案-供应商管理1.供应商管理三、解决方案-企业询价、供应商报价管理四、解决方案-采购订单五、送货、到货、订单管理总结前言 随着各类产业链…

JS实用技巧断点调试详解

调试能力是一个程序员的生存根本&#xff0c;可是很多初学者却忽视调试。今天我们就来讨究一下JS的调试技巧。本文章将会详细列举JS相关的各种实用调试技巧。 如果您是JS的初学者&#xff0c;那么这篇文章将对您有很大的帮助。为什么要调试&#xff1f;程序就是函数堆砌起来的…

智驾升级!ADB+AFS「起势」

目前&#xff0c;乘用车前大灯已经完成从传统卤素、氙气到LED的转型升级&#xff0c;高工智能汽车研究院监测数据显示&#xff0c;2022年中国市场&#xff08;不含进出口&#xff09;乘用车前装标配LED前大灯搭载率达到75.99%&#xff0c;同比2021年提高约7个百分点。 而相比而…

2023.4.16 第四十九次周报-2

目录 前言 文献阅读 :基于动态分类的长短期记忆网络模型&#xff0c;用于不同气候区日流量预报 背景 主要贡献 思路 动态分类 &#xff08;DC&#xff09; 方法 DC-LSTM 和 DC-B-LSTM 模型 Box -Cox数据转换 模型性能评估指标 克里金插值源码总结 第一部分 第二部分…

网络连通性测试-防甩锅套路

一、前言 为什么要写这个东西呢&#xff1f;怎么涉及到甩锅呢&#xff1f;说白了就是在各种对接过程中&#xff0c;总会遇到一些喜欢甩锅的人&#xff0c;说是你的问题&#xff0c;什么网络没毛病&#xff0c;是你的接口什么的不对&#xff0c;总之就是你的问题~ 这时候什么最…

游戏解密之常见网络游戏同步方式分析

一、为什么需要有同步呢&#xff1f; 同步机制是用来维护游戏的一致性&#xff0c;通俗的说就是虚拟世界中的事实&#xff1b;比如在CF中&#xff0c;大家的PING都很高&#xff0c;A和B两个玩家同时发现了对方&#xff0c;并向对方开火&#xff0c;如果没有很好的同步机制&…

50 Projects 50 Days - Rotating Navigation Animation 学习记录

项目地址 Rotating Navigation Animation 展示效果 Rotating Navigation Animation 实现思路 结构主要分为两部分&#xff0c;绕左上角旋转的部分&#xff1a;包括按钮圆盘和内容区&#xff0c;以及左下角移出的导航栏部分。 整个界面只在左上角圆盘的按钮点击时发生改变…

Sarsa VS Q-Learning

前言 1.如何计算价值函数&#xff1f; 为了使模型训练的最好&#xff0c;学习到更多有用的知识即完成任务的最好策略。对策略好坏的评价标准自然是得到最多最好的奖励&#xff0c;那么如何找到最好的最好的奖励&#xff0c;即如何得到最好的价值函数&#xff1f; 首先对于在状…