CSS3实现轮播效果

在我们不使用JS的情况下,是否也可以实现轮播功能呢?
答应是可以的
上代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播</title><style>.boss {position: relative;width: 200px;height: 200px;overflow: hidden;}.boss>div {width: 10000px;height: 200px;border: 1px solid #000;}.box {display: flex;position: absolute;top: 0;left: 0;}.box>div {width: 200px;height: 200px;animation: move 10s infinite ease-out;}/* 关键帧 平移即可 */@keyframes move {0% {transform: translateX(0%);}25% {transform: translateX(-100%);}50% {transform: translateX(-200%);}75% {transform: translateX(-300%);}100% {transform: translateX(-400%);}}</style>
</head>
<body><div class="boss"><div class="box"><!-- 第一个背景颜色是pink 最后一个也是pink色 --><div style="background-color: pink;"></div><div style="background-color: red;"></div><div style="background-color: green;"></div><div style="background-color: yellow;"></div><div style="background-color: pink;"></div></div></div>
</body>
</html>

效果图:
请添加图片描述

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

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

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

相关文章

激活函数整理

sigmoid函数 import torch from d2l import torch as d2l %matplotlib inline ​ xtorch.arange(-10,10,0.1,requires_gradTrue) sigmoidtorch.nn.Sigmoid() ysigmoid(x) ​ d2l.plot(x.detach(),y.detach(),x,sigmoid(x),figsize(5,2.5)) sigmoid函数连续、光滑、单调递增&am…

python爬取诗词名句网-三国演义,涉及知识点:xpath,requests,自动识别编码,range

页面源代码: <!DOCTYPE html> <html lang="zh"> <head><script src="https://img.shicimingju.com/newpage/js/all.js"></script><meta charset="UTF-8"><title>《三国演义》全集在线阅读_史书典籍_…

RV1126边缘计算AI盒子,支持4-6路1080p视频,2T 算力

1 产品概述 信迈推出基于瑞芯微Rockchip RV1126架构的AI边缘计算主板&#xff0c;RV1126芯片是四核ARM Cortex-A7,1.5GHz&#xff0c; RSIC-V 200MHz CPU &#xff0c;NPU2.0Tops。AI边缘计算主板外围接口丰富&#xff0c;拥有超强扩展性&#xff0c;可广泛应用在智慧安防、工…

docker一键安装

1.把docker_compose_install文件夹放在任意路径&#xff1b; 2.chmod -R 777 install.sh 3.执行./install.sh 兼容&#xff1a;CentOS7.6、麒麟V10服务器版、统信UOS等操作系统。 下载地址&#xff08;本人上传&#xff0c;免积分下载&#xff09;&#xff1a;https://downlo…

JS逆向之加密参数定位

文章目录 前言加密参数的处理步骤加密参数的定位方法搜索断点XHR断点DOM断点EVENT断点 hook 前言 当我们对网络请求进行抓包分析之后&#xff0c;需要用开发者工具对加密参数进行全局搜索。当搜索不到加密参数的时候&#xff0c;应该采取什么解决方法去定位。 还有一个应用场…

【动态规划】C++ 算法458:可怜的小猪

作者推荐 视频算法专题 涉及知识点 动态规划 数学 力扣458:可怜的小猪 有 buckets 桶液体&#xff0c;其中 正好有一桶 含有毒药&#xff0c;其余装的都是水。它们从外观看起来都一样。为了弄清楚哪只水桶含有毒药&#xff0c;你可以喂一些猪喝&#xff0c;通过观察猪是否…

TDengine 签约西电电力

近年来&#xff0c;随着云计算和物联网技术的迅猛发展&#xff0c;传统电力行业正朝着数字化、信息化和智能化的大趋势迈进。在传统业务基础上&#xff0c;电力行业构建了信息网络、通信网络和能源网络&#xff0c;致力于实现发电、输电、变电、配电和用电的实时智能联动。在这…

13.若依代码自动生成功能详解

文章目录 1.代码自动生成功能2.功能的使用3. 代码的导出和使用 1.代码自动生成功能 基于若依的目录结构&#xff0c;若依本身提供了代码生成功能&#xff0c;可以根据数据库表的内容&#xff0c;生成一些基本的CRUD的前后端的功能。本文将生成过程中的一些注意事项&#xff0c…

html 原生网页使用ElementPlus 日期控件el-date-picker换成中文

项目&#xff1a; 原生的html,加jQuery使用不习惯&#xff0c;新html页面导入vue3,element plus做界面&#xff0c;现在需要把日历上英文切成中文。 最终效果&#xff1a; 导入能让element plus日历变成中文脚本&#xff1a; elementplus, vue3对应的js都可以通过创建一个vu…

2023年12月 C/C++(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程(1~8级)全部真题・点这里 第1题:数的输入和输出 输入一个整数和双精度浮点数,先将浮点数保留2位小数输出,然后输出整数。 时间限制:1000 内存限制:65536 输入 一行两个数,分别为整数N(不超过整型范围),双精度浮点数F,以一个空格分开。 输出 一行两个数,分…

首次落地零担快运!商用车自动驾驶跑出交付加速度

即将迈入2024年&#xff0c;还活着的自动驾驶玩家&#xff0c;身上有两个显著标签&#xff1a;选对了细分赛道、会玩。 10月以来&#xff0c;Cruise宣布在美国德州奥斯汀、休斯顿、亚利桑那州凤凰城和加州旧金山全面停止所有自动驾驶出租车队运营服务&#xff0c;通用汽车计划…

Spark与云存储的集成:S3、Azure Blob Storage

在现代数据处理中&#xff0c;云存储服务如Amazon S3和Azure Blob Storage已成为存储和管理数据的热门选择。与此同时&#xff0c;Apache Spark作为大数据处理框架也备受欢迎。本文将深入探讨如何在Spark中集成云存储服务&#xff0c;并演示如何与S3和Azure Blob Storage进行互…

Java 对象的内存布局

目录 一. 前言 二. Java 对象的内存布局 三. Java 对象结构 3.1. 对象头 3.1.1. Mark Word 3.1.2. 类型指针&#xff08;Class Metadata Pointer&#xff09; 3.1.3. 数组长度&#xff08;Length&#xff09; 3.2. 实例数据 3.3. 对齐填充&#xff08;Padding&#xf…

【Github-Action】GithubAction 环境下,如何将临时生成的文件推送至指定分支。

通过这篇文章你可以掌握如何将github action 环境下临时生成的文件推送至指定分支&#xff0c;并且可以打开利用github开放的api做各种强大或有趣的事情的视野和思路。 如果你对github-action感兴趣&#xff0c;还可以看这篇文章&#xff0c; 这篇文章教会你如何开发Github Act…

牛刀小试---二分查找(C语言)

题目&#xff1a;在给定的升序数组中查找指定的数字n&#xff0c;并输出其下标 代码举例&#xff1a; #include <stdio.h> int main() {int arr[] { 1,2,3,4,5,6,7,8,9,10 };//给定的升序数组int left 0;//定义左下标int right sizeof(arr) / sizeof(arr[0]) - 1;//…

Hive基础知识(七):Hive 数据类型全解

1. 基本数据类型 对于 Hive 的 String 类型相当于数据库的 varchar 类型&#xff0c;该类型是一个可变的字符串&#xff0c;不过它不能声明其中最多能存储多少个字符&#xff0c;理论上它可以存储2GB 的字符数。 2. 集合数据类型 Hive 有三种复杂数据类型 ARRAY、MAP 和 STRUCT…

08、Kafka ------ 消息存储相关的配置-->消息过期时间设置、查看主题下的消息存活时间等配置

目录 消息存储相关的配置★ 消息的存储介绍★ 消息过期时间及处理方式演示&#xff1a;log.cleanup.policy 属性配置 ★ 修改指定主题的消息保存时间演示&#xff1a;将 test2 主题下的消息的保存时间设为10个小时1、先查看test2主题下的配置2、然后设置消息的保存时间3、然后再…

Element Plus 离线手册 下载

Element Plus (Vue3) 离线手册&#xff0c;解压就能用&#xff0c;双击运行&#xff0c;浏览器访问 http://localhost:7011 获取方式&#xff1a;原文关注微信公众号&#xff0c;回复消息&#xff1a;7011ELP Element Plus 离线手册 下载Vue3 Element Plus 离线手册 离线文档 …

vue3 响应式api中特殊的api

系列文章目录 TypeScript 从入门到进阶专栏 文章目录 系列文章目录一、shallowRef()二、triggerRef()三、customRef()四、shallowReactive()五、shallowReadonly()六、toRaw()七、markRaw()八、effectScope()九、getCurrentScope() 一、shallowRef() shallowRef()是一个新的响…

景联文科技:以高质量数据赋能文生图大模型

1月5日&#xff0c;在智求共赢・中国AIGC产业应用峰会暨无界AI生态合作伙伴大会上&#xff0c;中国AIGC产业联盟联合无界AI发布了《中国AIGC文生图产业白皮书2023》&#xff0c;从AIGC文生图发展历程、主流工具、产业实践以及规模预测等多个维度&#xff0c;全面揭示了中国AIGC…