css实现元素的横向运动动画效果

以如下代码为例，html的body中有一个header。现在在head中定义header的css样式：

<head>
<style>header{width:1200px;overflow:hidden;animation-name: HMove;animation-duration: 3s;animation-iteration-count: infinite;animation-direction: alternate;}
@keyframes HMove{from {transform:translateX(0px);}to {transform:translateX(100px);}
}</style></head><body style="background-image:url(img/wangyifan2.jpg); background-size:cover;"><header><h1><font color=#CD7F32>xxxxxx</font></h1>
</header>
</body>

style标签内给header定义了样式。

其中animation-name定义了动画的名字，在后面要用的。

animation-iteration-count是动画重复的次数，假如取值是infinite，则重复无限次。

animation-duration是完成一次动画的耗时。

animation-direction: alternate表示相邻的两次动画运行的方向是相反的。

接下来的@keyframes定义动画的具体行为。@keyframes后面的字符串对应前面animation-name的名字。其from项描述动画的初始状态。这里from初始状态是translateX(0px)，表示动画开始时元素没有任何偏移。to项描述动画的结束状态。这里to的状态是translateX(100px),表示动画结束时的状态是沿X方向偏移100个像素。

css实现元素的横向运动动画效果相关推荐

c语言实现小球抛物线动画,CSS实现小球抛物线运动的动画效果（代码）
本篇文章给大家带来的内容是关于CSS实现小球抛物线运动的动画效果 (代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一个物体实现抛物线运动,物理上是将物体分为水平运动(匀速) ...
【每日一练】68—CSS实现一组渐变按钮动画效果
在之前,我们也练习过一些按钮动画的效果,今天我们再来练习一组CSS实现的按钮动画效果,下面是今天练习的最终效果: 接下来,我们再来看一下这个案例的源码. HTML代码: <!doctype ht ...
纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
【每日一练】138—CSS实现炫酷背景动画效果
以下是今天练习的最终效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta na ...
html图片自动循环,css实现图片循环的动画效果（代码）
本篇文章给大家带来的内容是关于css实现图片循环的动画效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. *{margin: 0;padding: 0;} .robot{ w ...
css 毛玻璃_CSS实现雨滴动画效果
今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. 其实就是给一张图片,做了个模糊化的效果,看起来像毛玻璃的效果一滴雨雨滴的效果就很巧 ...
基于css简易实现头像更换动画效果
目录需求描述思路模拟效果预览具体实现真实场景展示已经好久没有写博客了,今天写个简单的小需求功能实现回归一下学习之路. 需求描述个人主页头像实现更换图像动画效果思路基于两个div块通 ...
沙漏PHP代码,如何使用纯CSS实现一个沙漏的动画效果
本篇文章给大家带来的内容是关于如何使用css实现监控网络连接状态的页面 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com/c ...
02 css实现文字下划线动画效果
实现文字下划线从中间向两端延伸的动画效果,主要是通过css的transform和transition属性来实现,下面直接粘贴代码和效果图: <!DOCTYPE html> <html ...

css实现元素的横向运动动画效果

css实现元素的横向运动动画效果相关推荐

最新文章

热门文章