一、过渡动画及关键帧动画
本文大致介绍了CSS3中的技术之一:动画,因为我也是学习者,这只是我自己的观点,如有错误,请指出。废话不多说,开始步入正题:
想必大家都看过动画片:猫和老鼠,其剧情幽默轻松,让人印象深刻。就像灰太狼永远都吃不到羊,汤姆也斗不过杰瑞。那么这么好看的动画片是怎么拍出来的呢?是直接实拍吗?想必大家都没深究。今天就讲讲这些动画是怎么呈现在我们面前的。
我们所看到的动画是一帧一帧的画面,当连起来播放,就是一个完整的动画了。那么CSS3中的动画是什么呢?CSS3中的动画是使元素从一种样式逐渐变化为另一种样式的效果
说道动画的动,我们不得不说到变形操作,其关键字为:transform,其属性有:
(这里只讲常用的属性)
过渡动画关键字:transition 其属性有:
。
关键帧动画关键字:@keyframes、animation
那么我们怎么实现CSS3中的动画呢?这里面涉及到过渡动画和帧动画,这其实很简单,一共分为两个步骤:
1.写剧本
2.调用剧本
下面提供相关代码:
1.写剧本:@keyframes 自定义名称{
from {
过渡动画代码;
}
to {
过渡动画代码;
}
}
或者
@keyframes 自定义名称{
0%{
过渡动画代码; 或者相关操作
}
100% {
过渡动画代码; 或者相关操作
}
}
2.调用剧本
animation: 自定义名称 5s linear infinite;
代码解释:这的5s是剧本的运行时间 linear:匀速运行 运行次数: infinite(无限次)
下面用案例来综合讲解动画过渡的用法: 本次讲的案例是扑克牌的翻转,话不多说,先上效果:
由于视频不好长传,无法给大家展示动态效果,这里我就讲述一下,将鼠标悬停在扑克牌上,扑克牌会自动展开,移开鼠标,扑克牌会自动复原
下面代码提供了样式:
<style>
body {
background-color: white;
perspective: 800px;
/*开启3d空间*/
transform-style: preserve-3d;
}
ul {
width: 300px;
height: 380px;
border: 3px solid white;
margin: 200px auto;
/*消除li标签的圆点*/
list-style: none;
padding: 0;
position: relative;
/*开启3d空间*/
transform-style: preserve-3d;
}
ul li {
width: 100%;
height: 100%;
border: 2px solid white;
/*盒子阴影*/
box-shadow: 0px 0px 5px 1px white;
position: absolute;
/*开启3d空间*/
transform-style: preserve-3d;
/*设置视角*/
transform-origin: 0px 400px;
transition: all 1s;
}
/*触发器*/
ul:hover {}
ul:hover li:nth-of-type(6) {
transition: all 1s 1s;
/*设置动作-旋转60°*/
transform: rotateZ(60deg);
}
ul:hover li:nth-of-type(5) {
transition: all 1s 1.2s;
/*设置动作-旋转120°*/
transform: rotateZ(120deg);
}
ul:hover li:nth-of-type(4) {
transition: all 1s 1.4s;
transform: rotateZ(180deg);
}
ul:hover li:nth-of-type(3) {
transition: all 1s 1.6s;
transform: rotateZ(240deg);
}
ul:hover li:nth-of-type(2) {
transition: all 1s 1.8s;
transform: rotateZ(300deg);
}
ul:hover li:nth-of-type(1) {
transition: all 1s 2s;
transform: rotateZ(360deg);
}
</style>
<body>
<ul>
<li><img src="img/pk1.png" alt=""></li>
<li><img src="img/pk2.png" alt=""></li>
<li><img src="img/pk1.png" alt=""></li>
<li><img src="img/pk2.png" alt=""></li>
<li><img src="img/pk1.png" alt=""></li>
<li><img src="img/pk2.png" alt=""></li>
</ul>
</body>
大家对样式或者有疑问的可以提出来,我会及时解答或更正,谢谢大家!