web开发之-前端css(6)
zhezhongyun 2025-08-06 23:56 27 浏览
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用来设置延迟播放的时间；
相关推荐
- VSCode中值得推荐的常用的23个高效前端插件(工具篇)(一)
-
VSCode是我们前端开发的一个强大的IDE，所以选择趁手好用的插件是提高开发效率，然后剩下的时间用来摸鱼是很有必要滴。工具篇（23）Chinese（Simplified）vscode我们都知道是...
- 高级前端进阶，用gulp提升你的开发效率
-
前言：这两天动手配置了一下gulp，发现gulp配置简单，构建速度快，在某些使用场景下还是个不错的选择，本文从零开始构建，到最后打包发布到生成环境。通过本文可以快速上手gulp，文末附送github源...
- Chrome 110 3大新特性!CSS支持画中画!
-
大家好，很高兴又见面了，我是"前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!今天带着大家一起看看最新发布的Chrome1...
- 用html中If语句——判断ie浏览器的版本
-
if语句的代码的语法非常简单，，就是一个if判断语句来判断浏览器的类型和版本，应用类似<!--[iflteIE6]>和<![endif]-->语法结构包孕起来...
- 谷歌浏览器怎么开启无痕浏览_谷歌浏览器怎么开启无痕浏览模式
-
很多用户在使用谷歌浏览器时，不希望留下任何上痕迹，开启无痕浏览器是最好的选择。这个模式下可以更好的保护个人隐私记录，给你带来更加安全的冲浪体验，接下来就给大家详细介绍下谷歌浏览器的无痕浏览模式，希望对...
- Linux命令那么多，其实只需要记住这些就足够了!
-
你好，这里是网络技术联盟站，我是瑞哥。Linux命令行是一个强大且灵活的工具，可以极大地提高用户的工作效率和系统管理能力。我们都知道，Linux命令非常多，但是在实际的工作中，日常使用到的命令并不多，...
- Linux如何查看文件_linux如何查看文件大小
-
Linux如何查看目录下的所有文件？用ls（list）查看当前目录下的所有文件和子目录。Ls查看目录下的文件，怎么区分是目录还是文件呢？第一种方式，我们可以通过颜色来区分目录和文件。默认情况下，目录显...
- Linux系统man命令使用详解_linux man命令详解
-
man命令是在Linux和Unix系统上用于查看系统手册页（manualpages）的工具。手册页提供了关于系统命令、函数和文件的详细文档。命令语法：man[选项][命令或主题]参数：[选项]...
- linux ps命令详解_linux中ps
-
linux中ps只显示进程的静态快照，及瞬间的进程状态,它拥有众多的风格，可分为3组：UNIX风格，BSD风格，GNU风格，本文介绍UNIX风格的ps指令。参数ps[-aefFly][-ppid...
- 如何在 Linux 上查找系统硬件信息?hwinfo命令很强大!
-
hwinfo是一个功能强大的硬件信息查询工具，专为Linux系统设计。它能够提供系统中几乎所有硬件组件的详细信息，包括但不限于CPU、内存、硬盘、网络设备、USB设备、显卡、声卡等。与其他常...
- Linux Shell 入门教程(二):常用命令大全与使用技巧
-
在上一节《理解Linux与Shell》中，我们了解了Linux是什么、Shell是什么以及常见的Shell类型。这一篇，我们将正式动手操作，掌握使用频率最高、最实用的Linux命令...
- SpringBoot应用部署神器:可视化服务管理脚本让运维更轻松
-
在SpringBoot应用的生产环境部署中，传统的手动启停服务方式不仅效率低下，还容易出错。今天分享一个功能强大的可视化服务管理脚本，让SpringBoot应用的部署和运维变得简单高效。痛点分析：传统...
- 一次虚拟机性能问题导致的应用故障
-
最近我负责维护的一套语音平台出了问题。故障现象据客户反馈是转入IVR以后没有正常响应，客户无奈挂机了。老实说，刚开始接到用户反馈的时候，我是不太相信的。我们的系统平时运行运行很稳定，客户的并发数不大，...
- linux中的常用命令_linux常用命令及含义
-
linux中的常用命令linux中的命令统称shell命令shell是一个命令行解释器，将用户命令解析为操作系统所能理解的指令，实现用户与操作系统的交互shell终端：我们平时输入命令，执行程序的那个...
- linux学习笔记——常用命令-文件处理命令
-
ls目录处理命令：ls全名：list命令路径：/bin/ls执行权限：所有用户ls–ala--alll–long-i查看i节点ls–i查看i节点命令名称：mkdir命令英文原意：m...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- opacity 属性 (32)
- transition 属性 (33)