以下均在Chrome Opera FF最新浏览器测试过,Safari未测试
1.www.sofchina.com个人技术博客
CSS3向右滑动效果
a
{
-webkit-transition-property:color,background-color,padding-left;
-webkit-transition-duration:500ms,500ms,500ms;
-moz-transition-property:color,background-color,padding-left;
-moz-transition-duration:500ms,500ms,500ms;
-o-transition-property:color,background-color,padding-left;
-o-transition-duration:500ms,500ms,500ms;
}
a:hover
{
background-color:#efefef;color:#333;padding-left:50px
}
</style>
</head>
<body >
<a href=”#”>向右滑动</a>
</body>
2.CSS3翻转效果
<style type=”text/css”>
img.opacity1
{
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
}
img.opacity1:hover
{
-webkit-transform:rotate(720deg);//翻转2圈
-moz-transform:rotate(720deg);
-o-transform:rotate(720deg);
}
</style>
</head>
<body >
<div id=”div1″>
<img src=”img/logo2.png” />
</div>
3.CSS3动态阴影边框效果
img.opacity1
{
background-color:#5FA0C5;
-webkit-transition:all .5s linear ;
-o-transition:all .5s linear;
-moz-transition:all .5s linear;
}
img.opacity1:hover
{
border:8px solid #041ABF;
box-shadow:3px 4px 5px #98049D;
-webkit-box-shadow:3px 4px 5px #98049D,4px 5px 6px #EF00B3;
-moz-box-shadow:3px 4px 5px #98049D,4px 5px 6px #EF00B3;
-o-box-shadow:3px 4px 5px #98049D,4px 5px 6px #EF00B3;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
border-left-left-radius:8px;
border-left-right-radius:8px;
}
</style>
</head>
<body>
<div id=”div1″><img src=”img/logo2.png” /></div>
</body>