CSS3实现动画效果_css3动画效果-程序员宅基地

技术标签： css 前端网络安全 css3

如何让在只有HTML与CSS的情况下实现动态效果呢？

关于动画，众所周知，JavaScript与Flash是做动画的主流，虽然CSS3的过渡并没有前两个专业，但是正是由于CSS3处理数据较少，其过渡比德芙还要丝滑。

今天让我们来看一下：

一、过渡（transtion）

属性：

1、transition-property

2、transition-duration（默认值为0，此时变化为一瞬间，没有过渡效果）

3、transition-timing-function

4、transition-delay

功能：

1、指定要过渡的CSS属性

2、指定完成过渡需要花费的时间（s）

3、指定过渡函数

其包括liner：匀速

ease-in：减速

ease-out：先加速再减速

4、指定过渡开始进行的延迟时间（s）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        #container{
            width:100px;
            height:100px;
            background:blue;
            #container:hover{
                cursor: pointer;
                left: 100px;
                border-radius: 50%;
                background: red ;
            }
        }
        .box{
            position: absolute;
            top: 20px;
            left:20px;
            width:100px;
            height:100px;
            background:blue;
            transition: all 5s ease ;
        }
        .box:hover{
            cursor: pointer;
            left: 100px;
            border-radius: 50%;
            background: deeppink;
           /* border-radius: 50%;
            transition-property: left;
            transition-duration: 10s;
            transition-timing-function: ease;
            transition-delay: 2s;*/
        }
    </style>
</head>
<body>

注意：由于过渡需要用户操作才可以实现，所以用:hover，若希望多个元素都具有过渡属性，则用ALL即可。和我们一起所写的background一样，既可以分开来写，也可以写在一起。

二、转换

1、移动

通过使用rotate（）实现单位deg

语法格式： transform：rotate(45deg) 旋转45度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换之旋转</title>
    <style>
        .box{
            position: absolute;
            left:200px;
            top:200px;
            width:200px;
            height:200px;
            background-color: deeppink;

            transform-origin: 10px 10px;
            transform: rotate(45deg) ;
        }
    </style>

2、旋转

通过使：用transform实现，可实现元素的位移与旋转、缩放

位移：transform：translate（）

旋转；transform：rotate（）

缩放：transform：scale（）

位移需要通过x与y坐标确定移动位置语法格式：

transform:translate(x,y); transform:translateX(n); transform:translateY(n)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换之移动</title>
    <style>
        .box{
            width:100px;
            height:100px;
            border: 1px solid black;
            background-color: deeppink;
        }
        div#div2{
            transform: translate(50px,100px) ;
           /* transform: translateX(50px);
            transform: translateY(100px) ;*/
            background-color: blue;
        }
    </style>

3、缩放

缩放使用transform:scole（）语法格式： transform:scole(1,1)宽和高都放大一倍 transform:scole(2)相当于scole(2,2) 大于1为放大，小于为缩小。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>转换之缩放</title>
    <style>
        div{
            position: absolute;

            width:100px;
            height:100px;
            background-color: deeppink;
        }
    </style>

三、动画

transition虽然纵享丝滑，但是缺点非常明显：

1、需要用户通过特定的操作进行触发

2、transition是一次性的，并不能重复，除非继续特定出发

3、其只能定义开头与结尾，中间过程无法定义

在这种万般无奈的情况下，animation诞生了！它不仅可以通过每一帧来进行动画效果的展示，并且可以完美调用每一帧。动画是css中的一功能，与过渡最大的区别是：动画可以实现更多变化，更多控制，自动播放等功能若使用动画，浏览器应该是最高版本使用动画时，用@keyframes来作为关键帧，通过百分比构建样式规则。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>动画1</title>
    <style>
        .box{
            position: absolute;
            left:100px;
            top:10px;
            width:100px;
            height:100px;
            background-color: deeppink;
        }
        .box:hover {
            animation: move 2s;
        }
        /*定义动画*/
        @keyframes move {
            from{
                left :10px;
            }
            to{
                left:100px;
            }
        }
    </style>

属性：

1、animation-name（none为默认值，无动画效果）

2、animation-duration（默认值为0，无动画效果）

3、animation-timing-function（同上）

4、animation-delay

5、animation-iteration-count（1为默认值，infinite为无限次循环）

6、animation-direction（默认值为normal）

7、animation-state（默认running播放，pause暂停）

8、animation-fill-mode（默认值none，forwards回到关键帧，backwards回到第一帧）

功能：

1、指定关键帧动画名字

2、指定动画播放时间

3、设置动画播放方式

4、设置开始时间

5、设置循环次数

6、动画播放方向

7、播放状态，播放或者暂停

8、播放时间外属性

本文链接：https://blog.csdn.net/AXDRXS/article/details/121993463

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

2024最新计算机毕业设计选题大全-程序员宅基地

文章浏览阅读1.6k次，点赞12次，收藏7次。大家好！大四的同学们毕业设计即将开始了，你们做好准备了吗？学长给大家精心整理了最新的计算机毕业设计选题，希望能为你们提供帮助。如果在选题过程中有任何疑问，都可以随时问我，我会尽力帮助大家。在选择毕业设计选题时，有几个要点需要考虑。首先，选题应与计算机专业密切相关，并且符合当前行业的发展趋势。选择与专业紧密结合的选题，可以使你们更好地运用所学知识，并为未来的职业发展奠定基础。要考虑选题的实际可行性和创新性。选题应具备一定的实践意义和应用前景，能够解决实际问题或改善现有技术。

dcn网络与公网_电信运营商DCN网络的演变与规划方法(The evolution and plan method of DCN)...-程序员宅基地

文章浏览阅读3.4k次。摘要：随着电信业务的发展和电信企业经营方式的转变，DCN网络的定位发生了重大的演变。本文基于这种变化，重点讨论DCN网络的规划方法和运维管理方法。Digest: With the development oftelecommunication bussiness and the change of management of telecomcarrier , DCN’s role will cha..._电信dcn

动手深度学习矩阵求导_向量变元是什么-程序员宅基地

文章浏览阅读442次。深度学习一部分矩阵求导知识的搬运总结_向量变元是什么

月薪已炒到15w？真心建议大家冲一冲数据新兴领域，人才缺口极大！-程序员宅基地

文章浏览阅读8次。近期，裁员的公司越来越多今天想和大家聊聊职场人的新出路。作为席卷全球的新概念ESG已然成为当前各个行业关注的最热风口目前，国内官方发布了一项ESG新证书含金量五颗星、中文ESG证书、完整ESG考试体系、名师主讲...而ESG又是与人力资源直接相关甚至在行业圈内成为大佬们的热门话题...当前行业下行，裁员的公司也越来越多大家还是冲一冲这个新兴领域01 ESG为什么重要？在双碳的大背景下，ESG已然成...

对比传统运营模式，为什么越拉越多的企业选择上云？_系统上云的前后对比-程序员宅基地

文章浏览阅读356次。云计算快速渗透到众多的行业，使中小企业受益于技术变革。最近微软SMB的一项研究发现，到今年年底，78％的中小企业将以某种方式使用云。企业希望投入少、收益高，来取得更大的发展机会。云计算将中小企业信息化的成本大幅降低，它们不必再建本地互联网基础设施，节省时间和资金，降低了企业经营风险。科技创新已成时代的潮流，中小企业上云是创新前提。云平台稳定、安全、便捷的IT环境，提升企业经营效率的同时，也为企业..._系统上云的前后对比

esxi网卡直通后虚拟机无网_esxi虚拟机无法联网-程序员宅基地

文章浏览阅读899次。出现选网卡的时候无法选中，这里应该是一个bug。3.保存退出，重启虚拟机即可。1.先随便选择一个网卡。2.勾先取消再重新勾选。_esxi虚拟机无法联网