html算命源码,index.html

这篇博客介绍了如何使用PHPStudy集成环境,包括站点创建、环境配置、使用教程的链接以及相关视频教程和社区讨论平台。文章还展示了网页样例,涉及到字体设置、页面布局和动态效果。此外,提供了代码示例展示了一键复制WebIDE原始数据的功能。
摘要由CSDN通过智能技术生成
欢迎使用phpstudy集成环境

/* cyrillic-ext */

@font-face {

font-family: 'Montserrat';

font-style: normal;

font-weight: 700;

src: local('Montserrat Bold'), local('Montserrat-Bold'), url(font/JTURjIg1_i6t8kCHKm45_dJE3gTD_u50.woff2) format('woff2');

unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;

}

/* cyrillic */

@font-face {

font-family: 'Montserrat';

font-style: normal;

font-weight: 700;

src: local('Montserrat Bold'), local('Montserrat-Bold'), url(font/JTURjIg1_i6t8kCHKm45_dJE3g3D_u50.woff2) format('woff2');

unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;

}

/* vietnamese */

@font-face {

font-family: 'Montserrat';

font-style: normal;

font-weight: 700;

src: local('Montserrat Bold'), local('Montserrat-Bold'), url(font/JTURjIg1_i6t8kCHKm45_dJE3gbD_u50.woff2) format('woff2');

unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;

}

/* latin-ext */

@font-face {

font-family: 'Montserrat';

font-style: normal;

font-weight: 700;

src: local('Montserrat Bold'), local('Montserrat-Bold'), url(font/JTURjIg1_i6t8kCHKm45_dJE3gfD_u50.woff2) format('woff2');

unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

font-family: 'Montserrat';

font-style: normal;

font-weight: 700;

src: local('Montserrat Bold'), local('Montserrat-Bold'), url(font/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2');

unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}

/* latin */

@font-face {

font-family: 'Share Tech Mono';

font-style: normal;

font-weight: 400;

src: local('Share Tech Mono'), local('ShareTechMono-Regular'), url(https://fonts.gstatic.com/s/sharetechmono/v8/J7aHnp1uDWRBEqV98dVQztYldFcLowEF.woff2) format('woff2');

unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}

* {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

box-sizing: border-box;

color: inherit;

}

body {

background-image: linear-gradient(120deg, #008856 0%, #000000 100%);

height: 100vh;

}

h1 {

font-size: 16vw;

text-align: center;

position: fixed;

width: 100vw;

z-index: 1;

color: #ffffff26;

text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

font-family: "Montserrat", monospace;

}

div {

background: rgba(0, 0, 0, 0);

width: 70vw;

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

margin: 0 auto;

padding: 30px 30px 10px;

box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);

z-index: 3;

}

P {

font-family: "Share Tech Mono", monospace;

color: #f5f5f5;

margin: 0 0 20px;

font-size: 17px;

line-height: 1.2;

}

span {

color: #f0c674;

}

i {

color: #8abeb7;

}

div a {

text-decoration: none;

}

b {

color: #81a2be;

}

a.avatar {

position: fixed;

bottom: 15px;

right: -100px;

-webkit-animation: slide 0.5s 4.5s forwards;

animation: slide 0.5s 4.5s forwards;

display: block;

z-index: 4

}

a.avatar img {

border-radius: 100%;

width: 44px;

border: 2px solid white;

}

@-webkit-keyframes slide {

from {

right: -100px;

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

opacity: 0;

}

to {

right: 15px;

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

opacity: 1;

}

}

@keyframes slide {

from {

right: -100px;

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

opacity: 0;

}

to {

right: 15px;

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

opacity: 1;

}

}

站点创建成功

> 主环境: "phpStudy"

> 使用教程: [地址] "https://www.xp.cn/using.html"

> 视频教程: [地址] "http://www.php.cn/course/639.html"

> 社区讨论: [地址] "https://www.xp.cn/wenda.html"

> 软件版本: [Phpstudy ] "V8.0"

var str = document.getElementsByTagName('div')[0].innerHTML.toString();

var i = 0;

document.getElementsByTagName('div')[0].innerHTML = "";

setTimeout(function() {

var se = setInterval(function() {

i++;

document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "|";

if (i == str.length) {

clearInterval(se);

document.getElementsByTagName('div')[0].innerHTML = str;

}

}, 10);

},0);

一键复制

编辑

Web IDE

原始数据

按行查看

历史

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值