CSS3学习笔记①
CSS3自学笔记
CSS3过渡
实现的效果：
没有那么多服务器空间放网页，所以用文字来描述；
有一个盒子(div)初始宽度100px，设置CSS hover属性后使它鼠标悬浮上面时实现盒子宽度属性变为300px；
但是我们鼠标一放上去后，盒子的宽度属性会立马变成300px，没有任何过渡效果；
我们可以利用CSS3中的过渡来实现过渡效果，让它平滑的展开或者收缩；
先看代码：
<head>
<meta charset="UTF-8">
<title>CSS3学习</title>
<style>
div{
height: 100px;
width: 100px;
background-color: black;
transition:2s;
}
div:hover{
width: 300px;
}
</style>
</head>
<body>
<div>css3过渡</div>
</body>利用CSS3属性：transition
过渡属性：
属性 | 描述 |
|---|---|
transition | 简写属性，用于在一个属性中设置四个过渡属性 |
transition-property | 规定应用过渡的 CSS 属性的名称 |
transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease" |
transition-delay | 规定过渡效果何时开始。默认是 0 |
transition属性：
JavaScript 语法：Object.style.transition="width 2s"CSS语法：
transition: property duration timing-function delay;
//详细属性描述看下表描述值 | 描述 |
|---|---|
transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
transition-timing-function | 规定速度效果的速度曲线。 |
transition-delay | 定义过渡效果何时开始。 |
注意一定要设置transition-duration属性，否则时间为0，就不会有过渡效果。
JavaScript 语法：object.style.transitionProperty="width,height"CSS语法：
transition-property: none|all|property;值 | 描述 |
|---|---|
none | 没有属性会获得过渡效果。 |
all | 所有属性都将获得过渡效果。 |
property | 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 |
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-02-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读