HTML常用动画

最新推荐文章于 2024-05-09 08:18:52 发布
最新推荐文章于 2024-05-09 08:18:52 发布
阅读量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 帧动画
excuse12_的博客
10-26 267
html
HTML的小动画
weixin_44567226的博客
06-28 870
开发工具与关键技术： 作者：李建威 撰写时间：2019年06月28日 代码如下： <!doctype html> HTML的小动画 效果图： 对元素属性进行平滑的动画调整，也就是0.4秒让外边距移动5%； 但是只能用于一个属性，适合一些简单的动画。 ...
HTML中的＜meta/＞标签居然能搞动画？
shengjon的博客
11-12 1192
前言 对于一名前端工程师来说，meta标签是再熟悉不过了。初学前端时，写的最多的就是下面的这句了： <metacharset="UTF-8" /> 但是大多数前端er对meta的认识基本上就止步于此了，不要小看它，小标签却能实现大功能。这篇文章就来带着大家一起重新认识下常常被我们忽略的meta标签吧 什么是meta meta是html语言head区的一个辅助性标签，位于文档的头部，不包含任何内容，其属性定义了与文档相关联的名称/值对。 meta...
HTML5卡通奔跑的马动画特效特效代码
03-20
HTML5卡通奔跑的马动画特效是一款使用createjs创建的Sprite块获取图片，使用canvas画布完成，卡通奔跑的马元素动画特效。
HTML5 Canvas发光Loading动画特效源码
最新发布
爱酷码的博客
05-09 548
之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果，HTML5非常强大。
HTML中的动画效果
热门推荐
SuwanH的博客
08-17 3万+
一、HTML中的动画 在HTML中也可根据个人要求添加动画，有过渡动画transition和生动的动画效果animation以及线上的动画库 二、过渡动画transition transition是一种提供了在更改CSS属性时控制动画速度的方法，其可以让属性变化成为一个持续一段时间的过程 为页面创建一个div，为其设置背景颜色等属性 页面预览： 当鼠标悬停时，改变大小，之后在加上过渡动画效果 页面预览：当鼠标放在div上时，div向右移动，宽度改变，颜色改变 属性： tr.
HTML创意动画代码
qq_52108058的博客
02-25 1万+
这个代码使用了 Canvas 技术，创建了一个随机生成的气泡背景并且让气泡动态漂浮，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改气泡的数量、大小、颜色，以及运动的方式等等。 这个代码使用了 CSS 的动画和阴影特效，让页面中的文字在红、橙、黄、绿、蓝五种颜色之间不断变化，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改文字的大小、样式、颜色，以及变化的频率和方式等等。 该示例中，我们使用了 transform-style: preserve-3d 属性
html-动画效果
m0_73890636的博客
09-25 1792
可以通过修改translateX来改变旋转的方向 translateY则绕着Y轴旋转。鼠标点到对于按钮会改变颜色（字体和背景）以及按钮的形状，鼠标的样式。修改一部分代码即可（去掉title函数里面的方框）不同的百分号比例对旋转速度所占比有影响。能在设置的框内运动且会随着运动切换颜色。infinite无限循环。
用HTML5实现动画
cnds123的专栏
02-15 5057
要在HTML5中实现动画，可以使用以下几种方法：CSS动画、使用元素和JavaScript来实现动画、使用JavaScript动画库。
html+css 动画效果
04-11
本篇文章将深入探讨如何利用HTML和CSS创建各种动画效果，包括渐变、旋转、翻转以及显示和隐藏元素。 首先，让我们从渐变动画开始。在CSS中，我们可以使用`transition`属性来实现元素状态改变时的平滑过渡。例如，当...
html常用插件
02-28
1. **jQuery**：jQuery是最流行的JavaScript库之一，它简化了HTML文档遍历、事件处理、动画和Ajax交互。通过使用jQuery，你可以轻松地实现页面元素的选择、操作、动画效果以及与服务器的异步通信。 2. **Bootstrap*...
html实现动画源码
08-01
在HTML中实现动画，jQuery的`.animate()`方法是最常用的工具。这个方法允许开发者指定一个或多个CSS属性的变化，并在一定时间内平滑地改变这些属性，从而创造出动画效果。例如： ```javascript $("#myElement")....
常用的资源html网页
01-10
在“常用的资源html网页”这个压缩包中，我们可以期待找到一系列用于创建和设计网页的HTML代码示例、模板或者教程。下面将详细讨论HTML的一些关键知识点。 1. **HTML基本结构**：每个HTML文档都由`<!DOCTYPE html>`...
常用html代码
02-08
在"常用html代码"这个主题中，我们可以探讨以下几个关键知识点： 1. **HTML基础标签**：HTML标签是构建网页的基本元素，如`<html>`、`<head>`、`<body>`、`<title>`、`<h1>`到`<h6>`（标题）、`<p>`（段落）、`<a>`...
html如何实现加载动画
weixin_45966674的博客
12-10 1万+
html如何实现加载动画 在每个项目中都少不了接口的调用，而发请求出去之后都需要一定的时间才能返回数据，大多需要0.5 - 0.8秒，如果后端数据处理不当还有超过一秒的接口，甚至两秒，在这段时间里我们需要向客户表达正在加载而且不能让用户进行其他操作，那么就需要一个加载动画了，下面凡玉就带大家来看看html如何实现加载动画 可能大家没有注意到一点:gif图本身就带有动画效果 如果你真的很需要节省项...
html里面的好看的动画效果
xcLeigh
05-14 7639
html里面的好看的动画效果动画介绍动画效果1 - 平移动画效果2 - 抖动 动画介绍 html里面的好看的动画效果，包括基本的平移，旋转，抖动，变色等动画效果，可以直接嵌入代码使用； 元素属性介绍 1.位置 ：位移 translate（x，y）； 2.大小 ：缩放 scale（xx px）； 3.状态：旋转 rotate（xx deg）； 4.形态：skew（xx deg）； 转化属性 css转化属性 transform : none 不转换/ transform-function;转化函数 如 tra
12个效果奇特的HTML5动画赏析
delishcomcn的博客
07-18 1014
本文将为大家分享12个效果奇特的HTML5动画，HTML5强大的动画特性可以让你的网页变得更加生动和富有活力，交互性也会进一步得到提高。一起来看看下面的这些HTML5动画案例，没个案例都提供源代码下载。
HTML动画效果
2303_78651328的博客
07-21 1066
动画播放次数 可以具体设置数字限定执行次数。动画时间 以秒为单位设置具体的值。延迟2s后开始 执行 注意：transition 是动画属性的设置。* 注意：如果要设置多条动画效果，需要写在同一个 transform里面。而动画效果的触发，可以设置在特定情况下，比如鼠标悬停。可以具体设置一个属性，比如宽高，背景颜色，动画效果。（2）设置过度需要的时间。将原来的元素大小，设置为原来1.5倍。同时设置，缩放效果，和x轴平移效果。触发动画之后，所有的属性，都可以变化。
html动画效果的使用
nijiang111的博客
11-22 227
1>@keyframes 创建动画语法：@keyframes name{0%{}100%{}中间可以填1%、2%、20%等等……
HTML代码详解：常用标签与样式指南
- Flash：`地址" width="宽度" height="高度">`嵌入Flash动画。 7. **媒体文件**：`文件地址" width="宽度" height="高度" start=mouseover>`动态加载图片或视频。 8. **换行与段落**：` `用于强制换行，`<p>`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值