CSS-动画效果

来源：互联网发布：格力空调2016数据编辑：程序博客网时间：2024/04/30 22:04

采用CSS3实现的简易的动画效果-图片旋转

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8">

<style>

.amime1{

text-align: center;

font-size:64px;

-webkit-animation-name:"anime1";指定动画的名称

-webkit-animation-duration:10s;动画持续的时间以s作为单位

-webkit-animation-timing-function表示的是动画的时机，参数有如下

ease 让开始与结束更加平滑

linear 持续

ease-in 慢慢开始

ease-out慢慢结束

ease-in-out 慢慢开始慢慢结束

cubic-bezier(x1,y1,x2,y2)通过(x1,y1,x2,y2)指定三次贝塞尔曲线的P1与P2

-webkit-animation-timing-function:ease;

-webkit-animation-iteration-count:infinite;指定动画的动作次数,指定"3",或者"infinite无数次"

}

首先定义动画时使用@keyframes规则。后边跟的是动画的名称，keyframe关键帧的单位为%

@-webkit-keyframes "anime1"{

0%{-webkit-transform:rotate(0deg);}

50%{-webkit-transform:rotate(90deg);}

100%{-webkit-transform:rotate(0deg);}

}

</style>

</head>

<body>

<br>

<divclass="amime1"><imgsrc="images/shadow1.jpg"width="300px"></div>

<divclass="amime1"><imgsrc="images/shadow2.jpg"width="300px;"></div>

</body>

</html>

0 0