css3 图片放大缩小闪烁效果

直接把图片替换就可以了，我的图片是透明的，所以body设置为黑色的，不不要可以去掉

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 图片放大缩小闪烁效果</title>

.flicker_down{
width:105px;
height:105px;
display:inline-block;
position:fixed;
bottom:80px;
left:50%;
background:url("images/last.png") no-repeat;

}
@keyframes flicker{
0%,100%{
transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
opacity:0
}
50%{
transform:scale(1.0);
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
-webkit-transform:scale(1.0);
-ms-transform:scale(1.0);
opacity:1
}

}
@-webkit-keyframes flicker{
0%,100%{
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-ms-transform:scale(0.6);
transform:scale(0.6);
opacity:0
}
50%{
-webkit-transform:scale(1.0);
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
-ms-transform:scale(1.0);
transform:scale(1.0);
opacity:1
}

}
@-moz-keyframes flicker{
0%,100%{
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
transform:scale(0.6);
opacity:0
}
50%{
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
-webkit-transform:scale(1.0);
-ms-transform:scale(1.0);
transform:scale(1.0);
opacity:1
}

}
@-o-keyframes flicker{
0%,100%{
-o-transform:scale(0.6);
-moz-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
transform:scale(0.6);
opacity:0
}
50%{
-o-transform:scale(1.0);
-moz-transform:scale(1.0);
-webkit-transform:scale(1.0);
-ms-transform:scale(1.0);
transform:scale(1.0);
opacity:1
}

}
.flicker_down .trans{
-webkit-animation:flicker 2.0s infinite ease-in-out;
-moz-animation:flicker 2.0s infinite ease-in-out;
-o-animation:flicker 2.0s infinite ease-in-out;
animation:flicker 2.0s infinite ease-in-out
}
.flicker_down .arrow{
animation-delay:-2.0s;
-webkit-animation-delay:-2.0s;
-moz-animation-delay:-2.0s;
-o-animation-delay:-2.0s
}

</style>
</head>
<body>
<div>

</div>
</body>
</html>

转载于:https://www.cnblogs.com/pikachuworld/p/5578489.html

css3 图片放大缩小闪烁效果相关推荐

vue项目一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
图片放大缩小旋转左移右移镜像倒影android
图片放大缩小旋转左移右移镜像倒影 demo: TestImage 1. 将 meinv.jpg 图片拷贝到以下目录TestImage\app\src\main\res\mipmap-hdpi 1.An ...
iphone iPhone开发中如何将制作图片放大缩小代码实现案例
1:原文摘自:http://mobile.51cto.com/iphone-285108.htm iPhone开发中如何将制作图片放大缩小案例是本文要介绍的内容,主要是来学习iphone开发中动画的制 ...
点击图片放大缩小功能
1.点击图片放大缩小的思路图片部分: <table><div><img style="width:62px;height:83px;display:block ...
imageView图片放大缩小及旋转
imageView图片放大缩小及旋转一.简介二.方法 1)设置图片放大缩小效果第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...
html如何控制图片自动放缩,如何用js控制图片放大缩小
js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现.其属性可以实现按比例放大和缩小图像尺寸的功能. 在前面的文章中,也为大家介绍了JS获取图片当前宽高和JS获 ...
移动端查看预览图片放大缩小
方法一之前介绍过一款移动端vue适用的插件大全 https://blog.csdn.net/MtangEr/article/details/85339092 里边有一篇是查看图片放大缩小的 htt ...
【Axure交互教程】滑块控制图片放大缩小效果
作品名称:滑块控制图片放大缩小效果作品编号:Case007 软件版本:Axure9 作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Cas ...
Android实现图片放大缩小
蓝蓝的天蓝蓝的天,白云朵朵. White clouds in the blue sky. 目录视图摘要视图订阅新版极客头条上线,每天一大波干货任玉刚:Android开发者的职场规划 ...

css3 图片放大缩小闪烁效果

css3 图片放大缩小闪烁效果相关推荐

最新文章

热门文章