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

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

智能推荐

瑞芯微RK3288、RK3399、RK3568、RK3368芯片性能介绍与对比分析_rk3288和rk3568对比-程序员宅基地

文章浏览阅读2.1k次，点赞7次，收藏8次。是瑞芯微推出的一款低功耗、高性能的应用处理器芯片，该芯片基于Big.Little架构,即具有独立的NEON协同处理器的双核Cortex-A72及四核Cortex-A53组合架构，主要应用于计算机、个人互联网移动设备、VR、广告机等智能终端设备。RK3399内置多个高性能硬件处理引擎，能够支持多重格式的视频解码，如：4K*2K@60fps 的H.264/H.265/VP9，也支持1080P@30fps的H.264/MVC/VP8 以及高质量的JPEG编解码和图像的前后处理器。_rk3288和rk3568对比

使用esp 8266物联网开发板 + Mqtt制作远程控制LED小灯_esp8266 mqtt 控制灯亮灭-程序员宅基地

文章浏览阅读1.5k次。如何30快钱以内制作一个手机控制的led小灯_esp8266 mqtt 控制灯亮灭

Ansys Zemax | 如何模拟光学相干层析成像系统_nsdd操作数-程序员宅基地

文章浏览阅读291次，点赞2次，收藏4次。聚焦透镜的坐标(0，20，40)，使聚焦透镜与扫描镜保持水平，并保持20mm的距离(该距离在两者的水平位置距离中是任意的)，聚焦透镜的材料为N-BK7。_nsdd操作数

流式处理中的文本聚类：探索Apache Beam在文本数据处理中的应用-程序员宅基地

文章浏览阅读5.7k次。作者：禅与计算机程序设计艺术流式处理中的文本聚类：探索Apache Beam在文本数据处理中的应用引言1.1. 背景介绍随着互联网与物联网的发展，大量的文本数据在各个领

基于微服务架构的分布式系统：如何设计和实现高效的微服务系统_基于微服务的系统-程序员宅基地

文章浏览阅读4.7k次。随着互联网的发展，分布式系统在大型企业应用中越来越普遍。微服务架构作为一种新兴的分布式系统架构，以其灵活性和可扩展性吸引了越来越多的开发者。在微服务架构中，每个服务都是独立的，具有完整的功能和数据职责。本文旨在探讨如何设计和实现高效的微服务系统，以应对现代应用中日益增长的需求。服务注册和发现：服务注册表和反向代理服务。服务路由：服务发现和路由器。服务安全：访问控制、加密和认证。分布式事务：分布式事务工具，如乐观锁。消息队列：异步处理和消息传递。_基于微服务的系统

全网最有效解决centos7 安装MySQL报错No package mysql-server available_no package mod_auth_mysql available.-程序员宅基地

文章浏览阅读856次。今天想在centos7上面装一个mysql，但是无论我yum就还是wget都装不上，提示No package mysql-server…,然后又度娘又各种查资料，试了好多种方法都没有用，最后了解Centos7系统后发现，Centos7带有MariaDB而不是MySQL，MariaDB和MySQL一样也是开元的数据库，同样可以使用yum命令安装，只不过安装使用的并不是老方式的MySQL，而是默认的MariaDB，并且还需要安装的是mariadb-server，如果想继续使用老方式的MySQL，那么需要清_no package mod_auth_mysql available.