Dreamweaver基础操作-鼠标经过图片时图片缩放

 时间:2024-10-13 23:58:36

1、在body中输入几个div标签,在div中插入图片,效果如图所示

Dreamweaver基础操作-鼠标经过图片时图片缩放Dreamweaver基础操作-鼠标经过图片时图片缩放

2、在style标签中,设置div的属性,建立宽高属性,增加红色边框增强效果

Dreamweaver基础操作-鼠标经过图片时图片缩放Dreamweaver基础操作-鼠标经过图片时图片缩放

3、对div中的图片进行过渡时间设置:div img{transition: all 0.5s;}

Dreamweaver基础操作-鼠标经过图片时图片缩放

4、然后设置鼠标经过图片时发生的变化:div img:hover{transform:scale(1.2);}scale是缩放比例的意思 大于1 就是放大,小于1就是缩小

Dreamweaver基础操作-鼠标经过图片时图片缩放Dreamweaver基础操作-鼠标经过图片时图片缩放

5、当鼠标经过图片时,图片就会在原有的位置上放大1.2倍

Dreamweaver基础操作-鼠标经过图片时图片缩放

6、当对div设置overflow:hidden;防止溢出时,图片在放大时就不会超市div的边框范围

Dreamweaver基础操作-鼠标经过图片时图片缩放Dreamweaver基础操作-鼠标经过图片时图片缩放
  • dw怎么做图片自动轮播
  • dw图片滚动效果怎么做
  • Dreamweaver如何插入普通视频
  • Dreamweaver图文排版-文字在左图片居右设置
  • dw怎么添加搜索框
  • 热门搜索
    重阳节手抄报图片大全 做一个有道德的人手抄报 安全小知识手抄报 中秋节手抄报内容文字 我爱文学手抄报 少年强则国强手抄报 元旦手抄报文字 一年级清明节手抄报 植树节手抄报图片大全 交通安全手抄报资料