css学习笔记-过渡

最新推荐文章于 2024-09-10 18:37:52 发布

冬瓜312

最新推荐文章于 2024-09-10 18:37:52 发布

阅读量294

点赞数

分类专栏： css3 文章标签： css css3

本文链接：https://blog.csdn.net/tjzhuorui/article/details/73543380

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先推荐一下：W3school（http://www.w3school.com.cn/cssref/index.asp#transition）上面讲解挺详细的，而且可以立即的写代码尝试结果。笔者的也是通过此处进行学习的。

一共4个属性，第一个是下面四个的简写。

笔者自己亲手学习了下，目标是做一个方块，当鼠标悬浮上去的时候，改变大小、背景颜色和字体颜色，且有过渡效果。

之前：

悬浮后：

然后粘贴代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition的过渡效果</title>

    <style>
        div {
            background-color: green;
            color: white;
            padding: 10px;
            width: 40px;
            border-radius: 10%;
            text-align: center;
            /*-webkit-transition: prop time;*/
            /*-moz-transition: prop time;*/
            /*-ms-transition: prop time;*/
            /*-o-transition: prop time;*/
            transition: background-color 1s,width 1s;
        }

        div:hover {
            background-color: yellow;
            font-weight: bold;
            color: green;
            width: 800px;
        }

    </style>

</head>
<body>
<div>点我</div>
</body>
</html>

实现的过程中没有任何问题，but笔者发现了一个bug，就是多次悬浮之后，会有痕迹残留：（右上这一条横杠杠）