hTML5 360图片旋转特效

最新推荐文章于 2022-04-21 10:19:58 发布

转载最新推荐文章于 2022-04-21 10:19:58 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/youtianxia/p/3907778.html

本文介绍了一个使用HTML5和CSS3实现的图片旋转特效案例。当鼠标悬停在图片上时，图片会进行360度旋转。此案例展示了如何利用CSS3的动画属性制作动态效果，对于学习CSS3动画具有很好的参考价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个用HTML5/css3写成的图片旋转特效，鼠标放上后图片就开始不停的旋转，对CSS3动画效果感兴趣的，更不可错过哦，用CSS3实现动画效果很不错的范例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>石家庄网络公司电话</title>
<style>
* {
    margin:0;
    padding:0;
    list-style:none;
}
body {
    background:#1F1F1F;
}
.zzsc {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    background: no-repeat url("/jscss/demoimg/201405/author.jpg") left top;
    -webkit-background-size: 220px 220px;
    -moz-background-size: 220px 220px;
    background-size: 220px 220px;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 2s ease-out;
    -moz-transition: -moz-transform 2s ease-out;
    -o-transition: -o-transform 2s ease-out;
    -ms-transition: -ms-transform 2s ease-out;
}
.zzsc:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
</style>
</head>
<body>
<div class="zzsc"></div>
<div style="text-align:center;clear:both;">
</div>
</body>
</html>

转载于:https://www.cnblogs.com/youtianxia/p/3907778.html