CSS3 动画案例

news2024/11/13 7:58:19

文章目录

    • 变形效果案例
      • 照片墙
    • 过渡效果案例
      • 鼠标移动显示内容
      • 图片文字滑动效果
      • 白光闪过效果
      • 手风琴效果
    • 动画案例
      • 脉冲动画
      • loading效果
      • 灯光闪烁
    • 动画代码

变形效果案例

照片墙

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#container {
				position: relative;
				width: 800px;
				height: 600px;
				margin: 0 auto;
				background-color: #f4f1d2;
			}

			img {
				position: absolute;
				padding: 10px;
				background-color: white;
			}

			img:hover {
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			}

			#container img:first-child {
				left: 100px;
				top: 60px;
				transform: rotate(30deg);
			}

			#container img:nth-child(2) {
				left: 300px;
				top: 60px;
				transform: rotate(-30deg);
			}

			#container img:nth-child(3) {
				left: 500px;
				top: 60px;
				transform: rotate(30deg);
			}

			#container img:nth-child(4) {
				left: 100px;
				top: 240px;
				transform: rotate(-30deg);
			}

			#container img:nth-child(5) {
				left: 300px;
				top: 240px;
				transform: rotate(0);
			}

			#container img:last-child {
				left: 500px;
				top: 240px;
				transform: rotate(30deg);
			}
		</style>
	</head>
	<body>
		<div id="container">
			<img src="img/haizei1.png" alt="" />
			<img src="img/haizei2.png" alt="" />
			<img src="img/haizei3.png" alt="" />
			<img src="img/haizei4.png" alt="" />
			<img src="img/haizei5.png" alt="" />
			<img src="img/haizei6.png" alt="" />
		</div>
	</body>
</html>

在这里插入图片描述

过渡效果案例

鼠标移动显示内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#container {
				width: 300px;
				height: 20px;
				padding: 20px;
				border: 1px solid silver;
				color: rgba(0, 0, 0, 0.7);
				cursor: pointer;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				transition: all 0.5s linear 0s;
			}

			#container:hover {
				height: 150px;
				background-color: azure;
				white-space: normal;
			}
		</style>
	</head>
	<body>
		<div id="container">
			hello这是一些数据。 hello这是一些数据。 hello这是一些数据。 hello这是一些数据。 hello这是一些数据。 hello这是一些数据。 hello这是一些数据。
		</div>
	</body>
</html>

在这里插入图片描述

图片文字滑动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#info {
				width: 760px;
				margin: 0 auto;
			}

			.wrap {
				width: 220px;
				height: 330px;
				float: left;
				position: relative;
				overflow: hidden;
			}

			.wrap img {
				border: 0;
				width: 220px;
				height: 330px;
			}

			.wrap p {
				display: block;
				width: 220px;
				height: 330px;
				position: absolute;
				left: 0;
				top: 300px;
				background-color: rgba(0, 0, 0, 0.3);
				font-size: 12px;
				color: white;
				padding: 0;
				margin: 0;
				line-height: 16px;
				transition: all 0.6s ease-in-out;
			}

			.wrap p b {
				display: block;
				font-size: 22px;
				color: #fc0;
				text-align: center;
				margin: 0%;
				padding: 0%;
				line-height: 30px;
			}

			.wrap p span {
				display: block;
				padding: 10px;
				line-height: 20px;
			}

			.wrap:hover p {
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="info">
			<div class="wrap">
				<img src="img/pic1.jpg" alt="">
				<p>
					<b>hello A</b>
					<span>这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。</span>
				</p>
			</div>
			<div class="wrap">
				<img src="img/pic2.jpg" alt="">
				<p>
					<b>hello B</b>
					<span>这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。</span>
				</p>
			</div>
			<div class="wrap">
				<img src="img/pic3.jpg" alt="">
				<p>
					<b>hello C</b>
					<span>这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。</span>
				</p>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

白光闪过效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>白光闪过效果</title>
		<style type="text/css">
			#wrapper {
				position: relative;
				width: 240px;
				height: 180px;
				cursor: pointer;
			}

			#flash {
				position: absolute;
				top: 0;
				left: -120px;
				width: 100px;
				height: 100%;
				background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0)0%, rgba(255, 255, 255, 0.5)50%, rgba(255, 255, 255, 0)100%);
				transform: skewX(-30deg);
			}

			#wrapper:hover #flash {
				left: 300px;
				transition: all 0.5s ease-in-out;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="flash"></div>
			<img src="../img/person.png">
		</div>
	</body>
</html>

在这里插入图片描述

手风琴效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>手风琴效果</title>
		<style type="text/css">
			#box {
				width: 300px;
				height: 100px;
				overflow: hidden;
			}

			.item {
				float: left;
				width: 20%;
				height: 100%;
				transition: all 0.5s;
			}

			.item:nth-child(1) {
				width: 40%;
				background-color: red;
			}

			.item:nth-child(2) {
				background-color: orange;
			}

			.item:nth-child(3) {
				background-color: yellow;
			}

			.item:nth-child(4) {
				background-color: green;
			}

			#box:hover div {
				width: 20%;
			}

			#box div:hover {
				width: 40%;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
	</body>
</html>

在这里插入图片描述

动画案例

脉冲动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>脉冲动画</title>
		<style type="text/css">
			@keyframes pulsating {
				0% {
					transform: scale(1);
					opacity: 0.8;
				}

				20% {
					transform: scale(1);
					opacity: 0.6;
				}

				40% {
					transform: scale(1.2);
					opacity: 0.4;
				}

				60% {
					transform: scale(1.4);
					opacity: 0.2;
				}

				80% {
					transform: scale(1.6);
					opacity: 0.1;
				}

				100% {
					transform: scale(1.8);
					opacity: 0.0;
				}
			}

			#wrapper {
				position: relative;
				display: inline-block;
				margin: 100px;
			}

			#img {
				width: 50px;
				height: 50px;
			}

			#circle {
				position: absolute;
				top: -12px;
				left: -12px;
				width: 50px;
				height: 50px;
				border: 12px solid #a8e957;
				border-radius: 50%;
				opacity: 0;
			}

			#wrapper:hover #circle {
				animation: pulsating 1s ease-out infinite;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="circle"></div>
			<img id="img" src="../img/icon.png">
		</div>
	</body>
</html>

在这里插入图片描述

loading效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>loading效果</title>
		<style type="text/css">
			@keyframes loading {
				0% {
					transform: scaleY(1);
				}

				50% {
					transform: scaleY(0.5);
				}

				100% {
					transform: scaleY(1);
				}
			}

			#box {
				position: relative;
				margin: 100px;
			}

			#box>i {
				position: absolute;
				top: 0;
				width: 5px;
				height: 40px;
				background-color: hotpink;
				border-radius: 6px;
			}

			#box>i:nth-child(1) {
				left: 0;
				animation: loading 1s ease-in 0.1s infinite;
			}

			#box>i:nth-child(2) {
				left: 10px;
				animation: loading 1s ease-in 0.3s infinite;
			}

			#box>i:nth-child(3) {
				left: 20px;
				animation: loading 1s ease-in 0.6s infinite;
			}

			#box>i:nth-child(4) {
				left: 30px;
				animation: loading 1s ease-in 0.3s infinite;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<i></i>
			<i></i>
			<i></i>
			<i></i>
		</div>
	</body>
</html>

在这里插入图片描述

灯光闪烁

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>灯光闪烁</title>
		<style type="text/css">
			@keyframes anim {
				from {
					opacity: 1;
				}

				to {
					opacity: 0;
				}
			}

			.container {
				position: relative;
				width: 100px;
				margin: 100px;
				text-align: center;
			}

			.dengpao {
				position: absolute;
				width: 70%;
				top: 16px;
				left: 65px;
			}

			.guang {
				position: absolute;
				width: 100%;
				animation: anim 1s ease 0s infinite alternate;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img class="dengpao" src="../img/dengpao.png" alt="">
			<img class="guang" src="../img/guang.png" alt="">
		</div>
	</body>
</html>

在这里插入图片描述

动画代码

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ESP IDF:观察者Observer用例实现

ESP IDF:观察者Observer用例实现

ESP IDF:观察者 Observer用例实现 #include <stdio.h> // #include #include // using namespace std; //抽象的英雄 抽象的观察者 Observer class AbstractHero { public: virtual void Update() 0; }; std::list<AbstractHero*> mlist; std::list<Abstr…
阅读更多...
Linux:vim工具

Linux:vim工具

文章目录一.vim简单介绍1.1vim使用1.2vim常见的模式二.vim中的指令2.1set nu/set nonu(调出/取消行号)先导&#xff1a;下面这些命令都是在命令模式下运行2.2yy/p(复制/粘贴)2.3dd(剪切)2.4u/ctrl r(撤销/把撤销撤销)2.5shift g/g g(光标定位末尾/光标定位第一行)2.6shift 4/sh…
阅读更多...
Docker高级篇_mysql主从复制、redis集群

Docker高级篇_mysql主从复制、redis集群

目录Docker复杂安装详说安装mysql主从复制安装redis集群3主3从Redis集群&#xff08;基于哈希槽分区&#xff09;主从容错切换迁移主从扩容主从缩容Docker复杂安装详说 安装mysql主从复制 1.新建主服务容器3307 docker run -d -p 3307:3306 --privilegedtrue -v /zhoujmi/my…
阅读更多...
Spring Framwork_01

Spring Framwork_01

Core Container(核心容器):管理对象的技术 1.Beans 2.Core 3.Context 4.SpEL Core&#xff1a;核心工具包&#xff0c;包括字节码操作cglib、asm&#xff0c;资源的抽象Resource&#xff0c;对象实例化化工具等等。 Beans&#xff1a;Bean 的定义、Bean 的创建以及对 Bean 的解…
阅读更多...
【自学Java】Java循环结构

【自学Java】Java循环结构

Java循环结构 Java while教程 在 Java 语言 中&#xff0c;关键字 whie 用于判断一个判断条件&#xff0c;如果返回值都是 true&#xff0c;那么它会一直执行。与 if 不同之处在于&#xff0c;if 只会执行一次&#xff0c;而 while 中&#xff0c;只要条件满足&#xff0c;会…
阅读更多...
【迅为iMX6Q】开发板 u-boot 2015.04 SD卡 启动

【迅为iMX6Q】开发板 u-boot 2015.04 SD卡 启动

前言 最近为了深入研究 嵌入式Linux 的开发&#xff0c;把【迅为iMX6Q】开发板 找了出来&#xff0c;重新搭建了开发编译环境 【迅为iMX6Q】开发板 的 u-boot&#xff0c;放在了 android 源码中&#xff0c;可以从 【迅为iMX6Q】开发板 网盘资料里&#xff0c;下载 iTOP-iMX6_…
阅读更多...
Windows下redis环境搭建（可查看源码及Debug调试进入源码）及简易使用

Windows下redis环境搭建（可查看源码及Debug调试进入源码）及简易使用

Windows下redis环境搭建&#xff08;可查看源码及Debug调试进入源码&#xff09;及简易使用 在我们使用redis进行学习的过程中&#xff0c;在Windows平台上进行学习是一个非常高效的选择&#xff0c;因此下面介绍如何在Windows环境下搭建一个redis环境&#xff08;即可Debug调试…
阅读更多...
数据结构之入门二叉树

数据结构之入门二叉树

文章目录前言1.二叉树的知识铺垫2.二叉树的具体实现1.递归实现前中后序遍历2.其它相关接口的实现1.求二叉树的节点个数2.求叶子节点个数3.二叉树查找值为x的节点3.求树高度4.求k层节点的个数5.层序遍历6.判断二叉树是否是完全二插树3.总结前言 之前用数组实现了一种特殊的完全…
阅读更多...
解决word写论文改成两栏时mathtype的公式无法居中的问题

解决word写论文改成两栏时mathtype的公式无法居中的问题

想要的格式 投论文的时候&#xff0c;有很多期刊的要求是两栏排版&#xff0c;比如中国电机工程学报 理论上&#xff0c;用mathtype输入的公式&#xff0c;会根据word的格式自动地调整自己的缩进量&#xff08;更确切地说&#xff0c;是会自动调整制表位&#xff09;。比如下…
阅读更多...
新手入门指南之玩转蓝桥云课（线上运行虚拟机，c++，Java，Javaweb，python环境，以及如何成功利用命令行运行这些环境）

新手入门指南之玩转蓝桥云课（线上运行虚拟机，c++，Java，Javaweb，python环境，以及如何成功利用命令行运行这些环境）

目录 你好&#xff0c;蓝桥云课 &#x1f44b; &#x1f332;欢迎来到蓝桥云课&#x1f332; 为什么要用 Linux 实验精神 蓝桥云课课程 加入课程 开始实验 实验环境 讨论发帖 实验报告 有效学习时间 我们的目标是星辰大海 &#x1f350;Linux 桌面环境使用指南&…
阅读更多...
【C++ Primer】阅读笔记（4）：string

【C++ Primer】阅读笔记（4）：string

目录 简介初始化string对象初始化方法直接初始化与拷贝初始化string对象上的操作操作方式读取string对象(cin>>s、cout<<s)getline(is,s)empty()size()string对象的比较(>、<、<=、>=)两个string对象相加(s1+s2)字面值与string对象相加遍历string对象参…
阅读更多...
Jenkins复制和导出导入job

Jenkins复制和导出导入job

一、同一个Jenkins中复制job如果是同一个Jenkins复制job&#xff0c;只需要在创建Job时&#xff0c;选择Copy from一个已有的job即可。也就是在下方上面的红框中输入你新建job的名称&#xff0c;在下面的红框中输入你想要复制的job(已经建好的job)&#xff0c;然后点击确定。这…
阅读更多...
【C初阶】实用调试技巧

【C初阶】实用调试技巧

实用调试技巧前言一、什么是bug&#xff1f;二、调试是什么&#xff1f;&#xff08;一&#xff09;调试&#xff08;二&#xff09;调试的基本步骤&#xff08;三&#xff09;Debug和Release的介绍。1.简单介绍三、Windows环境调试介绍&#xff08;一&#xff09;调试环境的准…
阅读更多...
【SAP Abap】SAP ALV开发（REUSE_ALV_GRID_DISPLAY_LVC）全网最详细 DEMO

【SAP Abap】SAP ALV开发（REUSE_ALV_GRID_DISPLAY_LVC）全网最详细 DEMO

SAP ALV开发&#xff08;REUSE_ALV_GRID_DISPLAY_LVC&#xff09;全网最详细 DEMO1、ALV 简介2、演示程序1、ALV 简介 ALV 报表程序&#xff0c;是我们在 SAP 项目中最常开发的程序类型。 SAP 系统提供了三种 ALV 实现方式&#xff0c;分别是&#xff1a; FM ALV&#xff0c;…
阅读更多...
win10下安装多个JDK配置方法

win10下安装多个JDK配置方法

环境变量配置 此电脑 --- 属性 -- 高级系统设置 -- 环境变量 -- 系统变量 -- 新建 1、配置JAVA_HOME JAVA6_HOME jdk1.6的安装路径 JAVA8_HOME jdk1.8的安装路径 JAVA_HOME %JAVA8_HOME% 两个%表示引用变量的值&#xff0c;直接用JAVA_HOME&#xff0c;就能表示一连串长…
阅读更多...
SAR影像变化检测方法之（SAR_CD_DDNet（无监督变化检测））论文阅读

SAR影像变化检测方法之（SAR_CD_DDNet（无监督变化检测））论文阅读

一、论文信息 1、论文标题&#xff1a;Change Detection in Synthetic Aperture Radar Images Using a Dual-Domain Network 2、代码链接&#xff1a;https://github.com/summitgao/SAR_CD_DDNet 二、摘要 合成孔径雷达(SAR)图像的变化检测是一项关键而具有挑战性的任务。现…
阅读更多...
Android---BottomAppBar

Android---BottomAppBar

目录 BottomAppBar FloatingActionButton UI 完整代码 BottomAppBar Material Design 的一个重要特征是设计 BottomAppBar 。可适应用户不断变化的需求和行为。因此&#xff0c;BottomAppBar 是一个从标准物质指导的演变。它更注重功能&#xff0c;增加参与…
阅读更多...
ansible 第三天

ansible 第三天

1.挂载本地光盘到/mnt 2.配置yum源仓库文件通过多种方式实现 仓库1 &#xff1a; Name: RH294_Base Description&#xff1a; RH294 base software Base urt: file:///mnt/BaseOS 不需要验证钦件包 GPG 签名 启用此软件仓库 仓库 2: Name: RH294_Stream Description &#xff1…
阅读更多...
Android Studio 用WIFI无线调试adb (3种方法)

Android Studio 用WIFI无线调试adb (3种方法)

最近数据线一直被boss借走&#xff0c;一旦借走就无法调试了&#xff0c;所以就打算不用数据线调试了&#xff0c;使用WIFI进行调试。 一、命令 1、首先配置adb环境变量 首先找到andoridSDK的路径中的platform-tools文件夹 &#xff0c;将他的路径复制我的是 C:\Users\YiShi…
阅读更多...
365天深度学习训练营-第P7周：YOLOv5-Backbone/YOLOv5-C3模块实现

365天深度学习训练营-第P7周：YOLOv5-Backbone/YOLOv5-C3模块实现

目录 一、前言 二、我的环境 三、代码实现 1、C3模块 2、Backbone模块 一、前言 >- **&#x1f368; 本文为[&#x1f517;365天深度学习训练营](https://mp.weixin.qq.com/s/xLjALoOD8HPZcH563En8bQ) 中的学习记录博客** >- **&#x1f366; 参考文章&#xff1a;36…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023