现在的位置: 首页 > 综合 > 正文

CSS3淡入淡出

2013年08月31日 ⁄ 综合 ⁄ 共 1654字 ⁄ 字号 评论关闭

以下均在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>

 

抱歉!评论已关闭.