HTML常用动画

最新推荐文章于 2024-07-30 23:06:43 发布
最新推荐文章于 2024-07-30 23:06:43 发布
阅读量1.1k 收藏 25
点赞数 18
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79795370/article/details/135599361
版权
本文介绍了如何使用CSS为HTML元素添加鼠标悬停时的多种动画效果，包括文字加载动画、缩放、旋转、边框变换、透明度改变以及布局技巧如底部通栏和清除浮动。
摘要由CSDN通过智能技术生成

鼠标移入文字加载动画效果

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <h1 class="animated-text">Hello, World!</h1>

</body>

</html>

CSS：

.animated-text {

  display: inline-block;

  font-size: 30px;

  transition: transform 0.5s ease; /* 设置动画过渡时间和缓动效果 */

}

.animated-text:hover {

  transform: rotateY(180deg); /* 鼠标移入时应用动画效果 */

}

鼠标悬停缩放效果

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <h1 class="zoom-text">Hover over me</h1>

</body>

</html>

CSS：

.zoom-text {

  font-size: 24px; /* 设置初始字体大小 */

  transition: font-size 0.3s ease;  /* 设置动画过渡时间和缓动效果 */

}

.zoom-text:hover {

  font-size: 30px; /* 鼠标悬停时应用的字体大小 */

}

鼠标移入旋转动画

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <div class="rotate-box">

    <img src="your-image.jpg" alt="Your Image">

  </div>

</body>

</html>

CSS：

.rotate-box {

  display: inline-block;

  transition: transform 0.5s ease; /* 设置动画过渡时间和缓动效果 */

}

.rotate-box:hover {

  transform: rotate(360deg); /* 鼠标移入时应用的旋转角度 */

}

loding加载动画

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <div class="loader"></div>

</body>

</html>

CSS：

.loader {

  border: 10px solid #f3f3f3; /* 设置加载动画的边框样式 */

  border-top: 10px solid #3498db; /* 设置加载动画边框的颜色 */

  border-radius: 50%; /* 设置加载动画为圆形 */

  width: 60px; /* 设置加载动画的宽度 */

  height: 60px; /* 设置加载动画的高度 */

  animation: spin 2s linear infinite; /* 设置旋转动画的属性和持续时间 */

  /* 中心对齐加载动画 */

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

@keyframes spin {

  0% {

    transform: rotate(0deg); /* 起始角度 */

  }

  100% {

    transform: rotate(360deg); /* 终止角度 */

  }

}

当鼠标移上第一张图像时，产生直角边框过渡为圆角边框的效果

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <div class="image-container">

    <img src="image-1.jpg" alt="Image 1" class="image">

  </div>

</body>

</html>

CSS：

.image-container {

  display: inline-block;

  overflow: hidden;

  position: relative;

}

.image {

  width: 300px;

  height: 200px;

  transition: border-radius 0.5s ease; /* 设置边框过渡效果 */

}

.image-container:hover .image {

  border-radius: 50%; /* 鼠标悬停时边框过渡为圆角边框 */

  cursor: pointer;

}

当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <div class="image-container">

    <img src="image-2.jpg" alt="Image 2" class="image">

  </div>

</body>

</html>

CSS:

.image-container {

  display: inline-block;

  overflow: hidden;

  position: relative;

}

.image {

  width: 300px;

  height: 200px;

  transition: transform 0.5s ease; /* 设置变换过渡效果 */

}

.image-container:hover .image {

  transform: scale(1.2); /* 鼠标悬停时图片逐渐放大 */

  cursor: pointer;

}

当鼠标移上第三张图像时，产生图片旋转的过渡效果

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <div class="image-container">

    <img src="image-3.jpg" alt="Image 3" class="image">

  </div>

</body>

</html>

CSS：

.image-container {

  display: inline-block;

  overflow: hidden;

  position: relative;

}

.image {

  width: 300px;

  height: 200px;

  transition: transform 0.5s ease; /* 设置变换过渡效果 */

}

.image-container:hover .image {

  transform: rotate(360deg); /* 鼠标悬停时图片旋转 */

  cursor: pointer;

}

当鼠标移上第四张图像时，产生图片透明度逐渐变暗的过渡效果

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <div class="image-container">

    <img src="image-4.jpg" alt="Image 4" class="image">

  </div>

</body>

</html>

CSS：

.image-container {

  display: inline-block;

  overflow: hidden;

  position: relative;

}

.image {

  width: 300px;

  height: 200px;

  transition: opacity 0.5s ease; /* 设置透明度过渡效果 */

}

.image-container:hover .image {

  opacity: 0.7; /* 鼠标悬停时图片透明度逐渐变暗 */

  cursor: pointer;

}

设置背景颜色通栏显示

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <div class="background-color"></div>

  <div class="content">

    <!-- 这里是页面内容 -->

  </div>

</body>

</html>

CSS:

body {

  margin: 0;

  padding: 0;

}

.background-color {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  background-color: #f1f1f1; /* 设置背景颜色 */

  z-index: -1;

}

.content {

  /* 这里是设置页面内容的样式 */

}

清除浮动

HTML

clearfix类

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <div class="clearfix">

    <div class="float-left">浮动元素 1</div>

    <div class="float-left">浮动元素 2</div>

    <!-- 其他内容 -->

  </div>

</body>

</html>

CSS:

.clearfix::after {

  content: "";

  display: table;

  clear: both;

}

.float-left {

  float: left;

}

HTML

after伪元素

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <div class="float-container">

    <div class="float-left">浮动元素 1</div>

    <div class="float-left">浮动元素 2</div>

    <!-- 其他内容 -->

    <div class="clearfix"></div>

  </div>

</body>

</html>

CSS:

.float-container::after {

  content: "";

  display: table;

  clear: both;

}

.float-left {

  float: left;

}

设置banner图片溢出隐藏

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <div class="banner-container">

    <img src="banner.jpg" alt="Banner Image" class="banner-image">

  </div>

</body>

</html>

CSS:

.banner-container {

  width: 100%;

  height: 200px; /* 假设高度为200px，请根据实际情况调整 */

  overflow: hidden; /* 设置溢出隐藏 */

}

.banner-image {

  width: 100%;

  height: auto;

  object-fit: cover;

}

通过相对定位设置图片在页面居中显示

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <div class="container">

        <img src="your-image.jpg" alt="Your Image" class="centered-image">

    </div>

</body>

</html>

CSS:

.container {

  position: relative;

  width: 100%; /* 可根据实际需要调整 */

  height: 400px; /* 可根据实际需要调整 */

}

.centered-image {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  max-width: 100%; /* 图片最大宽度 */

  max-height: 100%; /* 图片最大高度 */

}

定义其内部的图片和文字左浮动

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <div class="container">

        <img src="your-image.jpg" alt="Your Image" class="float-left">

        <p class="float-left">Your text goes here.</p>

        <div class="clearfix"></div>

    </div>

</body>

</html>

CSS:

.float-left {

  float: left;

}

.clearfix::after {

  content: "";

  display: table;

  clear: both;

}

定义鼠标悬浮时的背景样式

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <div class="container">

    <p class="hover-background">鼠标悬浮时背景样式变化。</p>

  </div>

</body>

</html>

CSS：

.hover-background:hover {

  background-color: yellow;

}

设置绝对定位

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <div class="container">

        <div class="absolute-element">

            <!-- 内容 -->

        </div>

    </div>

</body>

</html>

CSS：

.container {

  position: relative;

}

.absolute-element {

  position: absolute;

  top: 50px; /* 设置上边距 */

  left: 50px; /* 设置左边距 */

  width: 200px; /* 设置宽度 */

  height: 100px; /* 设置高度 */

  background-color: #ccc; /* 设置背景颜色 */

}

设置相对定位

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <div class="container">

        <div class="relative-element">

            <!-- 内容 -->

        </div>

    </div>

</body>

</html>

CSS：

.relative-element {

  position: relative;

  top: 20px; /* 设置相对于初始位置的上边距 */

  left: 20px; /* 设置相对于初始位置的左边距 */

  width: 200px; /* 设置宽度 */

  height: 100px; /* 设置高度 */

  background-color: #ccc; /* 设置背景颜色 */

}

定义表格及表单

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <h2>表单示例</h2>

  

  <form>

    <label for="name">姓名:</label>

    <input type="text" id="name" name="name"><br><br>

    <label for="email">邮箱:</label>

    <input type="email" id="email" name="email"><br><br>

    <label for="message">留言:</label><br>

    <textarea id="message" name="message"></textarea><br><br>

    <input type="submit" value="提交">

  </form>

  <h2>表格示例</h2>

  <table>

    <tr>

      <th>姓名</th>

      <th>年龄</th>

    </tr>

    <tr>

      <td>张三</td>

      <td>25</td>

    </tr>

    <tr>

      <td>李四</td>

      <td>30</td>

    </tr>

  </table>

</body>

</html>

CSS：

label {

  display: inline-block;

  width: 100px;

}

input[type="text"],

input[type="email"],

textarea {

  width: 200px;

}

table {

  border-collapse: collapse;

  width: 100%;

}

th, td {

  border: 1px solid #dddddd;

  padding: 8px;

  text-align: left;

}

th {

  background-color: #f2f2f2;

}

设置多行文本输入框禁止被拉伸

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <h2>多行文本输入框示例</h2>

  <textarea id="message" name="message"></textarea>

</body>

</html>

CSS：

textarea {

  width: 300px;

  height: 150px;

  resize: none; /* 禁止垂直和水平拉伸 */

}

底部通栏显示

HTML

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <div class="wrapper">

    <p>这里是页面的主要内容</p>

  </div>

  <footer>

    <p>© 2024 我的网站</p>

  </footer>

</body>

</html>

CSS：

footer {

  background-color: #333;

  color: #fff;

  text-align: center;

  padding: 20px 0;

  position: fixed;

  bottom: 0;

  width: 100%;

}

元气啵啵
关注
  • 18
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML中的＜meta/＞标签居然能搞动画？
shengjon的博客
11-12 1193
前言 对于一名前端工程师来说，meta标签是再熟悉不过了。初学前端时，写的最多的就是下面的这句了： <metacharset="UTF-8" /> 但是大多数前端er对meta的认识基本上就止步于此了，不要小看它，小标签却能实现大功能。这篇文章就来带着大家一起重新认识下常常被我们忽略的meta标签吧 什么是meta meta是html语言head区的一个辅助性标签，位于文档的头部，不包含任何内容，其属性定义了与文档相关联的名称/值对。 meta...
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 989
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML动画效果全解析：从基础到高级，打造网页互动新体验！
仰望苍穹
06-14 393
在当今的互联网时代，用户对网页的交互性和视觉体验有着越来越高的要求。HTML动画技术作为提升网页互动体验的重要手段，已经成为了前端开发者必须掌握的技能之一。本文将从基础到高级，全面解析HTML动画效果的实现方式，并结合现代互联网的热点技术，如响应式设计、WebGL、Canvas等，探讨如何打造更加丰富和高效的网页互动新体验。
Python爬虫技术 第13节 HTML和CSS选择器
hummhumm的专栏
07-25 899
在爬虫技术中，解析和提取网页数据是核心部分。HTML 和 CSS 选择器被广泛用于定位网页中的特定元素。下面将详细介绍这些选择器如何在 Python 中使用，特别是在使用像 Beautiful Soup 或 Scrapy 这样的库时。
前端开发知识(一)-html
modi000的博客
07-24 569
2.前端开发的三剑客：html、css、javascript。Element（饿了么开发的） ：前端组件库。Vue可以简化JavaScpript流程。Ngix：前端服务器。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 407
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
07-30 191
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 266
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
electron 主进程和渲染进程
qq_21087199的博客
07-29 260
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 436
对于上云api开发学习过程中的错误教训积累总结
前端 axios 封装
清云
07-29 441
前端 axios 封装
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1279
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
前端代码混淆加密（使用Terser、WebpackObfuscator）
最新发布
@Fonden
07-30 224
（注意Terser和WebpackObfuscator引入的方式不同，后者是放到plugins中）② 在 Terser 之后使用 WebpackObfuscator 进行混淆。以此在网上查找到相应工具有：Terser、WebpackObfuscator。① 使用 Terser 进行代码压缩和 source map 生成，② 设置在生产环境中才去使用混淆加密工具（开发环境会产生各种报错）为了对公司项目进行安全防护措施，前端需要进行代码混淆加密处理。压缩代码、变量和函数名混淆、删除未使用代码。
【前端面试3+1】20 css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理、【二叉树的中序遍历】
qq_61798306的博客
07-30 474
本文包含八股文：css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理，算法【二叉树的中序遍历】
前端开发技术之HTML/CSS
m0_67484548的博客
07-29 626
5. <figure> 和 <figcaption>：<figure> 用于媒体内容的分组，<figcaption> 用于定义 <figure>1. <menu> 和 <menuitem>：定义菜单列表（<menu>）和菜单项（<menuitem>）（HTML5。1. <h1> to <h6>：定义HTML标题，<h1> 表示最高的标题级别，<h6> 表示最低的标题级别。3. <figure> 和 <figcaption>：定义媒体内容的分组，以及媒体的标题或说明。
前端必修技能：高手进阶核心知识分享 - css盒的before、after和子元素的层叠关系解析及应用
uu0216的博客
07-29 873
一个盒子 它的 ::before伪类在最底层, ::after 伪元素在最上层, 其所有子元素在中间叠放。 盒子的 子元素堆叠关系，按照书写顺序自下而上排序：先写的叠放在下面，后写的在上面。 父元素在最下面。
技术实践—微前端技术应用
iOceanMind的博客
07-26 561
微前端是一种新兴的前端架构模式，是一种类似于微服务的架构，将微服务的理念应用于浏览器端。其核心理念是将一个大而单一的前端应用拆分为多个小型独立的微应用。这些微应用各自独立，可以由不同团队开发维护，部署，组合这些微应用，行成一个聚合应用。
Spring Cloud微服务项目统一封装数据响应体
洛*璃的博客
07-26 554
在微服务架构下，处理服务之间的通信和数据一致性是一个重要的挑战。为了提高开发效率、保证数据的一致性及简化前端开发，统一封装数据响应体是一种非常有效的实践。本文博主将介绍如何在 Spring Cloud 微服务项目中统一封装数据响应体，并分享一些最佳实践。
微前端概念
qq_40121308的博客
07-29 721
元素隔离的概念来自ShadowDom,即ShadowDom中的元素可以和外包的元素重复但不会冲突，micro-app模拟实现了类似ShadowDom的功能，元素不会逃离
HTML5 Canvas API：动态图形与动画解析
HTML5高级程序设计主要关注HTML5的Canvas API，这是一个用于在网页上动态生成和展示图形、图表、图像及动画的强大工具。Canvas API是HTML5规范的一部分，由苹果公司首先提出，旨在解决在浏览器内进行图形绘制的难题...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值