Day23 CSS转场动画Transition

我们能够做完一个网页後，接下来我们可以让这个网页有更多的动态、趣味性，今天要介绍的动画效果transition就可以帮助我们达成这个效果，我们来看怎麽使用吧!

    <style>
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: black;
        }

        .btn a{
            color: white;
            text-decoration: none;
        }
    </style>
    
<body>
    <div class="btn">
        <a href="">注册</a>
    </div>
</body>

我们先建立一个按钮，并帮他设定一下CSS，出来会长这个样子。

接下来我们帮他加上transition动画。

    <style>
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: black;
            transition: all 1s 0s ease;
        }

        .btn a{
            color: white;
            text-decoration: none;
        }

        .btn:hover{
            background-color: grey;
        }
    </style>
    
<body>
    <div class="btn">
        <a href="">注册</a>
    </div>
</body>

transition用法

transition: transition-property | transition-duration | transition-timing-function | transition-delay

transition: 属性 转换时间 延迟执行时间 速度

属性:你所要有动画的元素。例如:background-color、padding、color。
转换时间:动画的时间。
延迟执行时间:过几秒才要执行这个动画。
速度:动画执行的速度。

先从背景图片开始!你可能会问，那hover不就做得到了吗?没错但动画顾名思义，要让他变化的过程中是平顺的。让我们继续看下去。

hover

transition

看出两者的差别了吗?

而当然不只可以设定改变背景图片而已，padding，宽高，文字颜色也可以!

    <style>
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: black;
            transition: all 1s 0s ease ;
            
        }

        .btn a{
            color: white;
            text-decoration: none;
        }

        .btn:hover{
            background-color: grey;
            padding:10px 30px;
        }

        .btn:hover a{
            color:yellow;
        }
    </style>

这样子同时就改变了文字、背景颜色、padding。

我们可以把他加入到我们昨天写的网页中!

        .article .wrap .item{
            width: 300px;
            margin: 20px;
            text-align: center;
            box-shadow: 1px 5px 5px grey;
            transition: all .5s 0s ease;
        }

        .article .wrap .item:hover{
            background-color: rgb(250, 94, 37);
        }

这样网页的趣味性就增加了!


<<:  [DAY22] Boxenn Use Case Spec

>>:  Day23:今天来聊一下Hacking Web Applications

[ 卡卡 DAY 17 ] - React Native 用 Animated 来做简单骨架屏

上一章节讲了 Animated 的使用 我们运用 start() 来做个骨架屏唷！ 制作 bann...

Day 17：RecyclerView 跳页&资料传递(2)

本篇文章同步发表在 HKT 线上教室 部落格，线上影音教学课程已上架至 Udemy 和 Youtu...

day22_Windows, Linux, MacOs 三大系统在 ARM 上的能耐总结

ARM 能做好多事情，有你需要的吗？ 之前我们花了很大篇幅在介绍三大 Os 在各个领域能够做到的事情...

Day 5:Hello....android world! 建立第一个KMM专案(Android)

Keyword: Android Studio，AVD Manager 到Day6完成第一个KMM专...

第二十天：在 TeamCity 上执行 Build Scan

昨天介绍了 Gradle 的 Build Scan 功能，让我们可以清楚的了解 Build 过程中的...