web开发之-前端css(6)
moboyou 2025-06-18 18:37 16 浏览
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用来设置延迟播放的时间；
相关推荐
- linux下C++ socket网络编程——即时通信系统(含源码)
-
一：项目内容本项目使用C++实现一个具备服务器端和客户端即时通信且具有私聊功能的聊天室。目的是学习C++网络开发的基本概念，同时也可以熟悉下Linux下的C++程序编译和简单MakeFile编写二：需...
- Workerman的使用（workerman教程）
-
Workerman是什么？Workerman是一款纯PHP开发的开源高性能的PHPsocket服务框架。Workerman不是重复造轮子，它不是一个MVC框架，而是一个更底层更通用的socket服...
- 百万人在线的直播间实时聊天消息分发技术实践
-
本文由融云技术团队原创分享，原题“聊天室海量消息分发之消息丢弃策略”，内容有修订。1、引言随着直播类应用的普及，尤其直播带货概念的风靡，大用户量的直播间场景已然常态化。大用户量直播间中的实时互动是非常...
- 省钱兄JAVA 直播源码开发（省钱快报源码）
-
在现代社会，直播已经成为一种流行的社交和商业形式。越来越多的人通过直播平台展示自己的才艺、分享生活、进行教学，甚至进行产品销售。随着直播行业的发展，许多人希望能够参与到这一领域中，尤其是开发自己的直播...
- 编程革命彻底爆发，OpenAI最强智能体上线ChatGPT
-
OpenAI最强AI编程智能体真的来了！Codex震撼上线，由o3优化版codex-1加持，多任务并行，半小时干完数天软件工程任务。从今天起，AI编程正式开启新时代！刚刚，GregBrockman...
- Springboot下的WebSocket开发（springboot websock）
-
今天遇到一个需求，需要对接第三方扫码跳转。一种方案是前端页面轮询后端服务，但是这种空轮询会虚耗资源，实时性比较差而且也不优雅。所以决定使用另一种方案，websocket。以前就知道websocket，...
- epoll聊天室的实现（epoll使用详解(精髓)）
-
1.服务端a.支持多个用户接入，实现聊天室的基本功能b.使用epoll机制实现并发，增加效率2.客户端a.支持用户输入聊天消息b.显示其他用户输入的信息c.使用fork创建两个进程子进程有...
- 自建娱乐聊天室—一起听歌吧!属于自己的交友聊天房
-
前言该项目算是老项目了，但最近粉丝群里的友友都让我写一下，那就写一下吧。项目类似于现在各大直播平台的聊天室，但又不像。它更加的自由开放，没有平台的礼物以及各种限制，如果你有来自五湖四海的朋友，想一起聊...
- 定时任务框架选型Quartz/Xxl-Job（定时任务调度框架）
-
以前公司平台中集成了定时任务功能，但平台内部实现比较简单，使用方式有些受限，比如说无法跟踪定时任务执行状态，无法自动解决集群状态下的任务争抢问题，因此考虑升级一下任务实现方式，搜集一番后，Quartz...
- 【推荐】一款开源免费的 ChatGPT 聊天管理系统，支持PC、H5等多端
-
如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍GPTCMS是一款开源且免费（基于GPL-3.0协议开源）的ChatGPT聊天管理系统，它基于先进的GPT...
- 现在页面实时聊天都使用Websocket技术实现吗?
-
是的，现在实现页面实时聊天主要使用Websocket，在此之前，还有其它的一些技术，比如：AJAX轮询、FlashXMLSocket等。其中Ajax轮询就是定时向服务器发起请求，例如1秒钟请求一...
- 一对一源码开发，九大方面完善基础架构
-
以往的直播大多数都是一对多进行直播社交，弊端在于不能满足到每个用户的需求，会降低软件的体验感。伴随着用户需求量的增加，一对一直播源码开始出现。一个完整的一对一直播流程即主播发起直播→观看进入房间观看→...
- 揭秘PHP8.4的新特性，帮助您提高开发效率
-
PHP8.4作为一次重大版本更新，引入了多项提升开发效率和代码性能的新特性，以下是核心功能的总结：一、属性钩子（PropertyHooks）-功能描述：允许通过语法直接为类的属性定义get...
- 【验证码逆向专栏】某验三代、四代一键通过模式逆向分析
-
声明本文章中所有内容仅供学习交流，抓包内容、敏感网址、数据接口均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，若有侵权，请联系我立即删除！本文章未经许可禁止转载，禁止任...
- 如何申请SourceForge免费PHP空间（国内免费php空间申请）
-
SF.net，即Sourceforge.net，是国外一个开源软件分享及管理平台，也是全球最大开源软件开发平台和仓库。Sourceforge.net为广大的开发者提供了软件发布平台，同时又提供了个人免...
- 一周热门
- 最近发表
-
- linux下C++ socket网络编程——即时通信系统(含源码)
- Workerman的使用（workerman教程）
- 百万人在线的直播间实时聊天消息分发技术实践
- 省钱兄JAVA 直播源码开发（省钱快报源码）
- 编程革命彻底爆发，OpenAI最强智能体上线ChatGPT
- Springboot下的WebSocket开发（springboot websock）
- epoll聊天室的实现（epoll使用详解(精髓)）
- 自建娱乐聊天室—一起听歌吧!属于自己的交友聊天房
- 定时任务框架选型Quartz/Xxl-Job（定时任务调度框架）
- 【推荐】一款开源免费的 ChatGPT 聊天管理系统，支持PC、H5等多端
- 标签列表
-
- 外键约束 oracle (36)
- oracle的row number (32)
- 唯一索引 oracle (34)
- oracle in 表变量 (28)
- oracle导出dmp导出 (28)
- oracle两个表 (20)
- oracle 数据库 字符集 (20)
- matlab化简多项式 (20)
- 多线程的创建方式 (29)
- 多线程 python (30)
- java多线程并发处理 (32)
- 宏程序代码一览表 (35)
- c++需要学多久 (25)
- css class选择器用法 (25)
- css样式引入 (30)
- css教程文字移动 (33)
- php简单源码 (36)
- php个人中心源码 (25)
- php小说爬取源码 (23)
- 云电脑app源码 (22)
- html画折线图 (24)
- docker好玩的应用 (28)
- linux有没有pe工具 (34)
- mysql数据库源码 (21)
- php开源万能表单系统源码 (21)