过渡，转换，分布按钮，动画

最新推荐文章于 2024-07-13 16:31:11 发布

小令yyds

最新推荐文章于 2024-07-13 16:31:11 发布

阅读量221

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_63841538/article/details/121996165

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

过渡可也让我们的内容呈现一个动态的过程，他的标签为transition

transition-property：指定要用于过渡的属性名称，如：width

transition-duration：过渡持续时间，单位是秒。

transition-timing-function：过渡的的运行曲线

transition-delay：延迟执行时间，单位为秒

也可以只用transition指定

只能放在需要过渡的标签里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ces{
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background: #888888;
            /*transition-property: left;
            transition-duration: 5s;
            transition-timing-function: linear;
            transition-delay: 0s;*/
            transition: all 3s linear;
        }
 
        :hover.ces{
            cursor: pointer;
            left: 300px;
            border-radius: 50%;
            background-color: greenyellow;
        }
 
 
    </style>
</head>
<body>
<div class="ces">
</div>
</body>
</html>

运行如下图:
在这里插入图片描述
注:还可以实现进度效果。

转换有移动，旋转，缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border:1px solid #888888;
        }
        div.box{
            transform: translate(100px,120px);
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<div>标题
    <div class="box">标题二</div>
</div>
</body>
</html>

运行如下:
标签为transform: translate（）里面单位为px
在这里插入图片描述
旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bar{
            position: absolute;
            top:100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: black 1px solid;
            transform: rotate(45deg);
        }
 
 
    </style>
</head>
<body>
<div class="bar">
</div>
</body>
</html>

运行如下:
标签为 transform: rotate（）里面为度数单位为deg
在这里插入图片描述
分布按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    li{
        list-style: none;
        float: left;
        width: 20px;
      border: black 1px solid;
        border-radius: 50%;
        text-align: center;
    }
    li:hover{
        cursor: pointer;
        transform: scale(2);
    }
</style>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

运行如下:
float为浮动
text-align: center为居中标签为ransform: scale()
在这里插入图片描述
动画跟过渡类似不过要想使用动画，那么首先浏览器必须是高版本的。
通过 @keyframe 来定义动画animation 属性来指定动画名称开始状态 from 结束状态 to也可以用%来表示animation-name表示动画的名称animation-duration表示持续时间animation-timing-function表示动画曲线animation-delay表示延迟时间animation-direction表示逆向播放 animation-iteration-count表示动画执行总人数 infinite 表示一直循环animation-play-state表示动画是否正在运行或暂停 running是运行状态，paused是暂停状态animation-fill-mode表示动画的状态保持forwards，回到起始backwards
案列如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
 
    .box {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 100px;
        height: 100px;
        background-color: aqua;
 
        animation-name: move;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-delay: 0s;
        animation-iteration-count: 3;
        animation-direction: normal;
        animation-fill-mode: backwards;
    }
    .box:hover {
        animation-play-state: paused;
    }
    @keyframes move {
 
        0% {
            left: 10px;
        }
        100% {
            left: 400px;
        }
    }
 
</style>
 
</head>
<body>
<div class="box"></div>
</body>
</html>