<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*创建动画名称*/
@keyframes rotate{
0% {
transform:scale(1);
opacity:1;
}
15% {
transform:scale(1.2);
opacity:0.8;
}
30% {
transform:scale(1.0);
opacity:1;
}
45% {
transform:scale(1.3);
opacity:0.8;
}
60% {
transform:scale(1.1);
opacity:0.6;
}
75% {
transform:scale(1.4);
opacity:0.8;
}
90% {
transform:scale(1.2);
opacity:0.9;
}
100%{
transform:scale(1.5);
opacity:1.2;
}
}
img:hover{
/*
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度,默认是 "ease" 匀速是linear。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数，默认是 1,不限infinite。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"，逆向alternate。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"，停止paused。
animation-fill-mode 规定对象动画时间之外的状态。
* */
/*animation-name: rotate;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;*/
/*animation 属性值 统一语法*/
animation:rotate 1.6s linear 0s infinite normal running;
/*对象选择器 box-shadow:[投影方式] X轴偏移量 Y轴偏移量模糊半径 阴影半径 颜色*/
/*对元素进行阴影其他设置*/
text-shadow:-10px 10px 20px red;
}
img{
margin:50px 0px 0px 100px;
animation-play-state:paused;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<img src="img/love2.png">
</body>
</html>
效果
