CSS3中的过渡属性

CSS 专栏收录该内容
68 篇文章 0 订阅

CSS3中的过渡属性

1.属性:transition
(1)transition-property规定应用过渡的CSS属性的名称。
(2)transition-duration定义过渡效果花费的时间。默认是0。
(3)transition-timing-function规定过渡效果的时间曲线。默认是“ease”。
ease规定慢速开始,然后变快,然后慢速结束的过渡效果。
linear规定以相同的速度开始至结束的过渡效果。
ease-in规定以慢速开始的过渡效果。
ease-out规定以慢速结束的过渡效果。
ease-in-out规定以慢速开始和结束的过渡效果。
transition-delay规定过渡效果何时开始。默认是0。
transition:[transition-property] || [ transition-duration] || [transition-timing-function ] || [ transition-delay]简写属性,用于在一个属性中设置四个过渡属性。

注释:CSS3过渡是元素从一种样式逐渐改变为另一种效果,要实现这一点,必须规定两项内容:
1.规定把效果添加到哪个CSS属性上
2.规定效果的时长
IE10、Firefox、Chrome以及Opera支持transition属性。Safari需要前缀-webkit-。

例1:当鼠标光标移动到该元素时,它逐渐改变它原有样式

div{ width:100px; height:100px;
 background:red; transition:width 2s;
  -webkit-transition:width 2s; }
  div:hover{ width:300px; 
  }<div></div>

在这里插入图片描述

例2:多属性过渡

div{width: 300px; height: 300px;
 background: #fdff1f;
  border: #ffae28 solid 3px; 
  margin: 100px auto;
  transition: all 0.5s; }
 div:hover{width: 500px; height: 400px;
  border-radius: 15px; 
  background: #ff67c2; }
  <div></div>

在这里插入图片描述在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值