开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为奇数和偶数`div`集合重复相同的动画

，可以通过CSS动画来实现。下面是一个完善且全面的答案：

CSS动画是一种在网页中创建动态效果的技术。它可以通过定义关键帧和动画属性来控制元素的动画效果。对于奇数和偶数div集合重复相同的动画，可以使用CSS选择器和关键帧动画来实现。

首先，我们可以使用CSS选择器来选择奇数和偶数div元素。CSS选择器中的:nth-child伪类可以用来选择指定位置的元素。例如，:nth-child(odd)可以选择奇数位置的元素，:nth-child(even)可以选择偶数位置的元素。

接下来，我们可以使用关键帧动画来定义动画效果。关键帧动画可以通过@keyframes规则来定义。在关键帧动画中，我们可以指定元素在不同时间点的样式。通过将关键帧动画应用到奇数和偶数div元素上，它们将同时播放相同的动画效果。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
/* 定义关键帧动画 */
@keyframes myAnimation {
  0% { background-color: red; }
  50% { background-color: blue; }
  100% { background-color: red; }
}

/* 选择奇数位置的div元素 */
div:nth-child(odd) {
  animation: myAnimation 2s infinite;
}

/* 选择偶数位置的div元素 */
div:nth-child(even) {
  animation: myAnimation 2s infinite;
}
</style>
</head>
<body>

<!-- 创建一组奇数和偶数div元素 -->
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
<div>Div 6</div>

</body>
</html>

在上面的示例中，我们定义了一个名为myAnimation的关键帧动画，它在0%、50%和100%的时间点分别将背景颜色设置为红色和蓝色。然后，我们使用:nth-child(odd)选择器选择奇数位置的div元素，并将myAnimation动画应用到它们上。同样地，我们使用:nth-child(even)选择器选择偶数位置的div元素，并将同样的动画应用到它们上。

这样，奇数和偶数div集合就会重复播放相同的动画效果。

腾讯云相关产品和产品介绍链接地址：

腾讯云CSS：https://cloud.tencent.com/product/css
腾讯云CDN：https://cloud.tencent.com/product/cdn
腾讯云云服务器：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云原生容器服务：https://cloud.tencent.com/product/tke
腾讯云云函数：https://cloud.tencent.com/product/scf
腾讯云对象存储：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云移动推送：https://cloud.tencent.com/product/tpns
腾讯云云硬盘：https://cloud.tencent.com/product/cbs
腾讯云视频处理服务：https://cloud.tencent.com/product/vod
腾讯云人工智能：https://cloud.tencent.com/product/ai

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS3动画属性 animation详解（看完就会）

轮播图swiper框架的基本使用【Transform3D】转换详解（看完就会）【css动画】移动的小车

03

css3动画

此为动画样式中的关键帧，用关键帧来控制css动画中的关键样式。相比较过渡更加的容易空值中间的部分

04

与Ajax同样重要的jQuery（1）

jQuery框架 jQuery 1.4 是企业主流版本，从jQuery1.6 开始引入大量新特性。最新版本 2.1.1，这里讲解以1.8.3为主(新版本主要是浏览器兼容问题以及新特性) jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js jquery-1.8.3.js jQuery框架源码，没有被精简，体积较大（主要用来研究 jQuery源码），企业开发时，需要导入 jquery-1.8.3.min.js （精简过） 1.jQuery程序快速入门 window.

06

法解种三的数文回：画动

判断一个整数是否是回文数。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。

01

animation-direction 属性——动画示例

animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。

01

jQuery 常用方法

jQuery 是一个快速、简洁的 JavaScript 框架，封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互

05

从零开始学 Web 之 jQuery（二）获取和操作元素的属性

DOM中有很多方式获取元素，比如通过id，通过标签名，通过类名，通过name的值，通过选择器等方式。

04

LeetCode 图解 | 540. 有序数组中的单一元素

题目来源于 LeetCode 上第 540 号问题：有序数组中的单一元素。题目难度为中等，目前通过率60.2%。

01

《剑指 offer》 21. 调整数组顺序使奇数位于偶数前面

今天分享的题目来源于 LeetCode 上的剑指 Offer 系列面试题 21.调整数组顺序使奇数位于偶数前面，这道题目既可以使用首尾双指针，也可以使用快慢双指针，本文采用首尾双指针法。

06

Jquery选择器

1、基本选择器选择器描述结果示例 #id 根据id获取元素单个 $(“#myid”)选取id的值为myid的元素 .class 根据class获取元素集合 $(“.myclass”)选取class的值为myclass的元素 a,p,img等html标签根据指定的html标签获取元素集合 $(“img”)选取所有的img标签 * 获取所有的元素集合 $(“*”)获取所有标签元素 a,.myclass,#id等获取对应标签元素集合 $(“a,.myclass,

06

jquery选择器用法_jQuery属性选择器

一、基本选择器 1. ID选择器 ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以iQuery包装集的形式返回给对象。使用公式:(“#id”) 示例：(“#box”) //获取id属性值为box的元素 2. 元素选择器元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。使用公式：(“element”) 示例：(“div”) //获取所有div元素 3.类名选择器类选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配类的名称就可以被类选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。使用公式：(“.class”) 示例：(“.box”) //获取class属性值为box的所有元素 4.复合选择器复合选择器将多个选择器（可以是ID选择器、元素选择器或是类名选择器）组合在一起，两个选择器之间以逗号”,”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的jQuery对象。注意：多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个匹配的元素合并后一起返回。使用公式：(“selector1,selector2,……,selectorN”) selector1:一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等 selector2:另一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等 selectorN:（可选择）任意多个选择器，可以是ID选择器、元素选择器或类名选择器等示例：(“div,#btn”) //要查询文档中的全部的

元素和id属性为btn的元素 5.通配符选择器

03

python爬虫大战京东商城

写到这里可以看到搜索首页的网址中keyword和wq都是你输入的词，如果你想要爬取更多的信息，可以将这两个词改成你想要搜索的词即可，直接将汉字写上，在请求的时候会自动帮你编码的，我也试过了，可以抓取源码的，如果你想要不断的抓取，可以将要搜索的词写上文件里，然后从文件中读取就可以了。以上只是一个普通的爬虫，并没有用到什么框架，接下来将会写scrapy框架爬取的，请继续关注我的博客哦！！！

02

jQuery（选择器）

注意：但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)；

01

jQuery知识总结(最全最精美)

使用: <script src="jquery-3.5.1/jquery-3.3.1.min.js"></script> 注意: 如果<script> 在body前面,应该使用 jQuery独有的预加载 $(function(){ 这里写代码 }) jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。选择器: 所有选择器 * 标签选择器标签名 ID选择器 #id 类选择器 .

02

21-jQuery基础+选择器

jQuery是开源软件，使用MIT许可证授权。 jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择文档对象模型（DOM）元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使jQuery函数库能够创建功能强大的动态网页以及网络应用程序。

04

JQ 选择器大全

$(".one+div") <==> $(".one").next("div");

02

jQuery学习笔记

jQuery函数位于一个document ready函数中，我们需要在js中加载该函数文档

03

写了一道双指针，我飘了~

输入一个整数数组，实现一个函数来调整该数组中数字的顺序，使得所有奇数位于数组的前半部分，所有偶数位于数组的后半部分。

03

【前端攻略--HTML/CSS】这是你需要的transform学习教程

transition语法格式：transition: property duration timing-function delay;

01

jQery

目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装

01

玩转CSS3动画

因公司业务需要在Android WebView上增加对CSS3动画的支持，所以就先研究了一下CSS Animations。这篇文章主要站在前端开发人员的角度，试图阐述什么是CSS动画、包含哪些关键要素以及如何编写代码实现动画。先把这些捋清楚了，才好去考虑如何实现。

02

HTML5+CSS3+JavaScript从入门到精通-11

HTML5+CSS3+JavaScript从入门到精通作者：王征，李晓波第十一章 CSS特殊效果与动画案例 11-01 border-radius属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>border-radius属性</title> <style type="text/css"> #a { border-radius

02

用javascript分类刷leetcode19.数组(图文视频讲解)5

数组操作的时间复杂度Access：O(1)Search：O(n)Insert：平均O(n)，最好的情况下O(1)，也就是在数组尾部插入O(1)，最坏的情况下O(n)Delete；平均O(n)，最好的情况下O(1)，也就是在数组尾部删除O(1)，最坏的情况下O(n)图片167. 两数之和 II - 输入有序数组 (easy)给你一个下标从 1 开始的整数数组 numbers ，该数组已按非递减顺序排列，请你从数组中找出满足相加之和等于目标数 target 的两个数。如果设这两个数分别是 numbers

04

每天一算：Odd Even Linked List

我们会在每天早上8点30分准时推送一条LeetCode上的算法题目，并给出该题目的动画解析以及参考答案，每篇文章阅读时长为五分钟左右。

03

21.jQuery

简介 jQuery是一个快速、简洁的JavaScript框架，jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE

09

3101: N皇后

3101: N皇后 Time Limit: 10 Sec Memory Limit: 128 MBSec Special Judge Submit: 88 Solved: 41 [Submit][Status][Discuss] Description n*n的棋盘,在上面摆下n个皇后，使其两两间不能相互攻击… Input 一个数n Output 第i行表示在第i行第几列放置皇后 Sample Input 4 Sample Output 2 4 1 3 HINT 100%

09

前端成神之路-HTML5CSS3_01

一、什么是 HTML5 HTML5 的概念与定义定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念：是一个新版本的 HTML 语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 HTML5 拓展了哪些内容语义化标签本地存储兼容特性 2D、3D 动画、过渡 CSS3 特性性能与集成 HTML5 的现状绝对多数新的属性，

01

jQuery 教程

菜鸟教程 — jQuery 教程：https://www.runoob.com/jquery/jquery-tutorial.html

02

Python日志之Python控制流（顺

Python中程序代码执行是有序的，有的代码程序会从上倒下按顺序执行，有的程序会跳转着执行，有的程序代码会选择不同的分支去执行，有的程序代码会循环的去执行。那么到底什么样的程序会自上而下执行，哪些会选择分支执行，什么样的可以循环执行呢？在Python中是有相应的控制语句进行标识的，控制语句他能控制某些代码段的执行方式，我们把这些不同功能的控制语句称为控制流

01

前端基础-CSS3和CSS2的区别

css3在原有的基础上新增了很多css属性选择器，伪类选择器，伪对象选择器以及动画

02

Css3新特性应用之过渡与动画

一、缓动效果学习和利用贝塞尔曲线，默认支持ease，ease-in，ease-out,ease-in-out和linear等还提供一个cubic-beizer自定义贝塞尔曲线的起点和终点 Css中只支持一条贝塞尔曲的运动，不能连续多段对cubic-beizer中控制锚点的水平坐标与垂直坐标互换，就可以得到任何调整函数的反向版本 cubic-beizer(.1,.25,1,.25)是ease的反向调整函数水平坐标只能在0~1的范围内，因为水平坐标表示的是时间垂直坐标可以超过此范围，表示为运动距离

07

css选择器选择奇数行或偶数行

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

01

java面试题 --- 集合

1. java 集合你了解吗？ java 集合最顶层接口是 Collection 和 Map； Collection 有三个核心接口，分别是 List，Set，Queue； List 是有序可重复的，它的主要实现类有 ArrayList、LinkedList 和 Vector； ArrayList 是数组实现的，查询快增删慢线程不安全； LinkedList 是链表实现的，查询慢增删快线程不安全； Vector 相当于线程安全的 ArrayList； Set 是无序不重复的，它的主要实现类有 HashSe

02

jQuery选择器（满足你的所有业务）

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

02

jQuery入门基础——选择器

What：jQuery是JavaScript的类库，封装了很多js代码。类似java中的类库一样里面一个类中有很多别人写好的功能。90%以上的公司都在用jQuery。划重点，这句话要考

02

js与jQuery的区别以及jQuery选择器和方法的使用

jQuery是什么：jQuery是JavaScript的类库，封装了很多js代码。类似java中的类库一样里面一个类中有很多别人写好的功能。90%以上的公司都在用jQuery。

01

jQuery中的一些事件以及动画

加载事件我们有两种方式，一种就是javascript直接写：window.onload来加载。还有一种就是我们的jQuery中的加载方式$(function(){})

02

java学习（jQuery选择器）

来自雷丰阳老师课程 1.基本选择器 $("#id") //ID选择器 $("div") //元素选择器 $(".class") //类选择器 $(".class,#id1") //组合选择器：用逗号隔开 2.层次选择器 $("parent > child") //子元素选择器：> $("parent child ") //后代元素选择器：空格隔开 $("element + next") //相邻元素选择器：+ $("elemen

00

锋利的jQuery第四期

经过了十一长假，大家学习的状态怎么样呢？有没有一如既往的保持学习劲头呢？小编在假期去SAE和BAE上面逛了逛，研究了一下微信公众号服务器配置，无奈的是如果启用服务器原来自定义的菜单等应该就暂时报销了。。。所以小编没有下手，所以又花时间去网罗了一些微信小程序的相关教程和资料，说白了就是前端的教程了，然后我们的鹏宇大校长又分享了虚拟机装黑苹果的方法，感觉收益颇丰啊。(如果对C/C++感兴趣的同学可以找鹏宇校长进行业内顶级特训哦)

02

jQuery常用的选择器

当我们想要操所页面中的元素时，首先要做的就是选取元素。选取页面中元素可以使用jQuery给我们提供的$()方法，该方法需要提供选择器作为参数，方法执行完成后会返回给我们一个jQuery对象，被选取的元素就包含在该对象中。

02

【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )

E:first-child 选择器 : E 表示 HTML 标签类型 , 该选择器选择匹配的父容器中的第一个 E 类型标签子元素 ;

03

06. 为什么不 ban 猛犸？

无论是 Dota、LOL 还是其它 MOBA 游戏，比赛中均存在着 Ban Pick 机制：参与比赛的双方队伍通过数轮禁用/选取英雄后，最终确定游戏比赛的英雄阵容。

02

HTML与CSS进阶

本文主要介绍H5新增内容以及CSS3中的新特性。在H5方面主要介绍拓展了哪些内容，CSS3方面介绍动画及转换。

05

CSS相关

1. rem 默认字号 rem是相对html根元素来说的；浏览器默认的font-size为16px，也就是说默认 1rem为16px。鉴于此，一些网页定义根元素 font-size为10/16 = 0.675em，那么这个时候1rem为10px。 16px为继承值而使用rem前，一般都需要加入一些js代码，通过判断屏幕宽度去计算根[html]的font-size,代码为： (function() { function autoRootFontSize() { doc

03

CSS3动画animation

animation和上次说的transform动画有点不同，需要进行定义动画规则，而animation则无需受体，自动执行动画，translation则需要某个动作执行才进行动画！

03

Sony AS20作为WebCam

大多数摄像机不支持用作网络摄像头，因为在没有记录的情况下几分钟不活动后，电源将关闭以节省电池电量。但是，如果您的摄像机在菜单中有自动关闭 ( A.Shut Off ) 选项，则可以将其设置为关闭或从不以防止其自动关闭。如果您的摄像机没有此选项，则它不能用作网络摄像头。

02

golang刷leetcode 技巧（47）无序数组的中位数

要解决这个问题首先要了解什仫是中位数，所谓的中位数就是在一组有序的数字中找到中间的那个数字。如果数字的个数是奇数则直接返回中间的那个数，如果数字的个数是偶数此时这组数据的中位数有两个，取中间两个数的平均值即可。

01

「HTML&CSS」第一部分

请注意，本文编写于 2126 天前，最后修改于 174 天前，其中某些信息可能已经过时。

02

jquery 常用方法总结

jQuery顶级对象缩写$ window.jQuery window.$

00

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭