<style> @-webkit-keyframes shake{ 0%{ opacity: 1; } 50%{ opacity: 0.5; } 100%{ opacity: 1; } } @keyframes shake{ 0%{ opacity: 1; } 50%{ opacity: 0.5; } 100%{ opacity: 1; } } .shake{ -webkit-animation: shake .2s infinite; animation: shake .2s infinit…
text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影. 这个属性可以有两个作用,产生阴影和模糊主体.这样在不使用图片时能给文字增加质感. text-shadow曾经在css2中就出现过,但在css2.1版本中又被抛弃了,现在css3.0版本又重新捡回来了.这说明text-shadow这个属性非常值得我们做前端的人员重视.现在很多项目中,css3有很多属性被前端工程师们使用了,我在前面也分别介…
1.苦逼的需求又来了,需要实现一些动画效果,第一个想到的是播放gif图片,但是这样会占包的资源,并且清晰度不高,于是想着程序实现,自己用帧动画+缩放+移动+透明度 实现了一些想要的效果,这里跟大家分享一下 2.效果图如下: 3.帧动画实现代码 1).首先获取每帧显示的ImageView控件,然后把所有帧放到AnimationDrawable对象里面去,开启动画,通过handle延时2秒关闭动画 ImageView ivFrame = (ImageView) findViewById(R.id.i…
IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持CSS3 text-shadow属性,且根据最近的IE10 preview版的反馈,IE10浏览器也是不支持text-shadow属性的.至于为何不支持,就像女孩的心思一样,我也是百思不得其解. 不过考虑到text-shadow的更多的是效果性质的属性,且潜力有限,所以,就我个人而言,最近版本的IE浏…
原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个神秘的项目,空下来来博客园写点东西.今天给大家分享2个CSS3火焰文字特效,并且将实现的思路和核心代码写成教程分享给大家. 第一个是静态的火焰文字效果,先看看效果图: 看着图的效果很酷吧. 同时你也可以在这里查看火焰文字的DEMO演示. 下面是实现的源码,由于是静态的文字效果,所以代码相当比较简单.…
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字. Textillate 下载        案例演示 使用方法 引入核心文件 <link href="assets/animate.css" rel="stylesheet"> <script src="http:/…
1.苦逼的需求又来了,须要实现一些动画效果,第一个想到的是播放gif图片,可是这样会占包的资源,而且清晰度不高,于是想着程序实现,自己用帧动画+缩放+移动+透明度 实现了一些想要的效果,这里跟大家分享一下 2.效果图例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""&…
前面有分享过改变层级的轮播图算法,今天继续利用透明度来实现无位移的轮播图算法. 实现逻辑:将所有要轮播的图片全部定位到一起,即一层一层摞起来,并且利用层级的属性调整正确的图片顺序,将图片的透明度全部设置为0,然后在让初始的第一张图片的透明度为1即可,具体算法如下: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>改变透明度算法(经典)</title&g…
安卓MD设计提供了一个非常酷炫的效果,TabLayout拿来做选项卡时非常合适的,但是在实际使用中发现22.2.1版本号的TabLayout在ViewPager滑动的时候会出现闪烁现象. 解决方法:在gradle文件里 1:要么升级到23.x(compile 'com.android.support:design:23.1.1') 2:要么使用22.0里最后一个没有bug的版本(compile 'com.android.support:design:22.2.0') 以上只是针对tabLayou…
一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="component"> <ul class="grid"> <li> <div class="codrops-header"> <h1> Animated Opening Type</h1> </d…