【css3初级】transition过渡效果写法,鼠标放到图片上图片变小

来源:互联网 发布:数据统计如何提高效率 编辑:程序博客网 时间:2024/05/02 00:05

transition过渡效果可以应用到html每个元素。用法是添加到每个元素的事件中,比如说hover,onmouseover,onclick事件等。

下面就给大家介绍下transition的简单用法:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.animation{width: 200px;height: 200px;background-color: #ff0; --webkit-transition: width,height,transform 2s;transition: width,height,transform 2s;}.animation:hover{width: 200px;height: 300px; --webkit-transform: scale(0.5);transform:scale(0.5);}</style></head><body><div class="animation">div从大变小特效</div></body></html>
前后对比照片:

0 0