如何让一个div随时间来回变动

前言：CSS代表层叠样式表（Cascading Style Sheets），是一种用于定义网页外观和样式的语言。通过CSS，网页开发人员可以指定如何呈现HTML元素，包括颜色、字体、大小、布局和其他视觉属性；简单理解就是，css是给hmtl元素设置样式，通过css修饰网页，就像‘人靠衣装马靠鞍，html也要靠css才能打扮的好看’

关键字

animation属性，用于要改变字体的颜色的元素

注意：

@keyframes规则和animation属性

animation-name属性必须与@keyframes规则中定义的动画名称相匹配。如果指定的名称不存在，则不会产生任何动画效果。打个比方，我keyframes定义了名为Love 那么adimation-name后面就必须是Love;adimation-name:Love

@keyframes关键贴选择器是‘from’和'to'它们分别表示的是开始和结束

div随时间来回变动

直接上案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><style>@keyframes move {from {left: 0px;}to {left: 200px;}}#div_DT{width: 100px;height: 100px;background-color: red;position: absolute;animation-name: move;animation-duration: 2s;animation-iteration-count: infinite;animation-direction: alternate;}</style></head><body><div id="div_DT"></div></html>

在这个例子中，我们定义了一个名为“move”的动画，该动画从left: 0px（div的初始位置）开始，在2秒内将div向左移动200像素（到达left: 200px），然后返回原始位置。

我们还使用了一些其他属性来控制动画的行为：

animation-iteration-count: infinite; 将使动画无限循环。
animation-direction: alternate; 将使动画在正向和反向之间交替播放，因此div将来回移动。

如何让一个div随时间来回变动相关推荐

如何实现CSS字体渐变和字体颜色随时间来回变动
前言:CSS代表层叠样式表(Cascading Style Sheets),是一种用于定义网页外观和样式的语言.通过CSS,网页开发人员可以指定如何呈现HTML元素,包括颜色.字体.大小.布局和其他视 ...
安卓怎么用抖音做锁屏_把锁屏密码设置成当前时间，随时间的变动！别人怎么也猜不出来...
2019年的第3天,平头哥已经变了. 曾经的平头哥,天真的认为时间就是用来浪费的.而在新年的第一天,我知道时间还能用来设成锁屏密码!果然,新的一年我更加博学了呢. 你们平时都用什么锁屏密码? 是最原始 ...
oracle设置默认值为当前时间_把锁屏密码设置成当前时间，随时间永远变动！
2019年的第一天,大叔已经变了. 曾经的大叔,天真的认为时间就是用来浪费的.而在新年的第一天,我知道时间还能用来设成锁屏密码!果然,新的一年我更加博学了呢. 你们平时都用什么锁屏密码? 是最原始的数 ...
你不知道的锁屏方式！把锁屏密码设置成当前时间！随时间永远变动
智能手机发展迅速,每年各大手机厂商推出的新手机接连不断,每次等到新手机发布,都会心痒痒,对自己手上刚买的手机都会嫌弃(我反正是喜新厌旧的).随着新手机发布,也会有很多黑科技出世.我们手机的解锁方式从简 ...
主题模型综述：短文本、细粒度、加入先验知识、作者写作偏好、主题内涵随时间的变迁、融入词嵌入特性、语言模型加持
原文链接:https://www.zhihu.com/question/34801598/answer/765580727 主题模型当然有用咯,谁用谁知道!这次我来展示下它的7个"变种&qu ...
代码走查和代码审查_代码审查随时间而变化
代码走查和代码审查我们已经进行了大约4年的代码审查 . 代码审查入门从一开始,开发人员就会互相帮助,在有人询问时查看代码,或者有时主管或高级开发人员会介入并检查代码,如果我们发现测试存在问题,或者 ...
《Splunk智能运维实战》——3.11　制作折线图显示项目浏览量和购买量随时间的变化...
本节书摘来自华章计算机<Splunk智能运维实战>一书中的第3章,第3.11节,作者 [美]乔史·戴昆(Josh Diakun),保罗R.约翰逊(Paul R. Johnson),德莱克· ...
【DBMS 数据库管理系统】数据仓库特征 ( 特征一 : 面向主题组织数据 | 特征二 : 数据集成 | 特征三 : 数据不可更新 | 特征四 : 随时间不断变化 )
文章目录一.特征一 : 面向主题数据组织方式二.特征二 : 数据集成三.特征三 : 数据不可更新四.特征四 : 数据仓库中的数据随时间不断变化一.特征一 : 面向主题数据组织方式主题 ...
雨中冒险：难度随时间增高的设计
在Risk of Rain雨中冒险开始时,世界很平静,你的像素小人在完全陌生的地域行进,寻找传送装置进入下一关.雨中冒险的结局是混乱的,地面上充斥着怪物,让你无法生还. 压力和紧张存在于整局游戏.你会 ...

如何让一个div随时间来回变动

div随时间来回变动

如何让一个div随时间来回变动相关推荐

最新文章

热门文章