css3动画的实例—

css3动画的实例讲解

什么困难都不能阻挡我们的学习路程，相比知识，我们更应该拥有的是逆战的勇气，这样才能更好地学好知识，那让我们来一起学习吧。下面就是我的css3动画的实例——摩天轮，在过程中可以联系我们更好地试用使用定位属性和动画的相关属性哦。
下面先来看一下摩天轮的最终效果图吧：

注：摩天的大轮是顺时针旋转的，摩天大轮上的人物小图都是逆时针旋转的。
HTML代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>摩天轮动画</title><link rel="stylesheet" type="text/css" href="css/ferris.css"/></head><body><div class="big"><img class="img1" src="img/bracket.png" alt="" /><!--摩天轮柱子1--><img class="img1-1" src="img/bracketsmall.png"/><!--摩天轮柱子2--><img class="img2" src="img/fsw.png" alt="" /><!--摩天轮大轮子--><img class="img3" src="img/big-title.png" alt="" /><!--幸福摩天轮图--><img class="img4" src="img/title.png"/><!--创作你的最优亲子照图--><div class="small"><!--摩天轮人物小图--><img src="img/boy.png" alt="" /><img src="img/dog.png" alt="" /><img src="img/girl.png" alt="" /><img src="img/girls.png" alt="" /><img src="img/mimi.png" alt="" /><img src="img/hairboy.png" alt="" /><img src="img/mudog.png" alt="" /><img src="img/shamegirl.png" alt="" /></div></div></body>
</html>

css代码：

.img1,.img1-1{position: absolute;top:50%;left:0;right:0;margin:auto;
}
.img1-1{z-index: -1;}
.img2,.img3{position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;
}
.img4{position: absolute;top:45%;bottom:0;left:0;right:0;margin:auto;
}
.small img{position: absolute;animation: smalls 20s linear  infinite;
}
.small img:nth-child(1){top:0;left:0;right:0;margin:auto;
}
.small img:nth-child(2){bottom:0;left:0;right:0;margin:auto;
}
.small img:nth-child(3){bottom:0;left:0;top:0;margin:auto;
}
.small img:nth-child(4){bottom:0;right:0;top:0;margin:auto;
}
.small img:nth-child(5){top:70px;left:70px;
}
.small img:nth-child(6){top:70px;right:70px;
}
.small img:nth-child(7){bottom:70px;right:70px;
}
.small img:nth-child(8){bottom:70px;left:70px;
}
.img2{animation: few 20s linear infinite;
}
.small{animation: few 20s linear infinite;
}
@keyframes few{0%{ transform: rotate(0deg);}100%{ transform: rotate(360deg);}
}
@keyframes smalls{0%{ transform: rotate(0deg);}100%{ transform: rotate(-360deg);}
}

css关键代码解释：
1、代码中的position: absolute;left:;right:;top:;bottom:;属性，是利用定位中的绝对定位属性给摩天轮的大轮子，两个柱子图片，幸福摩天轮图片，创作你的最优亲子照图片以及所有的人物小图片进行绝对定位，使图片显示到相应位置上。
2、代码中的@keyframes few{0%{ transform: rotate(0deg);}100%{transform: rotate(360deg);}}是定义动画名字为few,动画在0%时，旋转0度；动画在100%时，旋转360度。
3、代码中的.img2{animation: few 20s linear infinite;}以及.small{animation: few 20s linear infinite;}，是让摩天轮大轮子和人物小图的大盒子使用定义的动画few的，动画持续时间为20秒，匀速，且动画一直无限的执行下去。
4、代码中的@keyframes smalls{0%{ transform: rotate(0deg);}100%{ transform: rotate(-360deg);}}是定义动画名字为smalls,动画在0%时，旋转0度；动画在100%时，逆时针旋转360度。
5、代码中的.small img{position: absolute;animation: smalls 20s linear infinite;}，是让摩天轮动画的每个人物小图都使用绝对定位动，且使用画名为smalls的动画效果，动画持续时间为20秒，匀速，且无限执行下去。
看到这里，你是否会了呢？快去试试吧！
by:余佳佳

css3动画的实例——摩天轮相关推荐

动画-实现一个摩天轮
实现一个摩天轮效果 1.全部代码 2.添加图片 3.定义动画 4.调用动画 1.全部代码 <!DOCTYPE html> <html lang="en"> ...
2D动画——CSS制作摩天轮
1.步骤需要的素材分为三个部分,一个是底部位置固定的支架:一个是中间旋转的骨架:一个是单个座位: 分为三个盒子分别装这三种素材,第一个盒子放骨架,第二个盒子利用绝对定位放在第一个盒子之上,里面放单个 ...
html 鼠标图标做成动画效果,很好看的css3动画按钮鼠标悬停效果【2个实例】
前一篇文章我介绍了5个悬停效果非常漂亮的css3动画按钮实例,本文将再通过2个实例介绍悬停效果很酷的css3实现的动画按钮. 实例一实例一:css3实现的动画按钮我们做一个有星星的圆形按钮!当然, ...
利用CSS3动画制作摩天轮
本篇文章向大家介绍利用CSS3动画制作摩天轮旋转特效,代码很简单,还不赶紧学起来,发给你的小朋友看看吧! 运行效果: 代码: <!DOCTYPE html> <html>< ...
html仿微信拆红包效果旋转,利用React加CSS3实现微信拆红包动画效果实例（代码）...
本篇文章主要介绍了利用React加CSS3实现微信拆红包动画效果实例(代码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生, ...
HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
html5+css3实现2D-3D动画效果实例主要实现的功能就是一些2D.3D的动画效果,如平移.缩放.旋转等等. 文章目录 html5+css3实现2D-3D动画效果实例 2D变换 3D变换案例 ...
html背景只向x轴扩散,CSS3实现任意图片lowpoly动画效果实例
这是一个利用CSS3的动画属性实现的结合lowpoly(低多边形风格)的效果,主要利用了CSS3 transform属性的rotate旋转,translate移动,scale缩放,CSS代码部分非常简 ...
css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...

css3动画的实例——摩天轮

css3动画的实例讲解

css3动画的实例——摩天轮相关推荐

最新文章

热门文章