css精灵图实现晃动效果,使用CSS3和精灵图实现游动的3D金鱼

最新推荐文章于 2022-05-13 02:04:17 发布
最新推荐文章于 2022-05-13 02:04:17 发布
阅读量259 收藏
点赞数
文章标签： css精灵图实现晃动效果

CSS

语言：

CSSSCSS

确定

body {

-webkit-perspective: 800px;

perspective: 800px;

background: #333 url("http://mephysto.github.io/sandbox/oceanscene.jpg?v=1");

background-size: cover;

height: 100vh;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

/*

CSS ANIMATIONS

*/

@-webkit-keyframes rotatingAnimation {

0% {

-webkit-transform: translate3d(0, 0, 0px) rotateY(0deg);

transform: translate3d(0, 0, 0px) rotateY(0deg);

}

100% {

-webkit-transform: translate3d(0, 0, 0px) rotateY(360deg);

transform: translate3d(0, 0, 0px) rotateY(360deg);

}

}

@keyframes rotatingAnimation {

0% {

-webkit-transform: translate3d(0, 0, 0px) rotateY(0deg);

transform: translate3d(0, 0, 0px) rotateY(0deg);

}

100% {

-webkit-transform: translate3d(0, 0, 0px) rotateY(360deg);

transform: translate3d(0, 0, 0px) rotateY(360deg);

}

}

@-webkit-keyframes swimmingAnimation {

0% {

-webkit-transform: translate3d(0, 0, 300px) scale(0.5) rotateY(-10deg);

transform: translate3d(0, 0, 300px) scale(0.5) rotateY(-10deg);

}

100% {

-webkit-transform: translate3d(0, 0, 300px) scale(0.5) rotateY(10deg);

transform: translate3d(0, 0, 300px) scale(0.5) rotateY(10deg);

}

}

@keyframes swimmingAnimation {

0% {

-webkit-transform: translate3d(0, 0, 300px) scale(0.5) rotateY(-10deg);

transform: translate3d(0, 0, 300px) scale(0.5) rotateY(-10deg);

}

100% {

-webkit-transform: translate3d(0, 0, 300px) scale(0.5) rotateY(10deg);

transform: translate3d(0, 0, 300px) scale(0.5) rotateY(10deg);

}

}

@-webkit-keyframes wiggle-end {

0% {

-webkit-transform: rotateY(-10deg);

transform: rotateY(-10deg);

}

100% {

-webkit-transform: rotateY(10deg);

transform: rotateY(10deg);

}

}

@keyframes wiggle-end {

0% {

-webkit-transform: rotateY(-10deg);

transform: rotateY(-10deg);

}

100% {

-webkit-transform: rotateY(10deg);

transform: rotateY(10deg);

}

}

@-webkit-keyframes wiggle-body {

0% {

-webkit-transform: rotateY(-10deg);

transform: rotateY(-10deg);

}

100% {

-webkit-transform: rotateY(10deg);

transform: rotateY(10deg);

}

}

@keyframes wiggle-body {

0% {

-webkit-transform: rotateY(-10deg);

transform: rotateY(-10deg);

}

100% {

-webkit-transform: rotateY(10deg);

transform: rotateY(10deg);

}

}

@-webkit-keyframes fish-lift {

0% {

-webkit-transform: translate(0px, 12px);

transform: translate(0px, 12px);

}

100% {

-webkit-transform: translate(0px, -12px);

transform: translate(0px, -12px);

}

}

@keyframes fish-lift {

0% {

-webkit-transform: translate(0px, 12px);

transform: translate(0px, 12px);

}

100% {

-webkit-transform: translate(0px, -12px);

transform: translate(0px, -12px);

}

}

@-webkit-keyframes fish-roll {

0% {

-webkit-transform: rotateX(-10deg);

transform: rotateX(-10deg);

}

100% {

-webkit-transform: rotateX(10deg);

transform: rotateX(10deg);

}

}

@keyframes fish-roll {

0% {

-webkit-transform: rotateX(-10deg);

transform: rotateX(-10deg);

}

100% {

-webkit-transform: rotateX(10deg);

transform: rotateX(10deg);

}

}

/*

Fish Styling

*/

.fish-wrapper {

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-animation: rotatingAnimation 10000ms infinite linear;

animation: rotatingAnimation 10000ms infinite linear;

}

.fish-container {

position: absolute;

z-index: 500;

left: 50%;

top: 50%;

-webkit-perspective: 10000px;

perspective: 10000px;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.fish-container .fish-body {

background-image: url(/uploads/161001/goldfish-sprite.png?v=1);

background-position: -208px 0px;

width: 312px;

height: 169px;

top: -84.5px;

left: -156px;

}

.fish-container .fish-body.front {

z-index: 300;

-webkit-transform-origin: 100% 50%;

transform-origin: 100% 50%;

-webkit-transform: rotateY(5deg);

transform: rotateY(5deg);

}

.fish-container .fish-body.back {

z-index: 100;

-webkit-transform-origin: 100% 50%;

transform-origin: 100% 50%;

-webkit-transform: rotateY(-5deg);

transform: rotateY(-5deg);

}

.fish-container .fish-top-fin {

background-image: url(/uploads/161001/goldfish-sprite.png?v=1);

background-position: 0px -263px;

width: 150px;

height: 124px;

left: -157px;

top: -176px;

-webkit-transform-origin: 50% 100%;

transform-origin: 50% 100%;

-webkit-animation: fish-roll 1750ms infinite alternate ease-in-out;

animation: fish-roll 1750ms infinite alternate ease-in-out;

}

.fish-container .fish-back-bottom-fin {

background-image: url(/uploads/161001/goldfish-sprite.png?v=1);

background-position: -208px -169px;

width: 73px;

height: 68px;

left: -106px;

top: 61px;

}

.fish-container .fish-back-bottom-fin.front {

z-index: 300;

-webkit-transform-origin: 50% 0%;

transform-origin: 50% 0%;

-webkit-animation: fish-roll 1750ms infinite alternate ease-in-out;

animation: fish-roll 1750ms infinite alternate ease-in-out;

}

.fish-container .fish-back-bottom-fin.back {

z-index: 100;

-webkit-transform-origin: 50% 0%;

transform-origin: 50% 0%;

-webkit-animation: fish-roll 1750ms infinite alternate-reverse ease-in-out;

animation: fish-roll 1750ms infinite alternate-reverse ease-in-out;

}

.fish-container .fish-back-fin {

background-image: url(/uploads/161001/goldfish-sprite.png?v=1);

background-position: 0px 0px;

width: 208px;

height: 263px;

left: -320px;

top: -91px;

background-position: 0% 0;

-webkit-transform-origin: 105% 0;

transform-origin: 105% 0;

-webkit-animation: wiggle-end 200ms infinite alternate ease-in-out;

animation: wiggle-end 200ms infinite alternate ease-in-out;

}

.fish-container .fish-front-bottom-fin {

background-image: url(/uploads/161001/goldfish-sprite.png?v=1);

background-position: -281px -169px;

width: 51px;

height: 65px;

left: -1px;

top: 46px;

}

.fish-container .fish-front-bottom-fin.front {

z-index: 300;

-webkit-transform-origin: 50% 0%;

transform-origin: 50% 0%;

-webkit-transform-origin: 50% 0%;

transform-origin: 50% 0%;

-webkit-animation: fish-roll 1750ms infinite alternate ease-in-out;

animation: fish-roll 1750ms infinite alternate ease-in-out;

}

.fish-container .fish-front-bottom-fin.back {

z-index: 100;

-webkit-transform-origin: 50% 0%;

transform-origin: 50% 0%;

-webkit-transform-origin: 50% 0%;

transform-origin: 50% 0%;

-webkit-animation: fish-roll 1750ms infinite alternate-reverse ease-in-out;

animation: fish-roll 1750ms infinite alternate-reverse ease-in-out;

}

.fish-parts {

-webkit-transition: 250ms;

transition: 250ms;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-animation: swimmingAnimation 1000ms infinite alternate ease-in-out;

animation: swimmingAnimation 1000ms infinite alternate ease-in-out;

}

.fish-parts > div {

position: absolute;

z-index: 200;

}

俊英子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3动画(animation) 捕鱼达人之无限摆动游泳的鱼 案例
05-26
CSS3动画(animation) 捕鱼达人之无限摆动游泳的鱼 案例,可以到我发布的文章看效果图.
纯css3金鱼游动特效.zip
07-03
纯css3金鱼游动是一款非常漂亮的小金鱼游动特效。 纯css3金鱼游动特效图：
css3 简单的动画实现欢乐愉快的小鱼
txw0415的博客
05-24 1429
效果代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
css 制作如同gif图的动画（精灵动画）
lixu102593的博客
02-11 746
如图所示的动画的制作过程 链接阿里云动画 查找的资料添加链接描述 在应用 CSS3 渐变/动画时，有个控制时间的属性 。它的取值中除了常用到的 三次贝塞尔曲线 以外，还有个让人比较困惑的 steps() 函数。 steps() 第一个参数 number 为指定的间隔数（必须是正整数），即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。 那么有了这个steps()，我们就可以实现web中常见的Sprite 精灵动画了，见dem.
CSS3使用精灵图实现游动的3D金鱼动画效果源码.zip
11-02
在本示例中，我们探讨的是如何利用CSS3的特性，特别是精灵图（Sprite）技术和3D转换，来创建一个游动的3D金鱼动画效果。CSS3是层叠样式表的最新版本，它引入了许多强大的新功能，如选择器、伪元素、动画和3D转换等，...
纯css3实现金鱼游动.zip
11-25
在本项目"纯css3实现金鱼游动.zip"中，开发者通过HTML5、jQuery、JavaScript和CSS技术，创建了一个动态的、逼真的金鱼游动效果。这个效果完全依赖于CSS3，展示了这一现代Web技术的强大功能。下面将详细探讨这些技术...
CSS3海底游动的金鱼动画特效
07-24
总结来说，"CSS3海底游动的金鱼动画特效"是通过CSS3的动画和变换功能实现的，包括关键帧动画、动画属性、变换和过渡。通过巧妙地组合和应用这些特性，开发者可以创造出一个生动的海底世界，提升用户体验。实践中，...
纯css3金鱼游动特效特效代码
03-20
【纯CSS3金鱼游动特效】是一种利用CSS3的强大功能来实现的视觉效果，它无需JavaScript或者其他外部脚本，完全依赖于CSS3的动画属性和选择器来创建动态的金鱼游动场景。这个特效展示了CSS3在网页设计中的创新应用，...
CSS3海底游动的金鱼动画特效.zip
最新发布
10-14
【CSS3海底游动的金鱼动画特效】是一种在网页设计中常见的动态视觉效果，它利用了CSS3的强大力量来实现。CSS3（层叠样式表第三版）是CSS的一个新版本，引入了许多先进的功能，如选择器、伪类、过渡、动画和3D变换，...
CSS精灵助手(njCsSprite)
03-03
欢迎使用 njCsSprite 网页精灵助手 本程序可以方便CSS网页精灵的制作和维护 使用方法： 1、新建 -> 创建一个CSS精灵文档 2、打开 -> 打开由本程序打包的CSS网页精灵数据包，可以继续以前的工作 3、保存 -> 将当前文档打包保存 4、添加图片 -> 向当前文档添加一个图片 5、移除图片 -> 移除右边对象选择框显示的图片 6、保存大图 -> 将当前文档的大图存储到文件 7、生成演示页面 -> 将当前文档的效果保存到html文件 8、横 -> 自动横向排列 9、竖 -> 自动垂直排列 10、 [竖]右边的方框 -> 设置自动排列时的margin 11、水平滚动条右端的方框 -> 更改当前文档的背景参数 小提示： 1、在预览框里点击小图对象选择框也会自动跟踪，此时直可接点击[移除图片]。 2、排列好小图后，可以手动更改背景尺寸以达到最佳的大图尺寸。 祝君好运……
css3 animation transform鱼游动动画特效
06-11
这是一款基于css3 animation transform属性制作的鱼游动动画特效，用background-position属性实现两条游动追逐的鱼。
css3金鱼在浴缸吐泡泡动画
ICode联盟
05-13 128
下载地址 金鱼、浴缸和泡泡都是css3画的，吐泡泡的动画效果也是用css3实现的。 dd:
css3 3D动画 旋转木马（奔跑的小熊）
无情编码工具人的博客
06-18 338
效果图 直接上代码（复制可用） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style>
CSS sprites (css 精灵)实现教程
记录或发现工作问题，予以解决
05-17 483
首先介绍一下css精灵的基本规则： 1.静态图片，不随用户信息的变化而变化 2.小图片，图片容量比较小 3.加载量比较大 优点：有效较少http请求数量，加速内容显示，每一次请求，就会与服务器建立一次链接。 你们所看到的精灵图都是由css background-position属性所控制的 原理是：通过控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动 雪碧...
CSS点亮摇晃灯泡
苦涩精灵的博客
01-04 403
非原创，简化了一些代码让自己能看懂。 <!doctype html> <html> <head> <meta charset="utf-8"> <style> @keyframes lampLine { from { transform: rotate(5deg); } to { ...
基于CSS实现盒子抖动效果_艾孜尔江撰
热门推荐
艾孜尔江的博客
03-02 5万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS实现抖动盒子&...
threejs 精灵Sprite旋转位置偏移问题
LJR_BLOG的博客
11-25 6038
threejs 精灵Sprite旋转位置偏移问题
css3 -webkit-animation与-webkit-keyframes
cloudmaplex的专栏
11-10 913
-webkit-transform定义了元素的变形，-webkit-transition定义了元素的属性变化样式，-webkit-animation与-webkit-keyframes则真正的让元素动起来（不只是变到什么状态，更定义了中间过程） 让元素动起来 -webkit-animation定义一段动画属性，比如名字，持续时间，当前状态等。-webkit-keyframes则对每一个动画
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值