基于html+css的盒子展示3

news2024/11/23 19:24: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>

总结

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

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

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

相关文章

[ 应急响应基础篇 ] 使用 Process Explorer 进程分析工具分析系统进程(附Process Explorer安装教程)

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…

《C Primer Plus》第17章复习题与编程练习

《C Primer Plus》第17章复习题与编程练习复习题1. 定义一种数据类型涉及哪些内容&#xff1f;2. 为什么程序清单17.2只能沿一个方向遍历链表&#xff1f;如何修改struct film定义才能沿两个方向遍历链表&#xff1f;3. 什么是ADT&#xff1f;4. QueueIsEmpty()函数接受一个指向…

OpenAI创始人:GPT-4的研究起源和构建心法

OneFlow编译 翻译&#xff5c;杨婷、贾川、徐佳渝 三十年前&#xff0c;互联网&#xff08;Web 1.0&#xff09;时代开启。人们只能在笨重的电脑上用鼠标点击由HTML编写的网页文本&#xff0c;随后开始支持插入图片&#xff0c;可以上传视频&#xff0c;于是有了网络新闻、搜索…

MapReduce之WordCount案例实操

目录 前期准备&#xff1a; 本机测试&#xff1a; mapper阶段&#xff1a; Reduce阶段&#xff1a; Driver类&#xff1a; 集群测试&#xff1a; 前期准备&#xff1a; 因为MapReduce中案例比较多&#xff0c;所以需要单独创建一个工程 准备工作 创建工程后先改maven仓…

ssh远程端口转发

ssh远程转发的原理&#xff1a;内网主机开了一个程序去连接外网的服务器&#xff0c;一直等待外网的服务器来连接。 应用场景 设备 IP 备注 系统 内网电脑C 192.168.10.129 内网&#xff0c;可访问外网。SSH登陆端口为22。 linux 个人电脑A 动态变化 无公网IP Linux…

Java的Idea怎么用ChatGpt,让些代码变丝滑?

发现两款idea的AI插件神器&#xff0c;和一个AI编辑器 1、tabnine https://zhuanlan.zhihu.com/p/343938113 当提示代码出现后&#xff0c;其中 按tab键就可以通用提示出的代码了&#xff0c;alt[ 是换提示代码&#xff0c;试用期限为14天。&#xff08;注意标红的&#xff0…

获美国企业认可,中国大飞机取得重大突破,已具备挑战波音的实力

日前消息指美国通用电气资本航空服务公司订购了20架中国商飞C919客机&#xff0c;这是中国大飞机首次获得美国航空企业的认可&#xff0c;代表着中国大飞机的重大突破&#xff0c;证明中国的大飞机已达到国际先进水平。通用电气资本航空服务公司是全球最大的飞机租赁公司&#…

初学C++,坚决不能挂!

目录 1、C&#xff0b;&#xff0b;相对于C语言的不同 2、类&#xff08;class&#xff09; 3、类与实例&#xff08;对象&#xff09;的关系 4、头文件 5、命名空间 6、输入输出 7、位运算 8、基本数据类型 9、结构体和三目运算符 10、for循环 11、const 12、类型别…

SEEM:微软基于 CV 大模型新作,分割“瞬息全宇宙”

文 | 智商掉了一地交互式视觉分割新作&#xff0c;具有语义感知的新模型~自从 Meta 发布了“分割一切”的 SAM 之后&#xff0c;各种二创如雨后春笋般冒出&#xff0c;昨天微软的一篇论文又在推特上引起讨论&#xff0c;虽然最开始吸引小编的是它的名字——分割“瞬息全宇宙”&…

让技术造福残障人士,让开发助力无障碍

前言 随着互联网技术的快速发展&#xff0c;越来越多的领先技术运用到公益领域中来。运用科技来造福残障人士&#xff0c;比如前几年比较智能化的自动行走轮椅&#xff0c;盲人阅读器&#xff0c;以及聋哑人助听器等&#xff0c;都是通过科技来帮助残障人士方便生活的例子。作为…

OpenAI文档翻译——在不通的场景下如何更好的设计ChatGPT提示词

概述 OpenAI可以被广泛的应用于各种任务&#xff0c;他为各种模型提供使用简单而功能强大的API。你可以输入一些文本作为提示词&#xff0c;OpenAI则会生成对应的提示词补全&#xff0c;在使用过程中这就是会话形式以及能够记住上下文的体现。探索如何生成提示词的最好方法就是…

地图和规则来啦!全国大学生智能汽车竞赛百度创意组正式发布

‍‍「全国大学生智能汽车竞赛」是教育部倡导的大学生科技A类竞赛&#xff0c;是2022年全国普通高校大学生竞赛榜单内竞赛&#xff0c;中国高等教育学会将其列为含金量最高的大学生竞赛之一。在全国数百所高校的支持下&#xff0c;全国大学生智能汽车竞赛至今已成功举办了十七届…

2023AE软件、Adobe After Effects下载、安装教程

最后附下载地址 2023AE软件是一款由Adobe公司开发的视频编辑软件&#xff0c;也被称为Adobe After Effects。它在广告、电影、电视和网络视频等领域广泛应用&#xff0c;用于制作动态图形、特效、合成和其他视觉效果。该软件支持多种视频和音频文件格式&#xff0c;具有丰富的…

一文了解vue3的toRef和toRefs?

文章目录toRef / toRefs首先toRef的使用toRefs的使用&#xff1a;总结reactive定义对象类型<template><h3>姓名&#xff1a;{{ person.name }}</h3><h3>年龄&#xff1a;{{ person.age }}</h3><h3>薪资&#xff1a;{{ person.job.j1.salar…

微软发布了 97 个漏洞的补丁,包括主动勒索软件漏洞

今天是本月的第二个星期二&#xff0c;微软发布了另一组安全更新&#xff0c;修复了影响其软件的97 个漏洞&#xff0c;其中一个漏洞已被广泛用于勒索软件攻击。 97 个错误中有 7 个被评为严重&#xff0c;90 个被评为重要。有趣的是&#xff0c;其中 45 个缺陷是远程代码执行…

抽象简单web

由于js中for循环大致可以包含为 简单的遍历数组 遍历对象的属性 遍历字符串 多层循环 使用 break 和 continue 使用 for...of 遍历数组 使用 forEach 遍历数组 那么由于水平问题&#xff0c;将会一个个精通后才出一图流 简单的遍历数组 在进行实践前&#xff0c;需要简单了解…

Redis 7 事务、管道、发布订阅、主从、哨兵、集群

一、事务 1、简介 可以一次执行多个命令&#xff0c;本质是一组命令的集合。一个事务中的所有命令都会序列化&#xff0c; 按顺序地串行化执行而不会被其他命令插入&#xff0c;不许加塞一个队列中&#xff0c;一次性、顺序性、排他性的执行一系列命令 2、实战 常用命令 正…

(学习日记)2023.4.12

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

在线安装rancher2.4管理K8S集群并部署服务

条件&#xff1a; 1. 准备至少3台机器&#xff1b; 2. 三台机器需要有网络&#xff1b; 3. 安装rancher和K8S集群&#xff1b; # master节点 [rootlocalhost ~]# hostnamectl set-hostname k8s-master && bash [rootk8s-master ~]# hostname k8s-master [rootk8s-ma…

【面试】Mysql主键索引普通索引索引和唯一索引的区别是什么?

前言 在 MySQL 中, 索引是在存储引擎层实现的, 所以并没有统⼀的索引标准, 由于 InnoDB 存储引擎在 MySQL数据库中使⽤最为⼴泛, 下⾯以 InnoDB 为例来分析⼀下其中的索引模型.在 InnoDB 中, 表都是根据主键顺序以索引的形式存放的, InnoDB 使⽤了 B 树索引模型&#xff0c;所…