css3特效示例-某翻译

示例1 当鼠标移到图片上面,图片会变小

原来:

运行后:

代码:

.box div:hover img {
    -webkit-transform: scale(.94, .9);
    -moz-transform: scale(.94, .9);
    -o-transform: scale(.94, .9);
    -ms-transform: scale(.94, .9);
    transform: scale(.94, .9);
    -webkit-transition: -webkit-transform .2s cubic-bezier(.5,.1,.1,1);
    -moz-transition: -moz-transform .2s cubic-bezier(.5,.1,.1,1);
    -o-transition: -o-transform .2s cubic-bezier(.5,.1,.1,1);
    -ms-transition: -ms-transform .2s cubic-bezier(.5,.1,.1,1);
    transition: transform .2s cubic-bezier(.5,.1,.1,1);
}
.box img {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-transform: scale(1) translateZ(0);
    -moz-transform: scale(1) translateZ(0);
    -o-transform: scale(1) translateZ(0);
    -ms-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
    -webkit-transition: -webkit-transform .6s cubic-bezier(.5,.1,.1,1);
    -moz-transition: -moz-transform .6s cubic-bezier(.5,.1,.1,1);
    -o-transition: -o-transform .6s cubic-bezier(.5,.1,.1,1);
    -ms-transition: -ms-transform .6s cubic-bezier(.5,.1,.1,1);
    transition: transform .6s cubic-bezier(.5,.1,.1,1);
}

示例2: 文字阴影

修改前:

运行后:

代码:

.box p{
    text-shadow: 0px 1px 1px #555;
}