CSS3 transition 过渡效果

最新推荐文章于 2024-04-25 16:16:15 发布

yb305小白

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量241

点赞数

分类专栏： css 文章标签： CSS tansition CSS3 过渡效果

原文链接：https://juejin.im/post/5a0c184c51882531926e4294

版权

css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、定义

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间

二、语法

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

三、例子

上面两个按钮，第一个没有使用过渡，第二个使用过渡，大家可以看到当中的区别，用了过渡之后是不是没有那么生硬，有一个变化的过程，显得比较生动。
当然这只是一个最简单的过渡demo，两个按钮的样式代码，唯一的区别就是，第二个按钮加了过渡代码transition: all .7s;

<!DOCTYPE html>
<html>
<head>
<style> 
a{
    text-decoration:none;
    out-line: none;
    color:#333;
    float:left;
    background:#fff;
    border:1px solid #ccc;
    border-radius:4px;
    padding:10px;
    margin:10px;
}
a.tooltip2{
    transition: all .7s;
}

a:hover{
    background:#4689f4;
    color:#fff;
}

</style>
</head>
<body>
<a class="tooltip1" href="#">无transition样式练习</a>
<a class="tooltip2" href="#">transition过渡样式练习</a>

</body>
</html>

四、效果

yb305小白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 transition 过渡效果

一、定义CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间二、语法transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)三、例子上面两个按钮，第一个没有使用过渡，第二个使用过渡，大家可以看到当中的区别，用了过渡之后是不是没有那么生硬，有一个变化的过程，显得比较生...
复制链接

扫一扫