【WEB项目】魔法卡牌

已于 2022-09-27 12:45:53 修改
阅读量233 收藏
点赞数
分类专栏： WEB项目 文章标签： html css 炫酷 web 卡牌
于 2019-11-26 17:11:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37443884/article/details/103259136
版权

样式分析

魔法卡牌1
魔法卡牌2
从图中我们可以看出，本项目是将鼠标移入图片中，则图片将一张一张展开，实现一个很炫酷的效果

框架分析

不难发现，此页面由11张图片组成，并且在未展开前，所有图片堆叠在一起，由此可见，此页面是在一个“盒子”中放入11张图片，当鼠标移入时，11张图片依次旋转实现此效果

代码分析

通过div标签和src图片标签配合使用就可以实现此框架，具体代码如下

<html>
	...
	...
	<body>
 	<!--定义外部盒子模型-->
 	<div class="box">
 		<!--定义十二张图片-->
 		<img src="image1.png" class="card" />

 		<img src="image1.png" class="card" />
 		
 		<img src="image1.png" class="card" />
 		
 		<img src="image1.png" class="card" />
 		
 		<img src="image1.png" class="card" />
 		
 		<img src="image1.png" class="card" />
 		
 		<img src="image1.png" class="card" />
 		
 		<img src="image1.png" class="card" />
 		
 		<img src="image1.png" class="card" />
 		
 		<img src="image1.png" class="card" />
 		
 		<img src="image1.png" class="card" />
 		
 	</div>
 </body>

</html>

CSS分析

做完上面的代码，我们就完成了HTML框架编写过程，现在，我们通过CSS来编写样式布局

/*去除所有元素的默认边距*/
* {
 padding: 0;
 margin: 0;
 transition: all 2s;
}
 
/*最外层盒子的样式*/		
.box {
 height: 400px;
 width: 280px;
 margin: 50px auto;
}

动画实现

现在，所有的图片都已经在div盒子里面了，紧接着，我们就要给图片添加鼠标移入事件了，所以我们要为div盒子添加鼠标移入事件，还要给每张图片添加移动事件处理结果

我们就得使用nth-child来选择元素了

.box:hover img:nth-child(0)
/*通过索引获取父控件中所有子空间*/
/*.box是父控件*/
/*hover是定义鼠标移入事件*/
/*img是子控件的标签类型*/
/*nth-child中填入子标签的索引 索引是从1开始的*/

选中所有图片控件，并且添加旋转动画

.box:hover img:nth-child(1) {
    /*rotate()旋转动画*/
	/*translateX()X轴平移*/
	transform: rotate(50deg) translateX(100px);
    /*添加背景阴影*/
    /*第一个参数是X轴偏移*/
    /*第二个参数是Y轴偏移*/
    /*第三个参数是模糊程度*/
    /*第四个参数是模糊颜色*/
	box-shadow: 0 0 20px red;
}
			
.box:hover img:nth-child(2) {
	transform: rotate(40deg) translateX(80px);
	box-shadow: 0 0 20px orange;
}
			
.box:hover img:nth-child(3) {
	transform: rotate(30deg) translateX(60px);
	box-shadow: 0 0 20px yellow;
}
			
.box:hover img:nth-child(4) {
	transform: rotate(20deg) translateX(40px);
	box-shadow: 0 0 20px blue;
}
			
.box:hover img:nth-child(5) {
	transform: rotate(10deg) translateX(20px);
	box-shadow: 0 0 20px darkcyan;
}
			
.box:hover img:nth-child(6) {
	box-shadow: 0 0 20px purple;
}
			
.box:hover img:nth-child(7) {
	transform: rotate(-10deg) translateX(-20px);
	box-shadow: 0 0 20px skyblue;
}
			
.box:hover img:nth-child(8) {
	transform: rotate(-20deg) translateX(-40px);
	box-shadow: 0 0 20px yellowgreen;
}
			
.box:hover img:nth-child(9) {
	transform: rotate(-30deg) translateX(-60px);
	box-shadow: 0 0 20px burlywood;
}
			
.box:hover img:nth-child(10) {
	transform: rotate(-40deg) translateX(-80px);
	box-shadow: 0 0 20px goldenrod;
}
			
.box:hover img:nth-child(11) {
	transform: rotate(-50deg) translateX(-100px);
	box-shadow: 0 0 20px palevioletred;
}

这样我们就可以实现魔法卡牌了！

以下是全部代码


<html>
 <head>
 	<style>
 		/*分析:假设一共有11张图片*/
 		/*1.第6张图片没有变化*/
 		/*2.第5张和第7张旋转角度相等,且旋转方向相反(符号相反)*/
 		/*3.第4张和第6张旋转角度也相当...*/
 		/*...*/
 		/*...*/
 		/*...*/
         
 		/*全部界面的内外边距为0*/
 		* {
 			padding: 0;
 			margin: 0;
 			transition: all 2s;
 		}
         
 		/*最外层盒子的样式*/
 		.box {
 			height: 400px;
 			width: 280px;
 			/*顶部和底部外边距50px水平自动居中*/
 			margin: 50px auto;
 		}
         
 		/*定义内部卡片样式*/
 		.card {
 			height:400px;
 			width:280px;
 			/*绝对定位*/
 			position: absolute;
 			/*旋转中心:底部中心*/
 			transform-origin: center bottom;
 			/*圆角为40px*/
 			border-radius: 35px;
 			/*阴影设置*/
 			/*box-shadow:X偏移 Y偏移 模糊程度 模糊颜色;*/
 			box-shadow: 0 0 10px #000;
 		}
         
 		/*??:hover鼠标移动后样式*/
 		/*父视图:hover 子元素类型:nth-child(索引) 获取*/
 		.box:hover img:nth-child(1) {
 			/*rotate()旋转动画*/
 			/*translateX()X轴平移*/
 			transform: rotate(50deg) translateX(100px);
 			box-shadow: 0 0 20px red;
 		}
 		
 		.box:hover img:nth-child(2) {
 			transform: rotate(40deg) translateX(80px);
 			box-shadow: 0 0 20px orange;
 		}
 		
 		.box:hover img:nth-child(3) {
 			transform: rotate(30deg) translateX(60px);
 			box-shadow: 0 0 20px yellow;
 		}
 		
 		.box:hover img:nth-child(4) {
 			transform: rotate(20deg) translateX(40px);
 			box-shadow: 0 0 20px blue;
 		}
 		
 		.box:hover img:nth-child(5) {
 			transform: rotate(10deg) translateX(20px);
 			box-shadow: 0 0 20px darkcyan;
 		}
 		
 		.box:hover img:nth-child(6) {
 			box-shadow: 0 0 20px purple;
 		}
 		
 		.box:hover img:nth-child(7) {
 			transform: rotate(-10deg) translateX(-20px);
 			box-shadow: 0 0 20px skyblue;
 		}
 		
 		.box:hover img:nth-child(8) {
 			transform: rotate(-20deg) translateX(-40px);
 			box-shadow: 0 0 20px yellowgreen;
 		}
 		
 		.box:hover img:nth-child(9) {
 			transform: rotate(-30deg) translateX(-60px);
 			box-shadow: 0 0 20px burlywood;
 		}
 		
 		.box:hover img:nth-child(10) {
 			transform: rotate(-40deg) translateX(-80px);
 			box-shadow: 0 0 20px goldenrod;
 		}
 		
 		.box:hover img:nth-child(11) {
 			transform: rotate(-50deg) translateX(-100px);
 			box-shadow: 0 0 20px palevioletred;
 		}
 	</style>
 </head>

 <body>
 	<!--定义外部盒子模型-->
 	<div class="box">
 		<!--定义十二张图片-->
 		<img src="image.png" class="card" />

 		<img src="image.png" class="card" />
 		
 		<img src="image.png" class="card" />
 		
 		<img src="image.png" class="card" />
 		
 		<img src="image.png" class="card" />
 		
 		<img src="image.png" class="card" />
 		
 		<img src="image.png" class="card" />
 		
 		<img src="image.png" class="card" />
 		
 		<img src="image.png" class="card" />
 		
 		<img src="image.png" class="card" />
 		
 		<img src="image.png" class="card" />
 		
 	</div>
 </body>
</html>
popup3721
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
[Stable Diffusion]：WEBUI（SD）安装、常用模型（checkpoint、embedding、LORA）、提示词具、常用插件
细节控-AI先行者的博客
12-09 1907
Stable Diffusion是一款令人印象深刻的AI模型，它让我们能够创造出惊人的艺术作品。通过安装合适的Checkpoint文件、使用Embeddings、LORA和Hypernetwork，以及使用插件，您可以发挥Stable Diffusion的最大潜力，创造出独一无二的艺术作品。
HTML小制作之卡片
web_zhuo的博客
04-19 5626
卡片 *{margin: 0;padding: 0;} .wrap { width: 600px; height: 400px; background-image: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=920673963,342124957&fm=23&gp=0.jpg); backg
Web_CSS3_3d卡片旋转【案例】
qq_40041509的博客
08-19 601
卡片旋转案例 <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> <style> *{
Web特效——简单卡片翻转效果
weixin_42029090的博客
06-22 3744
    将网上找到的一个方法进行了修改，实现通过非按钮点击进行卡片左右反转，根据反转次数显示当前面的信息。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;my&lt;/title&gt; &lt;style&gt;
html+css卡片
12-18
网页制作中，静态页面书写代码时方便查看的代码卡片
html桌面卡牌效果,HTML5+CSS3从入门到精通之实现卡片效果
weixin_39571938的博客
06-03 873
本篇文章探讨了HTML5+CSS3从入门到精通之实现卡片效果，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。<一、文字卡片效果1 2 3 meta4 文字卡片效果5 6 div.card {7 width: 250px;8 box-shadow: 04px8px0rgba(0, 0, 0, 0.2), 06px20px0rgba(0, 0, 0, 0.19);9 tex...
1.5 卡牌拖动返回效果———自制卡牌游戏之旅
Yuyake的博客
11-28 347
文章目录一、实现效果二、实现过程1. DOTween2. 部分代码3. 完整代码 素材来源：影之诗国服大百科 内容简介：本篇主要介绍卡牌拖动后自动返回操作 一、实现效果 二、实现过程 1. DOTween DOTween官方网站 DOTween is a fast, efficient, fully type-safe object-oriented animation engine for Unity, optimized for C# users, free and open-source, w
cube-light:Web的MtG平台构建器
04-06
总结，"cube-light"是一个结合了现代Web技术和集换式卡牌游戏的创新项目，它的成功在于将TypeScript的严谨性与魔法风云会的趣味性巧妙融合，为玩家提供了一个便捷的牌组构建平台。无论是对于游戏爱好者还是开发者，...
LifeCounter:INFO 498 D - 魔法聚会
06-18
在IT行业中，魔法聚会（Magic Gathering）是一种流行的集换式卡牌游戏，而"LifeCounter:INFO 498 D"则可能是一个专为此游戏设计的数字生命计数器应用。这个应用可能由Java编程语言编写，以帮助玩家在游戏过程中追踪...
区块链卡牌游戏Splinterlands游玩攻略
TritiumVC的博客
08-02 1509
文 |Yuri 编辑 | Daniel 出品 |TritiumVentures ​ 导言 Splinterlands是一个类似万智牌这样的卡牌+战斗的策略游戏。这篇攻略会给想入门的玩家一点攻略，并且也可以加入Splinterlands的中文社区和其他玩家一起讨论。 1. 注册 玩家可以使用Chrome浏览器的扩展程序Wombat来登录Splinterlands， 这里：https://chrome.google.com/webstore/detail/w...
MtG Offline Oracle-开源
04-27
《MtG Offline Oracle-开源》项目是一个专为魔法：聚会（Magic: The Gathering，简称 MtG）爱好者设计的工具，它基于.NET 3.5框架，致力于为用户提供一个离线查看游戏规则和卡牌信息的解决方案。这个项目的核心功能...
html5实现卡片效果
热门推荐
小时
08-09 1万+
卡片效果              .card{width: 250px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);text-align: center;}         .header{             background-color: #4caf50;
html 卡片布局 怎么,卡片式格局（CardLayout）
weixin_39566578的博客
06-10 1840
卡片式布局(CardLayout)Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局，其xtype值为card。切换子面板的唯一途径是调用setActiveItem方法。var panel = new Ext.Panel({renderTo: "div3",frame: true,layout: "card",title: "卡片式布局(CardLayou...
css鼠标拖拉卡顿_css3鼠标拖拽卡片动画特效
weixin_39701735的博客
12-24 409
特效描述：css3鼠标拖拽 卡片动画特效。css3鼠标拖拽卡片动画特效代码结构1. 引入CSS2. HTML代码var card,image,cardw,cardh,cardx,cardy,ocardx,ocardy,pinx,piny,pinxperc,pinyperc,targetx,targety,rx,ry,targetrx,targetry,scale,targetscale,ww,wh...
html5卡片效果
Amare丶的部落格
06-08 9854
html5卡片效果
HTML中渲染空格和换行符样式的实现方式
程序人生
08-27 578
在HTML中，连续的空格和换行符会被合并为一个空格，所以无法直接通过添加换行符来实现缩进效果。如果您希望在HTML中显示缩进的效果，可以使用CSS样式中的。样式会保留文本中的所有空格和换行符，可能会导致额外的空白间距。如果您需要控制缩进的具体样式，可以使用CSS中的。样式，这样文本中的空格和换行符就会得到保留，从而实现了缩进的效果。上述代码中，我们将要显示的文本放置在。
前端知识HTML&CSS
最新发布
w13114的博客
08-31 642
前端知识
HTML5 为什么只需要写 ＜!DOCTYPE HTML＞
乐辞的博客
08-31 335
HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。而 HTML4.01 基于 SGML ,所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。这个 DTD 提供了规范的文档结构和规则，以确保浏览器正确解析和显示文档。
HTML基本标签
actavy的博客
08-28 803
HTML（HyperText Markup Language）是超文本标记语言。它由一系列的元素（即标签）组成，每个标签都表示页面上的不同内容或元素，如文本、图像、链接等。HTML被用来描述网页的结构，并且在网页浏览器中解释显示这些结构，使网页内容呈现出来。标题标签的默认样式是自动加粗的，字体一级标题最大，六级标题最小，每个标题标签独占一行，并且标题标签是块元素。
阿里云卡牌游戏解决方案：优化玩家体验与运营策略
“大游戏-卡牌游戏解决方案”是阿里云提供的针对卡牌游戏...此外，阿里云可能会提供典型客户案例，展示其解决方案如何成功应用于实际游戏项目中。实施流程和系统配置清单则为客户提供详细的部署指导和资源规划参考。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值