HTML+CSS动画波纹效果和奔跑的大熊

动画概念

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来控制一个或一组动画。常用来实现复杂的动画效果。

相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的使用

定义动画：使用@keyframes定义动画

语法：

@keyframes 动画名称{%0{}100%{}}

动画序列

0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
动画使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式，任意多的次数
用百分比来规定动画发生的时间，或用关键词from和to，等同于0%和100%

使用动画

div{animation-name：动画名称animation-duration：持续时间
}

动画的属性

属性	描述
@keyframes	定义动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	定义@keyframes动画的名称，必填
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认0，必填
animation-timing-function	规定动画的速度曲线，默认ease
animation-delay	规定动画何时开始，默认0立刻开始
animation-iteration-count	规定动画的播放次数，默认是1，还有infinite无限循环
animation-direction	规定动画是否在下一个周期逆向播放，默认是normal，alternate逆向播放
animation-play-state	规定动画是否在运行或暂停，默认是running还有pause
animation-fill-mode	规定动画结束后状态，保持forwards，回到起始backwards

动画简写属性

animation: 动画名称持续时间运动曲线何时开始播放次数是否反向动画开始或结束状态

简写属性里不包含animation-play-state
暂停动画animation-play-state经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来，animation-direction：alternate
盒子动画结束后，停在结束位置：animation-fill-mode：forwards

动画案例

案例1： 实现波纹效果

<html><head><title>demo3</title><style>body {background-color: #333;}.map {position: relative}.city {position: absolute;top: 300px;right: 50%}.dotted {width: 8px;height: 8px;background-color: #0099ff;border-radius: 50%;}.city div[class^='pulse'] {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 8px;height: 8px;box-shadow: 0 0 12px #009dfd;border-radius: 50%;animation-name: pulse;animation-duration: 1.2s;animation-timing-function: linear;animation-iteration-count: infinite;}@keyframes pulse {0% {}70% {width: 40px;height: 40px;opacity: 1;}100% {width: 70px;height: 70px;opacity: 0;}}.city div.pulse2 {animation-delay: 0.4s;}.city div.pulse3 {animation-delay: 0.8s;}</style>
</head><body><div class="map"><div class="city"><div class="dotted"></div><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div></div>
</body></html>

案例2：实现奔跑的大熊

基本思路：如下图所示一张图片上有8个不同状态的大熊，每个大熊的宽度大约是160px，我们定义一个宽为160px的div盒子，然后把这个图片作为盒子的背景图片，然后通过动画控制背景图片的位置，每次向左移动一个大熊的的位置，所以8个大熊（背景图片的总宽度）分为8次移动结束。这里需要制定animation-timing-function的属性为steps(8)，这样连续起来就像大熊在奔跑一样。然后我们再定义一组盒子移动的动画。让盒子从左边移动到右边。多组动画用逗号分隔。

<html><head><title>demo3</title><style>body {background-color: #000;}.bear {position: absolute;width: 160px;height: 80px;top: 50%;transform: translateY(-50%);background: url(./bear-25676f9.png) no-repeat;animation: bear 1s steps(8) infinite, move 5s linear infinite;}@keyframes bear {0% {background-position: 0 0;}100% {background-position: -1280px 0;}}@keyframes move {0% {left: 0;}100% {left: 100%}}div:nth-child(2) {animation-delay: 1s;animation-duration: 2.5s;}div:nth-child(3){animation-delay: 2s;animation-duration: 2s;}div:nth-child(4){animation-delay: 3s;animation-duration: 1s;}div:last-child {animation-delay: 4s;}</style>
</head><body><div class="bear"></div><div class="bear"></div><div class="bear"></div><div class="bear"></div><div class="bear"></div>
</body></html>

HTML+CSS动画波纹效果和奔跑的大熊相关推荐

html如何自定义一个动画效果,30个纯css动画代码片段和效果演示
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
如何用css实现波纹动画效果
波纹效果可以用css的 animation 动画来实现,animation 相比单纯用 transform 能实现更为复杂的效果. 效果图: 下面三张图分别为原图.效果图和去掉背景图片后的效果图, ...
android水波纹动画制作,Framer之事件 | 如何制作安卓点击水波纹效果？
之前的 Framer 教程都是按照个人喜好去写的,没有按照难易程度形成系列.为了让大家能更好地入门,我准备由易到难写一个系列教程,尽量保持在每周一篇的频率. 导读:事件是 Framer 中的一个重要概 ...
CSS实战 - 波纹扩散效果
1.实现效果效果一:涟漪扩散效果效果二:波动扩散效果 2.实现原理在 div 里定义圆形,使用 css 的动画,让圆形的大小由小到大进行变化. ① 涟漪扩散: 定义了3个带边框的空圆,让这3个圆 ...
css波纹波动效果,CSS 冲击波(水波纹)效果
实现冲击波--数学知识很重要 *{ margin:0; padding:0; box-sizing:border-box; } html,body{ font-family:"微软雅黑&qu ...
CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理在按钮中放置一个默认隐藏径向渐变的 ...
动画延迟效果css,每个子元素都有延迟的CSS动画
每个子元素都有延迟的CSS动画我试图通过将动画应用于每个子元素来创建级联效果. 我想知道是否有比这更好的方法: .myClass img:nth-child(1){ -webkit-animatio ...
css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...

HTML+CSS动画波纹效果和奔跑的大熊

动画概念

动画的使用

动画案例

HTML+CSS动画波纹效果和奔跑的大熊相关推荐

最新文章

热门文章