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

HTML常用动画

2024-06-02 09:06:31 前端知识 前端哥 305 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基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

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

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

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

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

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