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.rhkb.cn/news/235276.html

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

相关文章

在 WinForms 应用程序中实现 FTP 文件操作及模式介绍

在 WinForms 应用程序中实现 FTP 文件操作及模式介绍 简介 在许多应用程序中&#xff0c;能够从远程服务器获取文件是一个非常有用的功能。本文将详细介绍如何在 Windows Forms (WinForms) 应用程序中使用 FTP 协议进行文件操作&#xff0c;包括连接到 FTP 服务器、列出目录、…

初识 Elasticsearch 应用知识,一文读懂 Elasticsearch 知识文集(2)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

《SPSS统计学基础与实证研究应用精解》视频讲解:SPSS的功能特色

《SPSS统计学基础与实证研究应用精解》1.2 SPSS的功能特色 视频为《SPSS统计学基础与实证研究应用精解》张甜 杨维忠著 清华大学出版社 一书的随书赠送视频讲解1.2节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。本书旨在手把手…

服务器感染了.pings勒索病毒,如何确保数据文件完整恢复?

导言&#xff1a; 随着科技的不断进步&#xff0c;网络犯罪也在不断演变。其中之一的.pings勒索病毒是一种危险的恶意软件&#xff0c;它能够加密用户的数据文件&#xff0c;并要求支付赎金以解密这些文件。在本文中&#xff0c;91数据恢复将介绍.pings勒索病毒&#xff0c;以…

React 基本使用

create-react-app 创建 react 项目的脚手架。 React 基本用法 jsx 语法 变量、表达式 import React from react;class JSXBaseDemo extends React.Component {constructor(props) {super(props);this.state {name: 章三};}render() {// 获取变量 插值const pElem <p&…

MR实战:网址去重

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、创建Maven项目2、添加相关依赖3、创建日志属性文件4、创建网址去重映射器类5、创建网址去重归并…

【JaveWeb教程】(18) MySQL数据库开发之 MySQL数据库设计-DDL 如何查询、创建、使用、删除数据库数据表 详细代码示例讲解

目录 2. 数据库设计-DDL2.1 项目开发流程2.2 数据库操作2.2.1 查询数据库2.2.2 创建数据库2.2.3 使用数据库2.2.4 删除数据库 2.3 图形化工具2.3.1 介绍2.3.2 安装2.3.3 使用2.2.3.1 连接数据库2.2.3.2 操作数据库 2.3 表操作2.3.1 创建2.3.1.1 语法2.3.1.2 约束2.3.1.3 数据类…

Python爬虫之Scrapy框架系列(24)——分布式爬虫scrapy_redis完整实战【XXTop250完整爬取】

目录&#xff1a; 1.使用分布式爬取XX电影信息&#xff08;1&#xff09;settings.py文件中的配置&#xff1a;&#xff08;2&#xff09;spider文件的更改&#xff1a;&#xff08;3&#xff09;items.py文件&#xff08;两个项目一致&#xff01;&#xff09;&#xff1a;&am…

vue前端开发自学demo-input标签数据双向绑定

vue前端开发自学demo-input标签数据双向绑定&#xff01;今天为大家 展示的内容是&#xff0c;前端开发常见的&#xff0c;form表单里面的&#xff0c;一些输入数据的元素&#xff0c;动态绑定数据的案例。比如input,以及checkbox的状态绑定案例。 首先&#xff0c;老规矩&…

如何正确使用高速探头前端--probe head

目前市面上的高速有源探头种类丰富&#xff0c;使用灵活&#xff0c;如下图所示&#xff0c;结构多为放大器焊接前端的组合&#xff0c;以E2677B探头前端为例&#xff0c;其焊接前端电阻有三种选择&#xff0c;91ohm时可实现全带宽使用&#xff08;12GHz&#xff09;&#xff0…

从生活入手学编程(1):Edge浏览器设置自动刷新专业教程

一、前言 我们都知道&#xff0c;Edge浏览器运行时的速度卡的实在是感人…… 于是今天&#xff0c;我就突发奇想&#xff0c;来看一看怎么刷新并且还能保留页面内容。 二、探索 首先&#xff0c;我在此提醒您&#xff0c;在使用这种方法时要非常小心。因为更改网页源代…

面试算法110:所有路径

题目 一个有向无环图由n个节点&#xff08;标号从0到n-1&#xff0c;n≥2&#xff09;组成&#xff0c;请找出从节点0到节点n-1的所有路径。图用一个数组graph表示&#xff0c;数组的graph[i]包含所有从节点i能直接到达的节点。例如&#xff0c;输入数组graph为[[1&#xff0c…

直播预告丨看零售场,如何玩转 MaaS

今年&#xff0c;有一个被频繁提及的词是MaaS 这类工具正在帮助千行百业实现大模型落地产业 在零售场&#xff0c;特别是像京东这样拥有超高并发、超复杂协同的电商场内 也沉淀出了一套通用的AI基础设施——九数算法中台 从提升客户服务体验、平台效率出发&#xff0c;训练各…

【JVM】本地方法接口 Native Interface

一、JNI简介 JVM本地方法接口&#xff08;Java Native Interface&#xff0c;JNI&#xff09;是一种允许Java代码调用本地方法&#xff08;如C或C编写的方法&#xff09;的机制。这种技术通常用于实现高性能的计算密集型任务&#xff0c;或者与底层系统库进行交互。 二、JNI组…

华为面经总结

为了帮助大家更好的应对面试&#xff0c;我整理了往年华为校招面试的题目&#xff0c;供大家参考~ 面经1 技术一面 自我介绍说下项目中的难点volatile和synchronized的区别&#xff0c; 问的比较细大顶堆小顶堆怎么删除根节点CSRF攻击是什么&#xff0c;怎么预防线程通信方式…

CMU15-445-Spring-2023-Project #2 - B+Tree

前置知识&#xff1a;参考上一篇博文 CMU15-445-Spring-2023-Project #2 - 前置知识&#xff08;lec07-010&#xff09; CHECKPOINT #1 Task #1 - BTree Pages 实现三个page class来存储B树的数据。 BTree Page internal page和leaf page继承的基类&#xff0c;只包含两个…

最实用的 8 个免费 Android 数据恢复软件

如果您正在寻找最好的免费 Android 数据恢复软件&#xff0c;那就不用再犹豫了&#xff0c;因为我已经列出了最好的软件。不可否认&#xff0c;智能手机和平板电脑等 Android 设备正在与技术一起发展。与以前相比&#xff0c;它们也更加融入了我们的日常生活。 Android 智能手…

Flask+Bootstrap4案例[有源码]

文章目录 Flask案例开源地址简介一、环境搭建1.1 canda常用命令1.2 创建虚拟环境1.3 安装flask1.4 导入flaskdemo项目 二、项目配置2.1 开启DEBUG2.2 配置数据库连接参数2.3 安装项目依赖2.4 修改flaskdemo中的错误 三、组件3.1 flash3.2 pagination3.3 table3.4 nav3.5 form3.…

冠军团队!第二届百度搜索创新大赛AI方案

Datawhale干货 作者&#xff1a;李柯辰&#xff0c;Datawhale成员 写在前面 大家好&#xff0c;我们是2023年第二届百度搜索创新大赛 赛道三——AI应用设计赛道的冠军团队——“肝到凌晨”&#xff0c;很高兴能与大家分享我们这次比赛的经验&#xff0c;同时也希望以后有机会可…

前端-基础 表格标签 - 相关属性详解

目录 相关属性 &#xff1a; align 属性 &#xff1a; border 属性 &#xff1a; cellpadding 属性 &#xff1a; cellspacing 属性 &#xff1a; width 属性 &#xff1a; height 属性 &#xff1a; 首先&#xff0c;需要声明的是 表格标签这部分属性&…