界面展示
胜利界面
介绍
HTML(超文本标记语言,HyperText Markup Language)是一种用于创建和构建网页的标准标记语言。它允许将文本、图片、视频、链接等元素组织成网页,以在浏览器中显示。HTML使用一系列成对出现的标签来定义元素,这些标签可以嵌套在一起,从而构建出一个完整的页面结构。
以下是一个简单的HTML示例:
```html
我的简单网页欢迎来到我的网站
这是一个简单的段落。
点击这里访问示例网站
```
在这个示例中,我们使用了以下几个HTML标签:
1. ``:声明文档类型为HTML5。
2. ``:根元素,包含整个HTML页面的内容。
3. `
`:包含页面的元数据,如字符编码、视口设置和标题等。
4. ``:声明文档使用UTF-8字符编码。
5. ``:设置页面视口,使页面在不同设备上响应式显示。
6. `
`:定义网页标题,显示在浏览器的标签页上。7. `
`:包含页面的主体内容,如文本、图片和链接等。
8. `
`:一级标题。
9. `
`:段落。
10. ``:图片。
11. ``:超链接。
这只是HTML的基本概念,HTML还具有更多的标签和属性,用于创建更复杂的页面布局和交互效果。随着HTML5的推出,HTML还支持了一些新的功能,如视频、音频、画布(Canvas)和地理定位(Geolocation)等。
下面是我自制的HTML游戏网页。大家可以把它吃掉复制到HTML在线工具里。
一个赞拿走[看]
正文
- 纸牌记忆游戏
- html {
- box-sizing: border-box;
- }
- *,
- *::before,
- *::after {
- box-sizing: inherit;
- }
- html,
- body {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- font-weight:bolder;
- }
- body {
- background: #ffffff;
- font-size: 16px;
- }
- .container {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- }
- h1 {
- font-family: 'Gloria Hallelujah', cursive;
- }
- /*纸牌的样式*/
- .deck {
- width: 85%;
- background: #716F71;
- padding: 1rem;
- border-radius: 4px;
- box-shadow: 8px 9px 26px 0 rgba(46, 61, 73, 0.5);
- display: flex;
- flex-wrap: wrap;
- justify-content: space-around;
- align-items: center;
- margin: 0 0 3em;
- }
- .deck .card {
- height: 3.7rem;
- width: 3.7rem;
- margin: 0.2rem 0.2rem;
- background: #141214;;
- font-size: 0;
- color: #ffffff;
- border-radius: 5px;
- cursor: pointer;
- display: flex;
- justify-content: center;
- align-items: center;
- box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
- }
- .deck .card.open {
- transform: rotateY(0);
- background: #02b3e4;
- cursor: default;
- animation-name: flipInY;
- -webkit-backface-visibility: visible;
- backface-visibility: visible;
- animation-duration: .75s;
- }
- .deck .card.show {
- font-size: 33px;
- }
- .deck .card.match {
- cursor: default;
- background: #E5F720;
- font-size: 33px;
- animation-name: rubberBand;
- -webkit-backface-visibility: visible;
- backface-visibility: visible;
- animation-duration: .75s;
- }
- .deck .card.unmatched {
- animation-name: pulse;
- -webkit-backface-visibility: visible;
- backface-visibility: visible;
- animation-duration: .75s;
- background: #e2043b;
- }
- .deck .card.disabled {
- pointer-events: none;
- opacity: 0.9;
- }
- /*分数面板的样式*/
- .score-panel {
- text-align: left;
- margin-bottom: 10px;
- }
- .score-panel .stars {
- margin: 0;
- padding: 0;
- display: inline-block;
- margin: 0 5px 0 0;
- }
- .score-panel .stars li {
- list-style: none;
- display: inline-block;
- }
- .score-panel .restart {
- float: right;
- cursor: pointer;
- }
- .fa-star {
- color: #FFD700;
- }
- .timer {
- display: inline-block;
- margin: 0 1rem;
- }
- /*祝贺面板的样式*/
- .overlay {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background: rgba(0, 0, 0, 0.7);
- transition: opacity 500ms;
- visibility: hidden;
- opacity: 0;
- }
- .overlay:target {
- visibility: visible;
- opacity: 1;
- }
- .popup {
- margin: 70px auto;
- padding: 20px;
- background: #ffffff;
- border-radius: 5px;
- width: 85%;
- position: relative;
- transition: all 5s ease-in-out;
- }
- .popup h2 {
- margin-top: 0;
- color: #333;
- font-family: Tahoma, Arial, sans-serif;
- }
- .popup .close {
- position: absolute;
- top: 20px;
- right: 30px;
- transition: all 200ms;
- font-size: 30px;
- font-weight: bold;
- text-decoration: none;
- color: #333;
- }
- .popup .close:hover {
- color: #E5F720;
- }
- .popup .content-1,
- .content-2 {
- max-height: 30%;
- overflow: auto;
- text-align: center;
- }
- .show {
- visibility: visible;
- opacity: 100;
- }
- #starRating li {
- display: inline-block;
- }
- #play-again {
- background-color: #141214;
- padding: 0.7rem 1rem;
- font-size: 1.1rem;
- display: block;
- margin: 0 auto;
- width: 50%;
- font-family: 'Gloria Hallelujah', cursive;
- color: #ffffff;
- border-radius: 5px;
- }
- /* 卡片打开时的动画 */
- @keyframes flipInY {
- from {
- transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
- animation-timing-function: ease-in;
- opacity: 0;
- }
- 40% {
- transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
- animation-timing-function: ease-in;
- }
- 60% {
- transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
- opacity: 1;
- }
- 80% {
- transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
- }
- to {
- transform: perspective(400px);
- }
- }
- /* 卡片匹配时的动画 */
- @keyframes rubberBand {
- from {
- transform: scale3d(1, 1, 1);
- }
- 30% {
- transform: scale3d(1.25, 0.75, 1);
- }
- 40% {
- transform: scale3d(0.75, 1.25, 1);
- }
- 50% {
- transform: scale3d(1.15, 0.85, 1);
- }
- 65% {
- transform: scale3d(.95, 1.05, 1);
- }
- 75% {
- transform: scale3d(1.05, .95, 1);
- }
- to {
- transform: scale3d(1, 1, 1);
- }
- }
- /* 卡片不匹配时的动画 */
- @keyframes pulse {
- from {
- transform: scale3d(1, 1, 1);
- }
- 50% {
- transform: scale3d(1.2, 1.2, 1.2);
- }
- to {
- transform: scale3d(1, 1, 1);
- }
- }
- /******媒体查询*****/
- /* 适用于 320px 以下的样式*/
- @media (max-width: 320px) {
- .deck {
- width: 85%;
- }
- .deck .card {
- height: 4.7rem;
- width: 4.7rem;
- }
- }
- /* 适用于 768px 以上的样式*/
- @media (min-width: 768px) {
- .container {
- font-size: 22px;
- }
- .deck {
- width: 660px;
- height: 680px;
- }
- .deck .card {
- height: 125px;
- width: 125px;
- }
- .popup {
- width: 60%;
- }
- }
- .page-footer {
- position: fixed;
- right: 0;
- bottom: 20px;
- display: flex;
- align-items: center;
- padding: 5px;
- color: black;
- background: rgba(255, 255, 255, 0.65);
- }
- .page-footer a {
- display: flex;
- margin-left: 4px;
- }
- .touxiang{
- width:24px;
- height:24px;
- }
纸牌记忆游戏
DOLEFULNESS自制
- 0
-
恭喜
-
- 恭喜你获得了胜利
你在 内
移动了 次
星级:
- 再玩一次