网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

CSS3 transition 属性 高度往下展开功能

时间:2024-10-12 01:15:05

1、首先我们定义一个div的类.div-test-down;代码如下.div-test-down { height: 100px; }

CSS3 transition 属性 高度往下展开功能

2、然后我们定义一个span的类.span-test。代码如下.span-test垓矗梅硗 { font-size: 12px; display: block; height: 27px; width: 27px; transition: height 1s; background-color: rebeccapurple; }

CSS3 transition 属性 高度往下展开功能

3、我们胆咣骜岱编写html代码,span在div里面<div class="div-test-down"> <span class="span-test">向下</span> </div>

CSS3 transition 属性 高度往下展开功能

4、编写代码后,在浏览器中查看,界面如下

CSS3 transition 属性 高度往下展开功能

5、当鼠标移上去是,span 的高度向下变长

CSS3 transition 属性 高度往下展开功能

6、这样,用css3的transition 属性便可实现

© 2025 小知经验
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com