菜单 搜索
首页 前端知识 HTML常用动画

HTML常用动画

2024-06-02 09:06:31 前端知识 前端哥 296 242 我要收藏

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

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%;

}

转载请注明出处或者链接地址：https://www.qianduange.cn//article/10474.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

【基于HTML5的网页设计及应用】——数组的forEach方法

2024-06-08 00:06:12

无涯教程-HTML5 - 表单标签

2024-06-08 00:06:06

2024年最全【HTML5】逐步分析如何实现拖放功能，2024年最新Web前端技术类校招面试题汇总

2024-06-07 23:06:31

基于HTML5的美食家网站设计(源码 开题)

2024-06-07 23:06:20

HTML5基础2

2024-06-07 23:06:19

HTML5期末考核大作业，网站——旅游景点。 学生旅行 游玩 主题住宿网页 (3)

2024-06-07 23:06:10

【前端开发必知】HTML特殊字符转义及编码

2024-06-07 23:06:09

HTML中Canvas关键知识点总结

2024-06-07 23:06:09

HTML做一个个人博客页面（纯html代码）

2024-05-11 23:05:58

最新【HTML基础篇002】HTML之form表单超详解_html form表单(1)，【好文推荐】

2024-06-07 23:06:58

大家推荐的文章
1

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
2

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
3

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
4

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
5

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
6

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
7

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
8

UE4.27支持HTML5

2024-05-07 13:05:261000
9

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
10

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！