css3 简单的动画实现欢乐愉快的小鱼

效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;background-color: skyblue;}.fish {width: 174px;height: 126px;background: url("./fish.png") 0px 0px no-repeat;}.fish:nth-child(1) {/* 动画属性 动画名 执行时间  次数无限循环 指定步数, 动画名 执行时间 线性过渡 无限循环; */animation: swim 1s infinite steps(11), run 7s linear infinite;}.fish:nth-child(2) {animation: swim 2s infinite steps(11), run 4s linear infinite;}.fish:nth-child(3) {animation: swim 1.2s infinite steps(11), run 6.3s linear infinite;}.fish:nth-child(4) {animation: swim 0.8s infinite steps(11), run 7.5s linear infinite;}.fish:nth-child(5) {animation: swim 1.5s infinite steps(11), run 6.7s linear infinite;}/* 动画声明   名字 */@keyframes swim {100% {background-position: 0px -1386px;}}@keyframes run {40% {transform: translate(1000px, 0px);}60% {transform: translate(1000px, 0px) rotate(-180deg);}80% {transform: translate(0px, 0px) rotate(-180deg);}}</style>
</head>
<body><div class="fish"></div><div class="fish"></div><div class="fish"></div><div class="fish"></div><div class="fish"></div></body>
</html><!-- 1. 先实现一条小鱼抖动尾巴（原理其实就是使用动画改变 background-position, steps）2. 实现一条鱼的游动（找到关键节点 40%， 60%， 80%）， 要知道关键节点小鱼的transform参数值3. 添加多几条小鱼，给不同的小鱼设置不同的动画参数即可-->

css3 简单的动画实现欢乐愉快的小鱼相关推荐

CSS3简单魔方动画效果
CSS简单魔方效果在魔方效果中我们主要用到的是animation动画,transition(过渡),transform(变换) 首先我们在body里面下我们需要的标签元素 <body>& ...
SVG+CSS3 简单线条动画
CSS3: #g1 path {stroke-dasharray: 1000;/*当线条很长很长的时候,这个值也要相应的的增大,否则会导致线条变成线段*/stroke-dashoffset: 1000 ...
loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...
css3半空心圆_15个超强悍的CSS3圆盘时钟动画赏析
本文作者html5tricks,转载请注明出处在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个 ...
css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...
CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
25个CSS3 渐变和动画效果教程
2019独角兽企业重金招聘Python工程师标准>>> 随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站 ...
CSS3: 利用分层动画让元素沿弧形路径运动
原文:Moving along a curved path in CSS with layered animation 翻译:涂鸦码龙译者注:部分代码示例在原文中可以看效果(作者写在博文里面了-), ...
html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...

css3 简单的动画实现欢乐愉快的小鱼

效果

代码

css3 简单的动画实现欢乐愉快的小鱼相关推荐

最新文章

热门文章