网站首页 > 技术文章正文

css3制作动画-第九章（css3动画(简单动画的实现,如旋转等)）

nanyue 2024-10-30 02:57:47 技术文章 3 ℃

一、变形

CSS3变形是一些效果的集合

如平移、旋转、缩放、倾斜效果

每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

语法：transform:[transform-function] *;

变形函数

translate()：平移函数，基于X、Y坐标重新定位元素的位置

transform:translate(100px,0) x轴移动

transform:translate(0,100px) y轴移动

scale()：缩放函数，可以使任意元素对象尺寸发生变化

transform:scale(2,0) 设置X轴的缩放

transform:scale(0,2) 设置Y轴的缩放

rotate()：旋转函数，取值是一个度数值

transform:rotate(30deg);

skew()：倾斜函数，取值是一个度数值

transform:skewX（ax）：表示只设置X轴的倾斜

transform:skewY（ay）：表示只设置Y轴的倾斜

注：rotate( )函数只是旋转，而不会改变元素的形状

skew( )函数是倾斜，元素不会旋转，会改变元素的形状

二、过度

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡

语法：transition:[transition-property transition-duration transition-timing-function transition-delay ]

过渡属性（ transition-property ）

定义转换动画的CSS属性名称

IDENT：指定的CSS属性（width、height、background-color属性等）

all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

过渡所需的时间（ transition-duration ）

定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）

过渡动画函数（ transition-timing-function ）

指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式

ease：速度由快到慢（默认值）

linear：速度恒速（匀速运动）

ease-in：速度越来越快（渐显效果）

ease-out：速度越来越慢（渐隐效果）

ease-in-out：速度先加速再减速（渐显渐隐效果）

过渡延迟时间（ transition-delay ）

指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果

正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发

负值：元素过渡效果会从该时间点开始显示，之前的动作被截断

0：默认值，元素过渡效果立即执行

三、animation动画简介

animation实现动画主要由两个部分组成

通过类似Flash动画的关键帧来声明一个动画

在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

设置关键贞：

@keyframes spread {

0% {width:0;}

33% {width:23px;}

66% {width:46px;}

100% {width:69px;}

}

调用关键贞：

animation:animation-name animation–duration animation-timing-function

animation-delay animation-iteration-count animation-direction

animation-play-state animation-fill-mode;

动画的使用过程：

动画的播放次数（animation-iteration-count）

值通常为整数，默认值为1

特殊值infinite，表示动画无限次播放

动画的播放方向（animation-direction）

normal，动画每次都是循环向前播放

alternate，动画播放为偶数次则向前播放

动画的播放状态（animation-play-state）

running将暂停的动画重新播放

paused将正在播放的元素动画停下来

代码展示：

<html>

<head>

</head>

<body>

</div>

</body>

</html>

margin: 0;

padding: 0;

}

/* 父div设置宽高 */

.box{

width: 80%;

height: 600px;

margin: 0px auto;

margin-top: 10px;

position: relative;

}

/* 所有的图片设置 */

.box>img{

width: 300px;

height: 250px;

position: absolute;

border: 1px solid white;

box-shadow:5px 5px 5px rgba(0,0,0,.6);

border-radius: 20px;

}

/* 第一张图片设置 */

.box>img:nth-of-type(1) {

right: 2;

top: 0px;

transform: rotate(48deg);

}

.box>img:nth-of-type(2){

left: 2px;

top: 10px;

transform: rotate(319deg);

}

.box>img:nth-of-type(3){

left: 500px;

top: 40px;

transform: rotate(278deg);

}

.box>img:nth-of-type(4){

left:250px;

top:40px;

transform: rotate(-50deg);

}

.box>img:nth-of-type(5){

top:300px;

transform: rotate(-80deg);

}

.box>img:nth-of-type(6){

left:700px;

top:300px;

transform: rotate(-260deg);

}

.box>img:nth-of-type(7){

left: 310px;

top: 300px;

transform: rotate(94deg);

}

.box>img:nth-of-type(8){

left: 460px;

top: 300px;

transform: rotate(205deg);

}

.box>img:nth-of-type(9){

left: 100px;

top: 210px;

transform: rotate(38deg);

}

.box>img:nth-of-type(10){

right:100px;

top:300px;

transform: rotate(-210deg);

}

.box>img:hover{

/* 图片前置 */

z-index: 1;

/* 还原放大1.5倍 */

transform: rotate(360deg) scale(2);

transition:all 1s ease-in-out;

}

<!DOCTYPE html>

<head>

<title>QQ彩贝导航条</title>

</head>

<body>

<nav>

<h1>

</a>

</h1>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</section>

</nav>

</div>

</body>

</html>

margin: 0;

padding:0;

}

li{

list-style: none;

}

text-decoration: none;

color: #787690;

}

/* 整个导航 */

nav{

height: 100px;

width: 100%;

margin: 0 auto;

position: relative;

background: linear-gradient(to bottom, #FFFFFF, rgba(204, 204, 204, 0.4));

}

/* 导航Logo部分 */

.topleft{

padding-top: 30px;

padding-left: 110px;

}

/* 中间整体部分 */

.topMiddle{

position: absolute;

left: 400px;

bottom: 20px;

height: 50px;

}

/* 导航中间文字 */

.topMiddle>ul>li{

float: left;

margin-right: 20px;

padding-top: 20px;

}

.topMiddle>ul>li>a:hover{

color:yellow;

}

/* 导航中间文字部分第一个li */

.iconOne{

display: inline-block;

position: absolute;

width: 46px;

height: 100px;

left: 0;

top:0;

background: url('../htmlNine/img/header_03.png') 2px 1px no-repeat;

}/* 导航中间文字部分第三个li */

.iconTwo{

display: inline-block;

position: absolute;

width: 46px;

height: 100px;

top:0;

background: url('../htmlNine/img/header_07.png') 2px 1px no-repeat;

}

/* 调用关键贞 */

.topMiddle>ul>li:nth-child(1)>a:hover .iconOne{

background: url('../htmlNine/img/header_05.png') 2px 1px no-repeat;

animation: identifier 1s ease-out both;

}

/* 调用关键贞 */

.topMiddle>ul>li:nth-child(3)>a:hover .iconTwo{

background: url('../htmlNine/img/header_09.png') 2px 1px no-repeat;

animation: identifier 1s ease-out both;

}

/* topRight */

/* 登录部分所有li */

.topRight{

position: absolute;

left: 1380px;

bottom: 55px;

height: 40px;

}

.topRight>ul>li{

height: 25px;

width: 30px;

}

/* 登录部分三个图标 */

.topRight>ul>li:nth-child(1){

position: absolute;

right: 100px;

top:45px;

background: url('../htmlNine/img/iconsB_13.png') 2px 1px no-repeat;

}

.topRight>ul>li:nth-child(2){

position: absolute;

right: 150px;

top:45px;

background: url('../htmlNine/img/iconsB_12.gif') 2px 1px no-repeat;

}

.topRight>ul>li:nth-child(3){

position: absolute;

right:200px;

top:45px;

background: url('../htmlNine/img/iconsB_11.gif') 2px 1px no-repeat;

}

.topRight>ul>li:hover{

/* 变形 */

transform: rotate(720deg) scale(2);

/* 过度 */

transition:all 0.6s ease-in-out ;

}

/* 动画设置关键帧名称identifier */

@keyframes identifier {

0%{width: 0;}

33%{width:23px;}

66%{width: 46px;}

100%{width: 69px;}

}

效果链接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlNine/duocaiqiang.html

file:///D:/ruanjian/VS/wenjianxiangmu/htmlNine/QQcaibeidaohang.html

网站首页 > 技术文章 正文

css3制作动画-第九章（css3动画(简单动画的实现,如旋转等)）

猜你喜欢

网站首页 > 技术文章正文