小程序中CSS3

微信小程序界面设计CSS3在小程序中样式精通课程-第20课-transition过渡-transition

时间：2019/1/11 17:34:38 作者：互联网来源：网络转载查看：27944 评论：0

内容摘要：transition通用语法浏览器支持Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。Safari 支持替代的 -webkit-transition 属性。注释：Internet Explorer 9 以及...

transition

通用语法

浏览器支持

微信小程序界面设计CSS3在小程序中样式精通课程-第20课-transition过渡-transition

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

{C}Ø {C}{C}transition-property

{C}Ø {C}{C}transition-duration

{C}Ø {C}{C}transition-timing-function

{C}Ø {C}{C}transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

默认值：	all 0 ease 0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.transition="width 2s"

语法

transition: property duration timing-function delay;

实例

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:blue;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>

效果图

小程序应用

Wxml代码

查看过渡效果

</view>

Wxss代码

.c01{

margin: 10px;

padding: 10px;

height: 100px;

width: 100px;

background-color: gainsboro;

border-radius: 10px;

transition:width 2s;

}

.c01:hover{

width: 200px;

}

效果图

欢迎大家收看我的视频课程：微信小程序界面设计-小程序中CSS3样式精通课程

微信小程序界面设计CSS3在小程序中样式精通课程-第32课-框大小box-sizing

标签：transition过渡-transition 微信小程序界面设计入门课程 wxss中css3入门在线视频课程

上一篇：微信小程序界面设计CSS3在小程序中样式精通课程-第21课-多列-column-count创建多列
下一篇：微信小程序界面设计CSS3在小程序中样式精通课程-第19课-transition过渡-transition-delay

相关文章

相关评论