HTML---利用CSS3制作网页动画

文章目录

  • 目录

    文章目录

    本章目标

     一.CSS3概述

    CSS函数概述

    二.CSS3变形

    transform属性

    translate()：平移函数

     scale()：缩放函数

    rotate()：旋转函数

     skew()：倾斜函数

    三.CSS3过渡 

    四.CSS动画 

    练习

    旋转按钮

本章目标

  • 会使用transfoem 2D 变形设置网页元元素
  • 会使用transition制作过渡动画
  • 会使用animation制作网页动画

 一.CSS3概述

   CSS3是HTML的样式语言，它用于描述和控制HTML文档的外观和布局。CSS3是CSS的最新版本，引入了一些新的特性和模块，以增强样式表的功能和灵活性。

CSS函数概述

CSS函数是一种用于处理CSS属性值的特殊函数。它们可以接受特定的指令（输入参数），并执行指令的相应动作，并返回执行结果，然后将该结果用作CSS属性的值。

函数名(参数1, 参数2, ...)函数名称：函数的名称用于识别和调用特定的函数。例如，rgb()是一个用于设置颜色的函数。参数：函数接受一个或多个参数，用于指定函数执行时的数据。参数可以是固定值（如数字或字符串），也可以是变量或其他表达式。参数之间用逗号分隔。返回值：函数的执行结果可以作为值返回。返回值可以是一个具体的值（如颜色值或长度值），也可以是一个变量。

二.CSS3变形

transform属性

  • CSS3变形是一些效果的集合,如平移，旋转，缩放，倾斜效果。
  • 每个效果都可以称为变形（transform），可以分别操控元素发生平移，旋转，缩放，倾斜等变化。

语法：

transform:[变形函数] *;

 变形函数：

312b76146a5c47aaaf3cb7a41c5c0ac8.png

  •  演示案例：
  • <!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">li{list-style: none;float: left;width: 80px;line-height: 40px;background-color: orange;border-radius: 6px;font-size: 16px;margin-left: 3px;}li a{text-decoration: none;/**去除下划线**/color: #fff;display: block;/**将行元素改变为块元素从而设置高度**/text-align: center;height: 40px;}li a:hover{background-color: rgba(242, 88, 6, 0.87);border-radius: 6px;}</style></head><body><ul><li><a href="#">服装城</a></li><li><a href="#">美妆馆</a></li><li><a href="#">超市</a></li><li><a href="#">全球购</a></li><li><a href="#">闪购</a></li><li><a href="#">团购</a></li><li><a href="#">拍卖</a></li><li><a href="#">金融</a></li></ul></body>
</html>

    9f9b028f112943759ab68c51e6ab2bbc.png

translate()：平移函数

语法：

  • 正号：右，下/ 负号：左，上
li a:hover{ /**正号：右，下 负号：左，上**/transform: translate(4px,4px);}

dff0bce0e2d646f5835d322f1e333e53.png

设置平移函数后点击图标后图标向右下方发生平移，效果如上图。

 scale()：缩放函数

语法：

  • 正号：放大/ 负号：缩小
li a:hover{ /**正号：放大 负号：缩小**/transform: scale(2);}

b5d4bba968c347169f6ea5bea5dd53eb.png

 设置缩放函数后点击图标后图标放大2倍，如上图所示。

rotate()：旋转函数

语法：

<style type="text/css">img:hover{transform: rotate(-90deg);}
</style>

 演示案例：

e3d32a8ee0b34d7892b694a21dbcefd4.png

 设置旋转函数后点击图片后，图片逆时针旋转90°。效果如下图。

e3e2b3d6c3f74b7abbf7184300ef13b4.png

 skew()：倾斜函数

 语法：

li a:hover{transform: skew(40deg,0deg);}

1988ba2c6e1946e796dceb4d2e5292cc.png

 设置倾斜函数后点击图标后图标倾斜，效果如上图所示。

三.CSS3过渡 

transition

  • transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
  • CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡

 

08e5bf53924141ada96b2a715888f9b1.png

  •  函数

0d134689465142d396aebb3a8b750571.png

9c4b951ae0054109b09fb9a467538b76.png

4e2899f0a0a8461790c68123e6628c65.png

00cefc572f0a4f78bd24989d8897267e.png

 触发机制：

30d0d4e0128d40d38d705576be6c67e2.png

 演示案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{width: 500px;height: 31.25rem;background-color: blue;/**针对背景颜色设置过渡动画效果**/transition: background-color 4s ease-in-out 5s ;}/**引入过渡动画效果**/div:hover{background-color: red;}</style></head><body><div></div></body>
</html>

上述代码执行后，边框背景颜色将由蓝色经过5s延迟，最终经过执行时间4s后变为红色。 

四.CSS动画 

调用关键帧
动画名称关键帧 帧名
动画播放状态设置动画重新播放或暂停
动画方式动画实实现的方式(参考过渡动画)
动画开始前/结束后的操作设置动画开始/结束后执行的操作
动画播放方向设置动画正序或倒序播放

 演示案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{width: 200px;height: 200px; background-color: aquamarine;/**调用关键帧**/animation: sp1 3s linear infinite;}/**创建动画关键帧**/@keyframes sp1{0%{transform: translate(100px,0px);}50%{transform: translate(300px,0px);}100%{transform: translate(100px,100px);}}</style></head><body><div></div></body>
</html>

执行后，网页中的框图将从左👉右👉左下👉回到起点。

tupia

练习

9f8392df85c4402fba2f160aa5a80511.png

<html><head><meta charset="utf-8"><title></title><style type="text/css">/**使用结构伪类选择器选中所有偶数子元素 even:偶数的集合**/div img:nth-child(even){width: 200px;}div img:nth-child(odd){width: 300px;}.box{width: 960px;margin: 200px auto;/**盒子居中**/position: relative;}.box img{border: 1px solid #ddd;padding: 10px;/**针对所有img设置绝对定位，使用img浮动**/position: absolute;background: #fff;z-index: 1;transition: all 0.5s ease-in-out; }.box img:nth-child(1){/**针对浮动后的img单独设置偏移量**/top: 0px;left: 300px;transform: rotate(-15deg);/**旋转函数**/}.box img:nth-child(2) {top:-50px;left: 600px;transform: rotate(-20deg);}.box img:nth-child(3) {bottom: 0;right: 0;transform: rotate(15deg);}.box img:nth-child(4) {bottom: 0;left: 400px;transform: rotate(-20deg);}.box img:nth-child(5) {bottom: 0;left: 0;transform: rotate(-30deg);}.box img:nth-child(6) {top: 0;left: 0;transform: rotate(20deg);}.box img:nth-child(7) {top: 0;left: 700px;transform: rotate(20deg);}.box img:nth-child(8) {bottom: -20px;right: 500px;transform: rotate(30deg);}.box img:nth-child(9) {top: 90px;left: 550px;transform: rotate(15deg);}.box img:nth-child(10) {left: 180px;top: 20px;transform: rotate(-10deg);}	.box img:hover{/**设置鼠标选中后的样式**//**设置堆叠的优先级：鼠标点击后优先展示**/z-index: 2;box-shadow: 5px 5px 5px #ddd;/**针对所有的img设置动画样式**/transform: rotate(0deg) scale(1.5); }	</style></head><body><div class="box" id="box"><img src="image/1.jpg" alt=""/><img src="image/2.jpg" alt=""/><img src="image/3.jpg" alt=""/><img src="image/4.jpg" alt=""/><img src="image/5.jpg" alt=""/><img src="image/6.jpg" alt=""/><img src="image/7.jpg" alt=""/><img src="image/8.jpg" alt=""/><img src="image/9.jpg" alt=""/><img src="image/10.jpg" alt=""/></div></body>
</html>

旋转按钮

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{width: 200px; height: 200px;border: 5px solid white;margin: 200px auto;border-radius: 200px;overflow: hidden;transition:transform 4s ease-in-out 4s;}div:hover{transform: scale(2) rotate(270deg);}</style></head><body><div><img src="index1.png" width="200px" height="200px"></div></body>
</html>


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{/*针对所有元素设置内外边距*/padding: 0px;margin: 0px;}body{padding :20px 0px 0px;}li{/*去除无序列表样式：去除列表前的点号*/list-style: none;}#father{width: 665px;margin: 0px auto;font-size: 12px;border: 1px solid #CCCCCC;}#father:after{/**使用after伪类防止父级边框塌陷**/content: '';display: block;clear: both;}#left{float: left;width: 223px;}			#left h3{/*使用结构伪类选择器针对 left边框中所有h3标签设置样式*/font-size: 14px;color: #4b4b4b;margin: 40px 0px 0px 20px;}#left p{margin: 20px 0px 0px 20px;}#left img{margin: 60px 0px 20px 40px;}#right{float: left;width: 440px;}#right li{float: left;width: 218px;height: 150px;border-bottom: 1px solid #CCCCCC;border-left: 1px solid #CCCCCC;}.text{float: left;}.text h3{font-size: 14px;color: #4b4b4b;margin: 20px 0px 0px 20px;}.text p{margin: 10px 0px 0px 20px;}.img{float: right;margin-top: 30px;transition: all 1s ease-in-out ;}.img:hover{transform: translate(-12px,0px);}</style></head><body><div id="father"><div id="left"><h3>超级信用卡</h3><p>线上线下课累计彩贝积分</p><img src="1.bmp"/></div><div id="right"><ul><li><div class="text"><h3>彩贝抢霸</h3><p>每天10点更新</p></div><div class="img"><img src="2.bmp"/></div></li><li><div class="text"><h3>热门优惠券</h3><p>全场免费领取</p></div><div class="img"><img src="3.bmp"/></div></li><li><div class="text"><h3>促销活动</h3><p>汇集全网优惠</p></div><div class="img"><img src="4.bmp"/></div></li><li><div class="text"><h3>精挑细选</h3><p>给你最好的选择</p></div><div class="img"><img src="5.bmp"/></div></li></ul></div></div></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/310852.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Spark作业的调度与执行流程

Spark作业的调度与执行流程

Apache Spark是一个分布式计算框架&#xff0c;用于处理大规模数据。了解Spark作业的调度与执行流程是构建高效分布式应用程序的关键。本文将深入探讨Spark作业的组成部分、调度过程以及执行流程&#xff0c;并提供丰富的示例代码来帮助大家更好地理解这些概念。 Spark作业的组…
阅读更多...
utf8mb4_0900_ai_ci、utf8mb4_0900_as_ci、utf8mb4_0900_as_cs 这三者有什么区别

utf8mb4_0900_ai_ci、utf8mb4_0900_as_ci、utf8mb4_0900_as_cs 这三者有什么区别

utf8mb4_0900_ai_ci, utf8mb4_0900_as_ci, 和 utf8mb4_0900_as_cs 是 MySQL 数据库中使用的字符集和校对规则。这些校对规则决定了如何比较和排序字符数据。它们属于 utf8mb4 字符集&#xff0c;这是 UTF-8 编码的超集&#xff0c;支持最多 4 个字节的字符&#xff0c;能够存储…
阅读更多...
MySQL多表查询的方法（含例子）

MySQL多表查询的方法（含例子）

我们查两张及以上表的时候&#xff0c;普通的查询语法(select * from 表名&#xff09;不能发挥作用。下面我演示两张表和三张表的查询方法。 前提&#xff1a; 如图存在三张表a&#xff0c;b&#xff0c;c&#xff1a;a表是学生基础信息&#xff0c;b表是教师学科信息&#…
阅读更多...
校园外卖趋势洞察与未来预测系统

校园外卖趋势洞察与未来预测系统

校园外卖趋势洞察与未来预测系统 项目概述数据集技术栈功能特点创新点实施步骤 项目概述 本项目旨在打造一套基于Flask和Echarts的校园外卖趋势洞察与未来预测系统。通过深度分析模拟校园外卖数据集&#xff0c;结合机器学习算法&#xff0c;我们致力于提供对学生外卖点餐规律…
阅读更多...
【基础】【Python网络爬虫】【3.chrome 开发者工具】（详细笔记）

【基础】【Python网络爬虫】【3.chrome 开发者工具】（详细笔记）

Python网络爬虫基础 chrome 开发者工具元素面板&#xff08;Elements)控制台面板&#xff08;Console&#xff09;资源面板&#xff08;Source&#xff09;网络面板&#xff08;Network&#xff09;工具栏Requests Table详情 chrome 开发者工具 ​ 当我们爬取不同的网站是&…
阅读更多...
Android studio 多界面的跳转和返回

Android studio 多界面的跳转和返回

一、新建一个Empty Activity项目&#xff1a; 二、修改activity_main.xml布局文件&#xff1a; <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android"http://schemas.android.com/a…
阅读更多...
unity控制摄像机几种视角实现方式

unity控制摄像机几种视角实现方式

目录 1、按下鼠标右键可以实现摄像机上下左右旋转 2、自由视角 3、摄像头跟随视角 4、跟随自由视角 5、第一人称跟随视角 python学习汇总连接&#xff1a; 1、按下鼠标右键可以实现摄像机上下左右旋转 这段代码定义了一个名为CameraRotate的脚本&#xff0c;用于控制摄像…
阅读更多...
【Python特征工程系列】教你利用XGBoost模型分析特征重要性（源码）

【Python特征工程系列】教你利用XGBoost模型分析特征重要性（源码）

这是Python特征工程系列原创文章&#xff0c;我的第186篇原创文章。 一、问题 应用背景介绍&#xff1a; 如果有一个包含数十个甚至数百个特征的数据集&#xff0c;每个特征都可能对你的机器学习模型的性能有所贡献。但是并不是所有的特征都是一样的。有些可能是冗余的…
阅读更多...
网络安全—认证技术

网络安全—认证技术

文章目录 加密认证对称密钥体制公钥密码体制公钥的加密公钥身份认证和加密 鉴别码认证MAC鉴别码 报文摘要认证认证 加密只认证数字签名 通过了解以前前辈们使用的消息认证慢慢渐进到现代的完整的认证体系。所以在学习的时候也很蒙圈&#xff0c;因为前期的很多技术都是有很严重…
阅读更多...
数据结构：单调栈

数据结构：单调栈

1.单调栈 单调栈是一种数据结构&#xff0c;其中存放的数据应该是有序的&#xff0c;所以单调栈也有单调递减栈和单调递增栈 单调递增栈&#xff1a;栈顶到栈底的元素大小是从小到大 单调递减栈&#xff1a;栈顶到栈底的元素大小是从大到小 单调栈主要就是用来求一个给定序列中…
阅读更多...
GenerateBlocks Pro插件 构建更好的WordPress网站

GenerateBlocks Pro插件 构建更好的WordPress网站

GenerateBlocks Pro插件 构建更好的WordPress网站 GenerateBlocks Pro插件是一个 WordPress 插件&#xff0c;几乎可以完成任何事情&#xff0c;可让您创建轻量级和多功能的网站。由与流行且快速的 GeneratePress 主题相同的创作者构建&#xff0c;该插件不负众望。使用 Genera…
阅读更多...
数字孪生技术的未来预测

数字孪生技术的未来预测

这种二维地图与摄像头关联&#xff0c;从实用角度来说&#xff0c;是不是比那些VRGIS和三维实景效果要好的多&#xff1f;也更能够还原现场情况,最重要的是成本也会低很多&#xff01;​​​ 那些用预先采集数据的方式&#xff08;比如倾斜摄影和3D建模&#xff09;来还原真实现…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023