鼠标悬停图片动态旋转扩大或缩小

 时间:2024-10-24 23:44:57

1、既然是在网页上实现的效果,那么网页的架爿瑰鲚母构必然是要先完成的,小编的架构就是两个div,里面包含着五个图片(引用图片时记得路径正确),页面效果如图二;

鼠标悬停图片动态旋转扩大或缩小
鼠标悬停图片动态旋转扩大或缩小

2、添加一下基本的 css 样式,width 和 height 控制宽度和高度,margin 这个属性控制 div 移动到页面中间;

鼠标悬停图片动态旋转扩大或缩小
鼠标悬停图片动态旋转扩大或缩小

3、然后我们看一下 transform:scale()的效果,如图二,可以看到施加烂瘀佐栾这个属性的图片变大,变大的比例是 scale() 括号中的数值控制的;

鼠标悬停图片动态旋转扩大或缩小
鼠标悬停图片动态旋转扩大或缩小

4、然后我们看一下 transform:rotate()这个效果,施加这个属性的可以旋转,正值是顺时针旋转,负值是逆时针旋转;

鼠标悬停图片动态旋转扩大或缩小
鼠标悬停图片动态旋转扩大或缩小

5、我们看一下两个属性一起用控制缩小的效果( scale(0.1)有点小看不清,图二不是0.1倍的效果)

鼠标悬停图片动态旋转扩大或缩小
鼠标悬停图片动态旋转扩大或缩小

6、之后就是动态的关键属性 transition 这个属性,酋篚靶高需要提前设置在选择其中;然后效果就实现了(图二无法做出动图,所以大家将就看看,样式源码是图三)

鼠标悬停图片动态旋转扩大或缩小
鼠标悬停图片动态旋转扩大或缩小
鼠标悬停图片动态旋转扩大或缩小
  • flash制作文字效果教程(1):[1]
  • flash制作带阴影文本
  • 用flash如何制作遮罩动画
  • FlashCS6 ActionScript3.0编写按钮使动画播放①
  • flash制作图片轮播时图片之间怎样自然切换?
  • 热门搜索
    我爱诗歌手抄报 手抄报的装饰花边简单 禁燃烟花爆竹手抄报 向国旗敬礼手抄报图片 关于书的手抄报内容 安全的手抄报图片 国学经典手抄报资料 以新年为主题的手抄报 有关交通安全的手抄报 青春期教育手抄报