基于html+css的图展示102

news2024/11/26 8:39:24

准备项目

项目开发工具

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

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

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

相关文章

应用运维的三个项目

应用运维 目录概述需求&#xff1a; 设计思路实现思路分析1.开发和运维2.比重3.历史项目4.工作内容5.历程 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,…

程序员的新出路:维护老项目?

1 张大胖刚进入公司&#xff0c;遇到了一个神奇的同事&#xff1a;何小痩。 别人工作都很忙&#xff0c; 何小痩工作似乎特别轻松&#xff0c;从来不加班&#xff0c;到点儿就回家。 张大胖向别人一打听&#xff0c;原来何小痩一直在维护一个老项目&#xff0c;维护了5年了。 …

「小产品独立变现实战训练营1期」门票限时优惠

大家好&#xff0c;我是凯凯刘&#xff0c;一名程序员&#xff0c;一直在做小产品的开发变现&#xff0c;目标就是让小产品的变现更简单。【小产品独立变现实战训练营1期】这个课程主要是围绕着如何开发出一个赚钱小产品这个主题。来跟大家一起从0开始实战&#xff0c;一步步跟…

为什么对象存储深度归档价格低?

AWS&#xff08;亚马逊云服务&#xff09;对象存储S3&#xff08;Simple Storage Service&#xff09;有以下四种不同的存储类型&#xff1a; S3 标准存储&#xff1a; 这是最常用的S3存储类型之一&#xff0c;它保证了高持久性&#xff0c;并提供 99.999999999% 的数据耐久性…

chatgpt赋能python:Python人脸识别:从入门到工程实践

Python人脸识别:从入门到工程实践 介绍 近年来&#xff0c;人脸识别技术越来越成熟&#xff0c;广泛应用于各行各业&#xff0c;如社交媒体、安防、金融等领域。Python人脸识别作为一种基于机器学习的技术&#xff0c;可以通过训练模型从图像中自动识别出人脸&#xff0c;并进…

致敬六一,用外观模式实现一个儿童乐园畅玩平台

一、概述 外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它为多个子系统中的操作提供一个统一的高层接口&#xff0c;用于访问复杂子系统的功能。其核心思想是通过一个外观类将子系统的复杂操作进行封装&#xff0c;客户端只需与外观类进行…

IO 多路复用是什么意思?Redis中的IO又是什么?

点击上方关注 “终端研发部” 设为“星标”&#xff0c;和你一起掌握更多数据库知识 本文首发于我的知乎&#xff1a;https://zhuanlan.zhihu.com/p/632776455 当你打开电脑&#xff0c;任何时候都在进行着IO的操作&#xff01; 比如一次 API 接口调用、向磁盘写入日志信息&…

[数据结构习题]栈——中心对称链

[数据结构习题]栈——中心对称链 &#x1f449;知识点导航&#x1f48e;&#xff1a;【数据结构】栈和队列 &#x1f449;[王道数据结构]习题导航&#x1f48e;&#xff1a; p a g e 70.4 page70.4 page70.4 本节为栈和链表综合练习题 题目描述&#xff1a; &#x1f387;思路…

Semaphore线程信号量

文章目录 前言一、Semaphore 是什么&#xff1f;定义对比 二、使用步骤1. 场景分析2. 编码如下 总结 前言 Semaphore 也是juc中的一个关键类,他与之前的lock 类似,也有公平和非公平两种,它与他们应用含义,引用场景有很大的不同; 与阻塞队列类似,但是也不一样;听我细细道来~ 一…

MTK capture 拍照流程

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: 一、多帧拍照请求概览二、多帧拍照回帧概览 一、多帧拍照请求概览 多帧拍照请求概览如下&#xff1a; 多帧拍照请求 1.1 APP 下发拍照请求到 Camera Fr…

新Linux服务器安装Java环境[JDK、Tomcat、MySQL、Nacos、Redis、Nginx]

文章目录 JDK服务Tomcat服务MySQL服务Nacos服务Redis服务Nginx服务 说明&#xff1a;本文不使用宝塔安装 温馨提示宝塔安装命令&#xff1a;yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh JDK服务…

vitepress从0到1,让每个前后端小伙伴都拥有一个属于自己的博客

&#x1f4f8;前言 之前周一的个人博客是用vuepress来搭建&#xff0c;但随着文章的数量越来越多&#xff0c;导致每回在启动的时候构建都特别慢&#xff0c;于是周一有了改构建工具的想法。这不&#xff0c;vitepress工具自发布后&#xff0c;在技术圈内一直有些火热&#xf…

数据库新闻速递 亚马逊Cosmos DB 添加了AI toolchain (译)

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到2群&#xff08;共…

chatgpt赋能python:如何将Python代码打包成软件

如何将Python代码打包成软件 Python是一种直译式、交互式、面向对象的高级编程语言。由于其简洁明了的语法&#xff0c;Python在科学计算、Web开发、人工智能等领域得到了广泛的应用。但是&#xff0c;Python程序通常需要运行在特定的环境中&#xff0c;这限制了Python程序的移…

NodeJs之同源限制问题

1. 说明 app1是基于3001端口的服务器, app2是基于3002端口的服务器。 gitee地址&#xff1a;https://gitee.com/studyCodingEx/studys/ 2. app1 2.0 app1.js const express require(express); const path require(path); // 向其他服务器端请求数据的模块 const request …

Linux常用命令——gunzip命令

在线Linux命令查询工具 gunzip 用来解压缩文件 补充说明 gunzip命令用来解压缩文件。gunzip是个使用广泛的解压缩程序&#xff0c;它用于解开被gzip压缩过的文件&#xff0c;这些压缩文件预设最后的扩展名为.gz。事实上gunzip就是gzip的硬连接&#xff0c;因此不论是压缩或…

NodeJs之模板引擎及综合案例

0. 数据源 ./views/addtional.art {{ if age > 18 }}age > 18; {{ else if age < 15 }}age < 15; {{ else }}age!!!!!!!! {{/if}}<% if(age > 18){ %> 年龄大于18岁 <% } else if(age < 15) { %> 年龄小于15岁 <% } else { %> 其他年龄段…

Linux驱动开发(I2C系统的重要结构体)

文章目录 前言一、I2C硬件框架二、i2c_adapter三、i2c_client四、i2c_msg总结 前言 本篇文章来讲解I2C系统的重要结构体&#xff0c;了解这些结构体对于编写I2C驱动来说是至关重要的&#xff0c;所以要想编写好一个I2C驱动程序那么就必须先了解这些结构体。 一、I2C硬件框架 …

图片识别工具Tesseract与使用

Tesseract工具是一个图片识别工具&#xff0c; 由HP实验室开发 由Google维护的开源的光学字符识别&#xff08;OCR&#xff09;引擎。它可以直接使用&#xff0c;或者&#xff08;对于程序员&#xff09;使用 API​​ 从图像中提取输入&#xff0c;包括手写的或打印的文本。与M…

KCC@上海正式成立啦!

5月28号下午&#xff0c;开源社区的朋友共聚于上海的一间茶室中&#xff0c;组织召开了 KCC上海第一次线下见面会&#xff0c;并正式成立了 KCC上海。 KCC&#xff08;KAIYUANSHE City Community&#xff09;是由开源社理事兼执行长庄表伟老师号召发起&#xff0c;旨在让开源社…