百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

CSS3 动画——Animations

xsobi 2024-12-31 15:27 1 浏览

CSS3 Animations

1 @keyframes属性

@keyframes 动画名称{关键帧持续时间% {css样式;}}

@keyframes myanimation
{
    0% {top:0px;background-color:#0000cc;}
    50% {top:100px;background-color;#339900;}
    100% {top:0px;background-color:#330000;}
}

2 animation属性

animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称。。

animation-duration 规定完成动画所花费的时间, 以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

linear 动画从头到尾的速度是相同的。

ease 默认。动画以低速开始, 然后加快, 在结束前变慢。

ease-in 动画以低速开始。

ease-out 动画以低速结束。

ease-in-out 动画以低速开始和结束。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 参考地址: http://cubic-bezier.com/#.17,.67,.83,.67

animation-delay 规定在动画开始之前的延迟。以秒或毫秒计, 默认值是 0。

animation-iteration-count 规定动画应该播放的次数。

n 定义动画播放次数的数值。

infinite 规定动画应该无限次播放。

animation-direction 规定是否应该轮流反向播放动画。

normal 默认值。动画应该正常播放。

alternate 动画应该轮流反向播放。

使用方法一: from...to...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 100px;
    height: 100px;
    background-color: orange;

}

/*div:hover{
width: 800px;
}*/
/*@keyframes 动画名{
from{
动画第一步(这里你可以不写他会继承上面的)
}
to{
动画最后一步
}
}*/
/*动画声明*/
@keyframes widthChange{
/*from{
width: 100px;
}*/
to{
width: 800px;
}
}
div{
    /*animation: 动画名称 过渡总时长;*/
    animation: widthChange 1s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

使用方法二: 百分比

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 0;
top: 0;
}

/*动画声明*/
@keyframes positionChange{
    /*from{
    left: 0;
    }
    to{
    left: 800px;
    }*/
    /*百分数评分的的过渡总时长*/
    0%{
    left: 0;
    top: 0;
    }
    50%{
    left: 800px;
    top: 0;
    }
    100%{
    left: 800px;
    top: 500px;
    }
}
div{
    /*animation: 动画名称 过渡总时长;*/
    animation: positionChange 10s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

使用方法三: animation参数格式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 100px;
    height: 100px;
    background-color: orange;

}
@keyframes widthChange{
    to{
    width: 800px;
    }
}
div{
    /*
    * 动画名称
    * 动画总时长s ms
    * 动画形式ease ease-in ease-out ease-in-out linear 贝塞尔曲线、
    * 延迟时间s ms
    * 循环次数①阿拉伯数字②infinite(无限次)
    * 停留到最后一帧forwards
    * 反向播放动画alternate(来回当做2次处理) normal 正常
    *
    * */
    animation: widthChange 5s;
}
div:hover{
/*动画停止*/
animation-play-state: paused
}
</style>
</head>
<body>
<div></div>
</body>
</html>

建立3D场景

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

注释：该属性必须与 transform 属性一同使用。

flat 子元素将不保留其 3D 位置。

preserve-3d 子元素将保留其 3D 位置。

transform-style: flat|preserve-3d;

perspective 属性定义 3D 元素距视图的距离, 以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时, 其子元素会获得透视效果, 而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

perspective: number|none;

景深:

perspective是设置3d效果的景深, 通俗来说就是设置你的眼睛与这个3d元素的距离。

而生活经验告诉我们, 你从远处和近处分别观察同一个物体(比如正方形)时, 其3d效果肯定是不同的。

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

当为元素定义 perspective-origin 属性时, 其子元素会获得透视效果, 而不是元素本身。

注释：该属性必须与 perspective 属性一同使用, 而且只影响 3D 转换元素。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
div{
    width: 300px;
    height: 220px;
    margin: 100px auto;
    border: 1px solid #000;

    transform-style: preserve-3d;
    perspective: 800px;

    /*景深基点基本上没人改*/
    perspective-origin: left top;
}
img{
    width: 100%;
    display: block;
    transition: 1s;
    }
    div:hover>img{
    transform: rotateX(-45deg);
}
</style>
</head>
<body>
<div>
<img src="img/薛凯琪.jpg"/>
</div>
</body>
</html>

backface-visibility 属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时, 该属性很有用。

背面隐藏

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
div{
    width: 300px;
    height: 220px;
    margin: 100px auto;
    border: 1px solid #000;

transform-style: preserve-3d;
    perspective: 1000px;
}
img{
    width: 100%;
    display: block;
    transition: 1s;
    transform-origin: left center;

    /*背面隐藏*/
    backface-visibility: hidden;
}
div:hover>img{
    transform: rotateY(-100deg);
}
</style>
</head>
<body>
<div>
<img src="img/薛凯琪.jpg"/>
</div>
</body>
</html>

相关推荐

C++中的多态(动态多态)究竟是如何实现

为了叙述简便，在本文中，将动态多态性一律简化为多态性。在前面的文章中，我们已经简要介绍了C++的多态性，也介绍了C++的虚函数表，下面，我们来看看C++是如何利用虚函数机制来实现多态性的。（题外话：实...

C++面向对象开发的四大特性:封装、抽象、继承、多态

1、封装封装，即隐藏对象的属性和实现细节，仅对外公开接口，控制程序对类属性的读取和修改。对于类的内部，成员函数可以自由修改成员变量，进行更精确的控制；对于类的外部，良好的封装能够减少耦合，同时隐藏实现...

C#知识|继承与多态

哈喽，你好啊，我是雷工01ProtectedProtected关键字表示这个属性只能给“子类”使用，即只能在子类内部使用，不能通过子类对象去使用；02父类定义父类...

朝文分享(54):深入C++(二十一)——多态

分享兴趣，传播快乐，增长见闻，留下美好！亲爱的您，这里是LearningYard新学苑。...

C++基础语法梳理:引用、封装、继承和多态

本期是C++基础语法分享的第六节，今天给大家来分享一下：（1）引用；...

继承和多态概念及语法

继承是面向对象编程的重要概念之一，它指的是一个类可以从另一个类中继承属性和方法。...

Java的多态如何实现的?

面向对象编程语言三大特征：继承、封装、多态。虽说是三大特征，但其实从多态的角度看，继承和封装都是为了实现多态而准备的，尤其是在一些大型优秀的框架上，多态的使用随处可见，所以说多态是一个十分重要的知识点...

C++中的多态性

封装、继承、多态是C++的三大基本特性。封装可以隐藏实现细节，使得代码模块化；继承可以扩展已存在的代码模块(类);封装和继承的目的都是为了"代码重用"，多态则是为了实现另一个目的：接口...

讲解一下Java 中的多态

多态（Polymorphism）属于面向对象三大特征之一，它的前提是封装形成独立体，独立体之间存在继承关系，从而产生多态机制。多态是同一个行为具有多个不同表现形式或形态的能力。重载式多态，也叫编译时多...

java编程笔记，多态的好处和弊端

测试代码：1.创建Animal.java类作为父类2.创建Cat.java类作为Animal的子类3.创建一个Dog.java类作为Animal的子类4.创建Test.java测试类代码说明：多态的好...

C/C++编程笔记:C++多态性知识详解

多态性一词意味着具有多种形式。简而言之，我们可以将多态定义为消息以多种形式显示的能力。一个真实的多态示例：一个人同时可以具有不同的特征。像男人一样，是父亲，丈夫，雇员。因此，同一个人在不同情况下会表现...

用通俗易懂的多态世界观实例:理解python类的多态

什么是python类的多态python的多态，可以为不同的类实例，或者说不同的数据处理方式，提供统一的接口。用比喻的方式理解python类的多态...

多态——制作饮品

classAbstractDrinking{public://煮水virtualvoidBoil(){cout<<"煮农夫山泉"<&...

python之多态、继承、重写篇

#-*-coding:UTF-8-*-classAnimal:defrun(self):print("动物会跑。。")defsl...

Java面向对象——多态

前两天已经相继介绍了Java面向对象的三大特性之中的封装、继承，所以今天就介绍Java面向对象的三大特性的最后一项，多态~首先讲一下什么是多态，以及多态需要注意的细节什么是多态：一个对象具备多种...

一周热门
最近发表
标签列表