如何用CSS制作隐约头像?

html-css018

如何用CSS制作隐约头像?,第1张

<style>a img {filter:alpha(opacity=100,style=2)}a:hover img {filter:none/*隐约头像*/}</style>

<style type=text/css>#userPicture a:hover img {filter:FlipH()}</style><!--让你的照片翻转-->

<style type=text/css>#talk .thumbpic a:hover img {filter:FlipH()}</style><!--让你的照片翻转-->

<style type=text/css>#userVisitor .personIcon a:hover img {filter:FlipH()}</style><!--让"最近谁浏览我的页面"里的头像翻转-->

<style type=text/css>#userFriend .personIcon a:hover img {filter:FlipH()}</style><!--让"我最近登录的好友"里的头像翻转-->

<style type=text/css>#userAlbum a:hover img {filter:FlipH()}</style><!--让"我的相册"里的头像翻转-->

@-webkit-keyframes twinkling{

  0% {

      opacity: 0 

  }

  100% {

      opacity: 1 

  }

}

#110 {

    -webkit-animation: twinkling 1s infinite ease-in-out 

}

参考如上。

稍微解释一下,定义两个状态,一种状态下透明度为 0%,另一种状态下透明度为 100%,无限次地在 1 秒内切换这两种状态,看起来就是闪烁了。