web开发之-前端css(6)

zhezhongyun 2025-08-06 23:56 3 浏览

css除了用来设置样式外，还可以设置各种特效，我们常用到的特效有两种：过渡和动画，过渡需要响应事件更改样式属性来触发，而动画，不需要响应事件就可以执行，下面我们看下，这两种实现的方式；

css样式过渡

我们添加一个div块，当鼠标移动上去后，更改它的颜色：

<html>
    <head>
        <title>css</title>
    </head>
    <body>
        <div class="trans-cla">
            我是过渡动画
        </div>
    </body>
    <style>
        .trans-cla{
            width:100px;
            height: 100px;
            background-color: yellow;
            transition: background-color 2s;
        }
        .trans-cla:hover{
            background-color: red;
        }
    </style>
</html>

注：由于这里是一个过渡动画，大家可以手写一下试一下，过渡主要是用的

transition: background-color 2s;表示当background-color的值改变时，由当前的值到最后设置的值需要持续2秒；

.trans-cla:hover：表示鼠标移动到这个class的div块时，这个div块的背景颜色变为红色。这个过程持续2秒；

还有两个属性：

transition-timing-function:指定过渡的类型；

transition-delay:设置延迟执行的时间；

css样式动画

有的时候我们打开一个页面，会看到某些元素会自动执行一个动画，这里我们在打开一个页面时，页面的div元素从左边移动到右边，字体颜色变为红色：

<html>
    <head>
        <title>css</title>
    </head>
    <body>
        <div class="anim-cla">
            我是自动动画
        </div>
    </body>
    <style>
        .anim-cla{
            width:100px;
            height: 100px;
            background-color: yellow;
            animation: lefttoright 10s forwards;
            position: relative;
        }
        @keyframes lefttoright {
            from{left:0px;}
            to {left:500px;color:red}
        }
        
    </style>
</html>

注：

@keyframes 动画名称：这个用来定义一个css动画，例如：@keyframes lefttoright 定义了一个lefttoright动画， from 表示开始时候的值，to表示最后变换后的值，这里可以添加百分比用来表示动画播放过程中到某个进度时的样式，例如可以把from改成0%，to改成100%，中间你可以主动添加其他的百分比并设置样式，设置的样式在后方使用大括号{}包括起来，写上此时改变的百分比；

animation:用来设用动画，例如animation: lefttoright;10s表动整个动画播放10s,forwards设置播放完成后，停止在最后的位置，这个相当于你设置了 animation-fill-mode的属性，这个里面的很多属性大家可以查手册挨个试一下，同样的animation-delay用来设置延迟播放的时间；

transition-delay 属性

上一篇：DNF无色流派还在继续，重力之泉龙战八荒测评
下一篇：居然可以通过动画快速学习 css

web开发之-前端css(6)

css样式过渡

css样式动画

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?