HTML5动画实战——元素进入并给一个元素设置两个动画

已于 2022-04-03 13:45:32 修改
阅读量859 收藏 1
点赞数 1
分类专栏： 前端demo 文章标签： css html5 js
于 2020-12-27 19:28:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45870740/article/details/111824743
版权

动画实战，可以直接用

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body>* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			
			.class1{
				position: relative;
				opacity: 0;
				animation: pingyishang 2s ease;
				animation-fill-mode: both;
				border-radius: 10px;
			}
			.class2{
				position: relative;
				animation: dong 2s linear;
				animation-iteration-count: infinite;
				border-radius: 10px;
				animation-direction: alternate;
			}

			#main {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-around;
				width: 100%;
				margin: 0 auto;
				margin-top: 50px;
				padding: 5px;

			}

			#div1 {
				background-color: deepskyblue;
				margin-right: 5px;
				flex: 1;
				transition: all 0.3s; 
			}
			#div1:hover{
				box-shadow: 1px 0 5px deepskyblue;
				zoom: 1.01;
				z-index: -1;
				transform: scale(2.0,2.0)
				
			}
			#div2 {
				background-color: orangered;
				animation-delay: 0.8s;
				margin-left: 5px;
				margin-right: 5px;
				flex: 1;
			}
			#div2:hover{
				box-shadow: 1px 0 5px orangered;
			}
			#div3 {
				background-color: yellowgreen;
				animation-delay: 1.6s;
				margin-left: 5px;
				flex: 1;
			}
			#div3:hover{
				box-shadow: 1px 0 5px yellowgreen;
			}
			@keyframes pingyishang {
				from {
					transform: translate(0, -100%);
					opacity: 0.0;
				}

				to {
					transform: translate(0, 0);
					opacity: 0.8;
				}
			}
			@keyframes dong{
				from{
					transform: translate(0,0);
					opacity: 1.0;
				}
				
				10%{
					transform: translate(0,1%);
					opacity: 1.0;
				}
				20%{
					transform: translate(0,2%);
					opacity: 1.0;
				}
				40%{
					transform: translate(0,3%);
					opacity: 1.0;
				}
				60%{
					transform: translate(0,0%);
					opacity: 1.0;
				}
				80%{
					transform: translate(0,-2%);
					opacity: 1.0;
				}
				to{
					transform: translate(0,-3%);
					opacity: 1.0;
				}
			}
			.title {
				height: 100px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-left: 10px;
				margin-top: 10px;
				margin-right: 10px;
				background-color: white;
				border-radius: 10px;
				padding: 5px;

			}

			.img_div {
				width: 100px;
				height: 100px;
				background-color: #000000;
				border-radius: 5px;
				transition: all 0.3s;
			}
			.img_div:hover{
				transform: scale(1.05,1.05);
			
			}

			h3 {
				margin-left: 20px;
				margin-bottom: auto;
			}

			#content_hr {
				height: 2px;
				border:none;
				margin-left: 10px;
				margin-right: 10px;
				background-color: rgb(212,225,238);
			}

			#detail {
				position: absolute;
				left: 10px;
				right: 10px;
				bottom: 10px;
				top: 140px;
				
				background-color: white;
				border-radius: 10px;
				padding-left: 10px;
				padding-right: 10px;
				padding-top: 0;
				
			}
			
			#block{
				display: flex;
				flex-direction: row;
				margin-left: 15px;
				align-items: center;
			}
			#resource-about{
				width: auto;
				margin-right: auto;
				text-align: center;
			}
			#p-price{
				margin-left: 5px;
				color: black;
				font-weight: bold;
			}
			#p-lable{
				color: dimgrey;
				font-size: 12px;
				
			}
			h3:hover,
			#p-price:hover{
				transform: scale(1.05,1.05);
			}
			#fenge-hr{
				
				width: 1px;
				background-color: lightgrey;
				border: none;
			}
			#view-resource-btn{
				transform: translate(0,60%);
				height: 40px;
				width: 100px;
				border: none;
				outline: none;
				background-color: slategrey;
				color: white;
				border-radius: 5px;
				font-size: 14px;
				 
			}
			#view-resource-btn:hover{
				box-shadow: 1px 1px 2px  lightgrey;
				font-size: 14.5px;
				opacity: 0.7;
			}
			h4{
				color: dimgray;
			}
		</style>
	</head>
	<body>
		<div id="main" class="class1">
			<div id="div1"class="class1">
				<div class="title">
					<div class="img_div"></div>
					<div id="resource-about">
						<h3>{{resourceName}}</h3>
						<div id="block">
							<p id="p-lable">积分:$</p>
							<p id="p-price">{{resourcePrice}}</p>
						</div>
					</div>
					<button id="view-resource-btn">查看资料</button>

				</div>
				<hr id="content_hr" />
				<div id="detail">
					<h4>资料详情</h4>
					<p>{{resourceDetail}}</p>
				</div>
			</div>
			<hr id="fenge-hr"/>
			<div id="div2"class="class1">
				<div class="title">
					<div class="img_div"></div>
					<div id="resource-about">
						<h3>{{resourceName}}</h3>
						<div id="block">
							<p id="p-lable">积分:$</p>
							<p id="p-price">{{resourcePrice}}</p>
						</div>
					</div>
					<button id="view-resource-btn">查看资料</button>
				
				</div>
				<hr id="content_hr" />
				<div id="detail">
					<h4>资料详情</h4>
				</div>
			</div>
			<hr id="fenge-hr" />
			<div id="div3"class="class1">
				<div class="title">
					<div class="img_div"></div>
					<div id="resource-about">
						<h3>{{resourceName}}</h3>
						<div id="block">
							<p id="p-lable">积分:$</p>
							<p id="p-price">{{resourcePrice}}</p>
						</div>
					</div>
					<button id="view-resource-btn">查看资料</button>
				</div>
				<hr id="content_hr" />
				<div id="detail">
					<h4>资料详情</h4>
				</div>
			</div>
		</div>
		<script>
			var height = window.innerHeight
			var width = document.body.clientWidth
			// var hr = document.getElementsByTagName("hr")
			var title = document.getElementsByClassName("title")
			// hr.height = height + "px"
			var div_height = height - 100
			var div_width = (width - 80) / 3
			console.log(height + " " + width)
			var main = document.getElementById("main")
			main.style.height = div_height+"px"
			main.style.width = width - 80+"px"
			var div1 = document.getElementById("div1")
			div1.style.height = div_height+"px"
			div1.style.width = div_width+"px"
			var div2 = document.getElementById("div2")
			div2.style.height = div_height+"px"
			div2.style.width = div_width+"px"
			var div3 = document.getElementById("div3")
			div3.style.height = div_height+"px"
			div3.style.width = div_width+"px"
			// div1.addEventListener("webkitAnimationEnd",function(){
			// 	div1.setAttribute("class","class2")
				
			// })
			// div2.addEventListener("webkitAnimationEnd",function(){
				
			// 	div2.setAttribute("class","class2")
				
			// })
			// div3.addEventListener("webkitAnimationEnd",function(){
				
			// 	div3.setAttribute("class","class2")
			// })
			div2.addEventListener("webkitAnimationEnd",function(){
				div1.setAttribute("class","class2")
				div2.setAttribute("class","class2")
				div3.setAttribute("class","class2")
			})
		</script>
	</body>
</html>
是光の谢宣骞
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5前端_高级实战案例_特效动画_卡片翻转时钟（css+js）.rar
11-01
本篇将深入探讨一个典型的前端实战案例——卡片翻转时钟，它通过巧妙地结合CSS和JS，为用户带来独特的视觉体验。这个案例对于初级前端工程师来说是绝佳的学习材料，它展示了如何用极简的代码实现复杂的功能，并且...
css3动画animation基础详解,给元素添加多个动画时动画不分先后同时执行
weixin_44011751的博客
07-21 5761
效果如图: 上面添加了两个动画,一为旋转,二为变色,当给section元素添加这两个动画时,两个动画不分先后同时执行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2D基础动画</title> <style> html{ height: 100%;
CSS3中Animation为同一个元素添加多个动画效果
weixin_30917213的博客
11-06 2119
CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法，就是说一个元素，只能给它定义一个动画效果，不能同时定义。 需求说明比如说，我想实现一个这样的动画效果: 一颗星星从上往下滑落，当滑落到指定位置时开始闪烁 这里就用到了两个动画效果: 1. 从上往下滑落 (单次动画) 2. 闪烁 (循环动画) 因为 CSS3 Animation 是不能给星星这个元素同时定义这两...
html一个页面多个动画,css3 同时加载两个动画_html/css_WEB-ITnose
weixin_39531992的博客
06-03 726
最近在做H5，遇到这样的需求(如题)先上一部分代码：.cur .p1d1d4{width: 3rem;margin: 2rem 5.3rem 0 0;-webkit-animation: p1d1d4 1s ease-out;animation: p1d1d4 1s ease-out;}@keyframes p1d1d4 {0% {margin: 2rem 10rem 0 0;}100% {mar...
CSS-三角形的div框框
LuckyGuyy的博客
11-28 405
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
css3中的animation动画
csdncsdn9876的博客
06-16 321
首先上一张图 上图对animation所对应的参数都写的很清楚了！我们只需要自己定义一个动画名字，然后给animation-name调用就可以了！ @ keyframs  动画名｛         0%｛width：30px｝         20%{width : 100px}        ......        100%{width : 300px} ｝
CSS3两个动画顺序衔接播放
weixin_34249678的博客
08-11 2276
问题描述： 第一个动画先播放，播放完成后，第二个动画紧接着播放。 解决办法： 1. 将第二个的延迟时间（animation-delay） 设置成第一个的持续时间( animation-duration ); 2.多个动画应用时用逗号分隔开; 此时，CSS3的动画代码就要分开写了，不能再简写了，诸如animation:rotate-back 10000ms linear infinite...
Android 动画（二） 实战演示——仿网易新闻安卓端菜单栏动画
12-14
2. **初始化动画**：在Activity或Fragment的`onCreate()`方法中，为每个菜单项设置进入动画。使用`ObjectAnimator`或`ValueAnimator`创建动画实例，指定动画的属性（如平移、缩放等）和持续时间。 ```java ...
安卓Android源码——一个Demo搞定30个控件.zip
10-10
这份"安卓Android源码——一个Demo搞定30个控件.zip"压缩包文件，旨在提供一个全面的示例，帮助开发者一次性了解并实践三十种常见的Android UI控件。通过这个Demo，开发者可以深入理解每个控件的功能、用法以及它们...
CSS3 @keyframes简单动画实现
09-24
主要介绍了CSS3 @keyframes简单动画实现的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Flutter之商用项目实战——直播回放
06-17
【Flutter之商用项目实战——直播回放】是一个深入探讨如何使用Flutter进行商用项目开发的教程。Flutter是由Google推出的开源UI工具包，旨在帮助开发者构建高性能、高保真度的跨平台移动应用，支持iOS和Android两个...
win8开发参考书——用HTML5和JAVESCRIPT开发win8应用
10-31
《Win8开发参考书——用HTML5和JAVESCRIPT开发Win8应用》是一本由微软内部专家亲述，深入浅出地介绍了如何利用HTML5和JavaScript开发吸引人的Windows 8应用的专业书籍。本书不仅提供了丰富的理论知识，还涵盖了实际...
CSS3动画进阶：tranform与keyframes 组合动画
supremeJacob的博客
11-19 821
场景 原型链接： https://qiniu-static.moyuvedio.com/video/magicBox.MP4 公司最近有个盲盒活动，要求h5链接上需要放个盲盒动画，实际可以使用gif或json代替，但为了想挑战下自己，又想减轻小姐姐的设计任务，这次活动的动画决定全用原生H5支持 技术分析 此次动画涉及：移动、渐变、漂浮、旋转，基本上都是属于一些常规的动画，并没有涉及到细节动画，所以用原生肯定是没有问题的，唯一的一个难点就在于不同动画间需要衔接，而且要衔接得很自然 技术考虑：CSS3之 ani
html怎么为标签添加动画效果,CSS3使用AnimationEnd为同一个元素添加多个动画效果...
weixin_39559097的博客
06-03 869
webkitAnimationEnd#div{ width:200px; height:200px; background:#f60; margin:100px auto;}.fade{ -webkit-animation: fadeOut 2s 1 ease-in-out;}.change{ -webkit-animation: transform 1s 2 ease; }@-webkit-ke...
关于HTML动画效果
weixin_44549449的博客
01-18 728
关于HTML动画效果 一． 动画的位移 表示的是，一个物体当前位置位移到另一个位置而产生的动画效果，如 从0%时background背景我，到100%时background的背景你，而产生位移。 二． 动画在位移时物体的变化 就是说，物体在移动的时候不停的发生形状的改变 物体形状改变时，会有一段从0%25%50%变化的过程 Span为物体的主体标签，transform是初始位置anima...
css3 同时加载两个动画
weixin_30492601的博客
03-13 677
最近在做H5，遇到这样的需求（如题） 先上一部分代码： .cur.p1d1d4{ width:3rem; margin:2rem5.3rem00; -webkit-animation:p1d1d41sease-out; animation:p1d1d41sease-out; } @keyframesp1d1d4{ 0%{ ...
css @keyframes配合animation 简单动画效果
guizi0809的博客
11-16 560
animation 属性是一个简写属性，用于设置六个动画属性： 语法： animation: name duration timing-function delay iteration-count direction 属性 可选值 描述 animation-name 规定需要绑定到选择器的 keyframe 名称 animation-duration 规定完成动画所花费的时间 animation-timing-function linear | ease | ease-in
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 319
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
css实现线条中间高亮，左右两边模糊（linear-gradient的运用）
最新发布
贵林之恋的博客
07-24 223
效果： CSS实现边框底部渐变色的方法:(最简单的一种) 参考文章：CSS实现边框底部渐变色的4种方法_css下边框渐变-CSDN博客
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值