Maison > interface Web > tutoriel HTML > CSS3实现图片放大旋转_html/css_WEB-ITnose

CSS3实现图片放大旋转_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 09:06:22
original
1575 Les gens l'ont consulté

知识点:

    css3动画

    transition


    /*旋转动画*/

@-webkit-keyframes rotation{

from {-webkit-transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);}

}

效果:

源码:

-----------------------

图片过渡缩放

/*通用样式*/

*{margin: 0;padding: 0;}

/*自定义样式*/

.img{margin-left: 25px;margin-top: 50px;margin-right: 25px;

    transition: all 2s ease;

}

.img:hover{

z-index: 10;

border: 1px dashed #ff0000;

-webkit-transform: rotateY(360deg);

transform: scale(1.51,1.51) rotate(360deg);

}

.ta_c{text-align: center;

width: 99%;

}

/*旋转动画*/

@-webkit-keyframes rotation{

from {-webkit-transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);}

}

CSS3实现图片放大旋转_html/css_WEB-ITnose

CSS3实现图片放大旋转_html/css_WEB-ITnose

CSS3实现图片放大旋转_html/css_WEB-ITnose

CSS3实现图片放大旋转_html/css_WEB-ITnose

CSS3实现图片放大旋转_html/css_WEB-ITnose

CSS3实现图片放大旋转_html/css_WEB-ITnose

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal