本文发布于 2017-02-01， 最后更新于 2350 天前，其中的信息可能已经有所发展或是发生改变。
文章摘要
CSS3有很多动态效果显示，这样子就可以省去js代码了 比如说我要使一个div元素在被选中时自动将宽度扩大100px 那么就要使用transition 代码可以这么写: !Doctype html head style .div1{ width:300px; text-align:center; transition:width 1s;//设置变化的元素，以及变化总过程的时间为1s（秒） back…
CSS3有很多动态效果显示，这样子就可以省去js代码了 比如说我要使一个div元素在被选中时自动将宽度扩大100px 那么就要使用transition 代码可以这么写: !Doctype html head style .div1{ width:300px; text-align:center; transition:width 1s;//设置变化的元素，以及变化总过程的时间为1s（秒） background-color:yellow;//设置背景颜色方便观察 height:100px; } p{ padding-top:40px;//设置p元素到div顶部的内边距为40px } .div1:hover{ width:400px; } /style /head body div class="div1" p 这是个测试用的div元素 /p /div /body /html ↓↓↓下面是测试↓↓↓ 这是个测试用的div元素 .div1{ width:300px; text-align:center; transition:width 1s; background-color:yellow; height:100px; } .div1:hover{ width:400px; } .div1-p{ padding-top:35px; color:#000; } 这是个测试用的div元素CSS3有很多动态效果显示，这样子就可以省去js代码了
比如说我要使一个div元素在被选中时自动将宽度扩大100px
那么就要使用transition
代码可以这么写:
<!Doctype html>
<head>
<style>
.div1{
width:300px;
text-align:center;
transition:width 1s;//设置变化的元素，以及变化总过程的时间为1s（秒）
background-color:yellow;//设置背景颜色方便观察
height:100px;
}
p{
padding-top:40px;//设置p元素到div顶部的内边距为40px
}
.div1:hover{
width:400px;
}
</style>
</head>
<body>
<div class="div1">
<p>这是个测试用的div元素</p>
</div>
</body>
</html>
↓↓↓下面是测试↓↓↓
这是个测试用的div元素
这是个测试用的div元素
本文采用 CC BY-NC-SA 4.0 协议进行授权，如无注明均为原创，转载请注明出处。
标题：简单的CSS3动画作者：九仞之行链接：http://dev.styunlen.cn/archives/post-264.html
还没有评论呢 ~ 快来抢沙发吧 🛋️