CSS3：过渡动画及关键帧动画-案例一：扑克牌的翻转

最新推荐文章于 2023-04-08 14:37:00 发布

BadType

最新推荐文章于 2023-04-08 14:37:00 发布

阅读量1k

点赞数

分类专栏：前端HTML 文章标签： css3 css animation html html5

本文链接：https://blog.csdn.net/BadType/article/details/114987641

版权

前端HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、过渡动画及关键帧动画

本文大致介绍了CSS3中的技术之一：动画，因为我也是学习者，这只是我自己的观点，如有错误，请指出。废话不多说，开始步入正题：
想必大家都看过动画片：猫和老鼠，其剧情幽默轻松，让人印象深刻。就像灰太狼永远都吃不到羊，汤姆也斗不过杰瑞。那么这么好看的动画片是怎么拍出来的呢？是直接实拍吗？想必大家都没深究。今天就讲讲这些动画是怎么呈现在我们面前的。
我们所看到的动画是一帧一帧的画面，当连起来播放，就是一个完整的动画了。那么CSS3中的动画是什么呢？CSS3中的动画是使元素从一种样式逐渐变化为另一种样式的效果
说道动画的动，我们不得不说到变形操作，其关键字为：transform，其属性有：
在这里插入图片描述
（这里只讲常用的属性）

过渡动画关键字：transition 其属性有：
值描述transition-property 规定设置过渡效果的 CSS 属性的名称。transition-duration 规定完成过渡效果需要多少秒或毫秒。transition-timing-function 规定速度效果的速度曲线。transition-delay 定义过渡效果何时开始
。
关键帧动画关键字：@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>

大家对样式或者有疑问的可以提出来，我会及时解答或更正，谢谢大家！

BadType

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3：过渡动画及关键帧动画-案例一：扑克牌的翻转

一、过渡动画及关键帧动画本文大致介绍了CSS3中的技术之一：动画，因为我也是学习者，这只是我自己的观点，如有错误，请指出。废话不多说，开始步入正题：想必大家都看过动画片：猫和老鼠，其剧情幽默轻松，让人印象深刻。就像灰太狼永远都吃不到羊，汤姆也斗不过杰瑞。那么这么好看的动画片是怎么拍出来的呢？是直接实拍吗？想必大家都没深究。今天就讲讲这些动画是怎么呈现在我们面前的。我们所看到的动画是一帧一帧的画面，当连起来播放，就是一个完整的动画了。那么CSS3中的动画是什么呢？CSS3中的动画是使元素从一种样式逐渐变
复制链接

扫一扫

专栏目录