码迷,mamicode.com
首页 > Web开发 > 详细

402 CSS菜鸟:transform and transition

时间:2019-04-02 10:35:11      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:宽度   .com   round   hide   多少   one   tle   explore   internet   

技术图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style> 
    #d{
        width:200px;
        height:200px;
        background:blue;
        overflow:hidden;
    }
#dd
{
    width:100px;
    height:100px;
    background:red;
    /*css过渡,给哪个属性加过度*/
    transition:transform 2s;
    margin:50px;
}

#dd:hover
{
    /*css2D转换,让元素放大或减少多少倍,第一个值是宽度,第二个值是高度*/
    transform: scale(3,3);
}

</style>
</head>
<body>

<p><b>注意:</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div id="d">
    <div id="dd">
    
    </div>
    </div>

<p>鼠标移动到 div 元素上,查看过渡效果。</p>

</body>
</html>
View Code

 

402 CSS菜鸟:transform and transition

标签:宽度   .com   round   hide   多少   one   tle   explore   internet   

原文地址:https://www.cnblogs.com/zs0322/p/10640930.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!