基于html+css的图展示80

news2024/12/26 13:56:51

准备项目

项目开发工具

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

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

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

相关文章

从零开始搭建属于自己的hexo博客

前提要素&#xff1a;一个提供博客运行的服务器或者XX云。 先展示一下搭建好的样子&#xff0c;给大家一点动力&#xff1a; 整个搭建过程大概需要30分钟不到&#xff0c;请各位控制自己的时间~ 好了&#xff0c;废话不多说我们开始&#xff01; 1、首先登录我们准备好的服…

redis高级篇二(分片集群)

一)进行测试Sentinel池: ​ Controller public class RestController {RequestMapping("/Java100")ResponseBodypublic String start(){//1.配置信息HashSet<String> setnew HashSet<>();// 连接信息 ip:port// set.add("127.0.0.1:27001");se…

[抓包] 微信小程序(PC版)如何抓包

本文抓包环境 Win10&#xff0c;微信(PC版本) v3.9.2.20&#xff0c;Burp Suite v1.7.32&#xff0c;Proxifier v3.42 不使用安卓模拟器 一、下载安装好Burp Suite&#xff0c;Proxifier 链接: https://pan.baidu.com/s/177BIEgCmZG9MfqQ4D0PTsg 提取码: 3hex 二、开始抓包 …

【ASP.NET Core笔记】 使用razor pages构建网站

使用ASP.NET Core Razor Pages 构建网站 sqlite 北风数据库 1. Northwind.Common.DataContext.Sqlite 是Sqlite的数据库上下文&#xff0c;有三个类&#xff1a;ConsoleLogger.csNorthwindContext.csNorthwindContextExtensions.cs 1.1 NorthwindContext 继承自 Microsoft.Enti…

计算机图形学-GAMES101-10

一、纹理 原模型网格->逐面Shading->逐像素Phong Shading->纹理贴图->换个纹理再贴图->环境光照。 &#xff08;1&#xff09;环境贴图 纹理就是一张图&#xff0c;纹理是GPU里的一块内存&#xff0c;可以进行点查询、范围查询、滤波。  环境光贴图、环境光映…

The authenticity of host ‘gitee.com (212.64.63.190)‘ can‘t be established.

在将本地仓库的代码推送到远程仓库时&#xff0c;出现下面报错。 $ git push -u origin master The authenticity of host gitee.com (212.64.63.190) cant be established. ECDSA key fingerprint is SHA256:FQGC9Kn/eye1W8icdBgrQpKkGYoFgbVr17bmjey0Wc. Are you sure you w…

Kali-linux分析密码

在实现密码破解之前&#xff0c;介绍一下如何分析密码。分析密码的目的是&#xff0c;通过从目标系统、组织中收集信息来获得一个较小的密码字典。本节将介绍使用Ettercap工具或MSFCONSOLE来分析密码。 8.2.1 Ettercap工具 Ettercap是Linux下一个强大的欺骗工具&#xff0c;也…

Mysql中常用到的查询关键字

文章目录 1、join2、like 模糊查询3、or4、distinct5、in 包含6、group by 分组7、order by8、limit 1、join MySQL 的连接主要分为内连接和外连接。 什么是内连接&#xff1a; 取得两张表中满足存在连接匹配关系的记录。 什么是外连接&#xff1a; 不只取得两张表中满足存在…

设计高端大气上档次的时尚品?!微软工程师借助AIGC成功圆梦!

&#xff08;本文阅读时间&#xff1a;5 分钟&#xff09; 在这个创意横飞、想象力爆棚的时代中&#xff0c;有很多美丽且吸引人的东西围绕在我们身边。然而&#xff0c;遗憾的是&#xff0c;被誉为“攻城狮”的我&#xff0c;内心里虽然非常喜欢且欣赏这些夺目的作品&#xff…

手动输入域账号自动禁用windows域用户的脚本

禁用windows域用户的脚本&#xff0c;需求&#xff1a; 1、显示该域用户的创建时间&#xff0c;最后登录时间和存放的OU&#xff0c; 2、将该账号禁用&#xff1b; 3、禁用后重新返回交互界面等待输入新的域账号。 Powershell脚本内如下&#xff1a; # 无限循环等待用户的输入…

Meta没做成的事OpenAI要干?ChatGPT之父推出加密项目Worldcoin

大模型焦虑还未停歇&#xff0c;鬼才创始人瞄准了加密领域。 继ChatPT之后&#xff0c;OpenAI的首席执行官Sam Altman推出的加密货币项目Worldcoin近日被透露融资近一亿美金&#xff0c;彻底搅翻了科技界与Web3的平静。 据官网描述&#xff0c;Worldcoin由Sam和Max Novendstern…

奇舞周刊第492期:提升 Web 核心性能指标的 9 个建议

记得点击文章末尾的“ 阅读原文 ”查看哟~ 下面先一起看下本期周刊 摘要 吧~ 奇舞推荐 ■ ■ ■ 提升 Web 核心性能指标的 9 个建议 大家好&#xff0c;我是 ConardLi。今天继续来为大家解读今年的 Google I/O&#xff0c;我会重点为大家解读前端开发者应该关注的信息&#xff…

软考初级程序员上午单选题(13)

1、下列不能兼作输入设备和输出设备的是______。 A&#xff0e;可擦除型光盘 B&#xff0e;软盘 C&#xff0e;硬盘 D&#xff0e;键盘 2、文件型计算机病毒主要感染______。 A&#xff0e;.TXT文件 B&#xff0e;.GIF文件 C&#xff0e;.EXE文件 D&#xff0e;.MP3文件 3、_…

【Error】Error: Cannot find module ‘babel-preset-es2015‘

启动项目时出现了下面的错误&#xff0c;错误图如下&#xff1a; 解决办法&#xff1a; 在项目的babel.config.js文件中修改presets的参数&#xff0c;修改如下&#xff1a; 原文件&#xff1a; 修改成babel/preset-env&#xff0c;修改后文件&#xff1a;

SpringBoot源码分析之Tomcat是如何在SpringBoot中启动的?

一.前言 我们知道SpringBoot可以直接把传统的war包打成可执行的jar包&#xff0c;直接启动。这得益于SpringBoot内置了容器可以直接启动。本文将以 Tomcat 为例&#xff0c;来看看 SpringBoot 是如何启动 Tomcat 的。 二.源码分析 一.SpringApplication初始化 public class…

【STC8】热启动串口指令下载

前言 在目标开发板没有装载自动下载电路的时候&#xff0c;往往需要冷启动&#xff0c;也就是需要手动开关电源&#xff0c;来达到单片机复位下载。当然还有一种方法是热启动&#xff0c;通过串口接收到自定义的指令后&#xff0c;软件执行复位下载。这就是本文介绍的内容。 材…

理解神经网络的数学原理(四)多层感知机(MLP)与二叉空间分割树(BSP Tree)

概述 最近发现了一个传统算法&#xff0c;非常适合描述多层感知机&#xff08;Multi-Layer Perceptron&#xff0c;MLP&#xff09;的模型逻辑&#xff0c;其算法逻辑也非常清晰简单&#xff0c;所以在这里再对比一下&#xff0c;方便大家更容易理解多层感知机的内容&#xff…

手写Docker之认识NameSpace、CGroups、Union file system

关于NameSpace Linux NameSpace主要是kernel中用于隔离系统资源的功能&#xff0c;而docker就是基于NameSpace去隔离系统资源达到容器化的效果 以下案例均以该代码进行举例&#xff1a; package mainimport ("fmt""os""os/exec""syscall&…

【C++】mapsetmultimapmultiset使用说明

文章目录 关联式容器键值对pair的定义(键值对) 树形结构的关联式容器Set -> 排序去重Set的文档介绍Set的使用:set的构造set的迭代器set的容量set修改操作API接口总结: multiset -> 排序 可重复lower_bound&&upper_bound mapmap的模板参数说明map的构造map的迭代…

毕业季,各互联网大厂急缺这类 Python 人才!

又快到了应届毕业生找工作的季节了&#xff0c;一大波大厂高薪岗位陆续开放&#xff0c;想拿 Offer、升职加薪的你准备得怎么样了&#xff1f; 今年的招聘力度可以说是近几年最大&#xff0c;比如字节跳动旗下的大力教育&#xff0c;高调宣布&#xff1a;“未来 4 个月&#x…