CSS

语言：

CSSSCSS

确定

@-webkit-keyframes blink {

1% {

opacity: 1;

}

49% {

opacity: 1;

}

50% {

opacity: 0;

}

100% {

opacity: 0;

}

}

@keyframes blink {

1% {

opacity: 1;

}

49% {

opacity: 1;

}

50% {

opacity: 0;

}

100% {

opacity: 0;

}

}

@-webkit-keyframes moveit {

0% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

28.99% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

29% {

-webkit-transform: translateY(5px) skewX(20deg);

transform: translateY(5px) skewX(20deg);

}

30% {

-webkit-transform: translate(0);

transform: translate(0);

}

88.999% {

-webkit-transform: translate(0);

transform: translate(0);

}

89% {

-webkit-transform: skewX(-15deg);

transform: skewX(-15deg);

}

89.001% {

-webkit-transform: skew(0);

transform: skew(0);

}

90% {

-webkit-transform: translate(0);

transform: translate(0);

}

90.001% {

-webkit-transform: translate(23px, 17px);

transform: translate(23px, 17px);

}

98.999% {

-webkit-transform: translate(22px, 20px);

transform: translate(22px, 20px);

}

99% {

-webkit-transform: translate(0);

transform: translate(0);

}

100% {

-webkit-transform: translate(0) skew(0);

transform: translate(0) skew(0);

}

}

@keyframes moveit {

0% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

28.99% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

29% {

-webkit-transform: translateY(5px) skewX(20deg);

transform: translateY(5px) skewX(20deg);

}

30% {

-webkit-transform: translate(0);

transform: translate(0);

}

88.999% {

-webkit-transform: translate(0);

transform: translate(0);

}

89% {

-webkit-transform: skewX(-15deg);

transform: skewX(-15deg);

}

89.001% {

-webkit-transform: skew(0);

transform: skew(0);

}

90% {

-webkit-transform: translate(0);

transform: translate(0);

}

90.001% {

-webkit-transform: translate(23px, 17px);

transform: translate(23px, 17px);

}

98.999% {

-webkit-transform: translate(22px, 20px);

transform: translate(22px, 20px);

}

99% {

-webkit-transform: translate(0);

transform: translate(0);

}

100% {

-webkit-transform: translate(0) skew(0);

transform: translate(0) skew(0);

}

}

@-webkit-keyframes noisey {

0% {

-webkit-transform: scaleY(0.85);

transform: scaleY(0.85);

}

25% {

-webkit-transform: scaleY(0.8);

transform: scaleY(0.8);

}

75% {

-webkit-transform: scaleY(0.85);

transform: scaleY(0.85);

}

100% {

-webkit-transform: scaleY(0.8);

transform: scaleY(0.8);

}

}

@keyframes noisey {

0% {

-webkit-transform: scaleY(0.85);

transform: scaleY(0.85);

}

25% {

-webkit-transform: scaleY(0.8);

transform: scaleY(0.8);

}

75% {

-webkit-transform: scaleY(0.85);

transform: scaleY(0.85);

}

100% {

-webkit-transform: scaleY(0.8);

transform: scaleY(0.8);

}

}

#letterContainer {

position: relative;

display: block;

height: 160px;

padding: 10px;

margin: 5px;

color: #ffbe69;

text-shadow: 1px 0 rgba(85, 255, 85, 0.19245009), 2px 0 rgba(255, 190, 105, 0.125), 3px 0 rgba(255, 190, 105, 0.090), 4px 0 rgba(255, 190, 105, 0.07), 5px 0 rgba(255, 190, 105, 0.05), 6px 0 rgba(255, 190, 105, 0.04), 7px 0 rgba(255, 190, 105, 0.035), 8px 0 rgba(255, 190, 105, 0.031), 9px 0 rgba(255, 190, 105, 0.025), 10px 0 rgba(255, 190, 105, 0.02405626), 11px 0 rgba(255, 190, 105, 0.02133462), 12px 0 rgba(255, 190, 105, 0.01909009), 13px 0 rgba(255, 190, 105, 0.01721326), 14px 0 rgba(255, 190, 105, 0.01562500), 15px 0 rgba(255, 190, 105, 0.01426680);

-webkit-animation: moveit 20s infinite;

animation: moveit 20s infinite;

font-size: 12px;

font-family: 'PROBE10PXRegular';

line-height: 100%;

}

body,

html {

margin: 0;

padding: 0;

height: 100vh;

width: 100vw;

}

#wrapper {

position: absolute;

height: 100%;

width: 100%;

overflow: visible;

background-color: #210;

}

.screenDist {

width: 100%;

height: 130%;

display: block;

position: absolute;

margin: 0;

top: -15vh;

z-index: 5;

background-color: rgba(0, 0, 0, 0.1);

background-image: -webkit-repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 2px, rgba(0, 0, 0, .1) 2px, rgba(0, 0, 0, .1) 3px);

background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 2px, rgba(0, 0, 0, .1) 2px, rgba(0, 0, 0, .1) 3px);

-webkit-animation: noisey 30s ease-in-out infinite;

animation: noisey 30s ease-in-out infinite;

}

.letter {

display: inline;

}

#inputString {

display: none;

}

div#cursor {

display: inline;

-webkit-animation: blink 1s infinite;

animation: blink 1s infinite;

}

html交互界面怎么写,HTML5 BIOS字符交互界面模拟相关推荐

  1. 写一个centos字符界面下的电量显示脚本

    在没有电源的情况下开启图形界面是很费电的,而且linux少有像win下的那种省电软件,要用的话就只好只开启字符界面咯,但是在字符界面下看电量又是一件很蛋疼的事,今天在图书馆插头没电,想看电量难道要打开 ...

  2. 【京东电商网站主界面仿写——HTML第二部分】

    由于这个项目整体的代码较长,所以分成几个部分给大家展示. 比较完整的效果在这里~~[京东网站主界面仿写--使用Html5+CSS3+JavaScript等实现(附源代码和效果),挺炫的喔~~~] 这里 ...

  3. 【京东电商网站主界面仿写——CSS第一部分】

    由于这个项目整体的代码较长,所以分成几个部分给大家展示. 比较完整的效果在这里~~[京东网站主界面仿写--使用Html5+CSS3+JavaScript等实现(附源代码和效果),挺炫的喔~~~] HT ...

  4. 用HTML写一个简易的登录界面

    用HTML写一个简易的登录界面 主要应用知识 img图片标签 表单的知识 下拉框以及单选框和多选框 锚链接以及email验证码 先看成品 再看代码 会理解的更快 <!DOCTYPE html&g ...

  5. java qq聊天界面_【附源码】用Java写了一个类QQ界面聊天小项目，可在线聊天！...

    原标题:[附源码]用Java写了一个类QQ界面聊天小项目,可在线聊天! 目录: 1.功能实现 2.模块划分 3.使用到知识 4.部分代码实现 5.运行例图 1.功能实现 1.修改功能(密码.昵称.个性 ...

  6. 【京东电商网站主界面仿写—

    比较完整的效果在这里~~[[京东网站主界面仿写--使用Html5+CSS3+JavaScript等实现(附源代码和效果),挺炫的喔~~~]](() 这里先展示第一部分,关于HTML主页界面代码. 这里 ...

  7. 【京东电商网站主界面仿写——HTML第一部分】

    由于这个项目整体的代码较长,所以分成几个部分给大家展示. 比较完整的效果在这里~~[京东网站主界面仿写--使用Html5+CSS3+JavaScript等实现(附源代码和效果),挺炫的喔~~~] 这里 ...

  8. minst手写数字识别（带界面）

    minst手写数字识别(带界面) 目录 minst手写数字识别(带界面) 一.项目简介 二.项目结构及环境 三.网络结构介绍 四.程序文件介绍 五.使用介绍 六.源代码获取 一.项目简介 1)概述:手 ...

  9. linux下c语言写界面,利用C语言绘制操作系统图像界面

    有了C语言这一利器后,不多多拿来用,那就太对不起前面的一系列努力了.那么怎么表现C语言的强大功能呢,如果还只是一味的在界面上输出几行字符,那太没意思,考虑到,我们的目标是做出像windows那样具备舒 ...

最新文章

  1. MongoDB 监测
  2. vi 编辑器命令 (share)
  3. Java开源爬虫框架crawler4j
  4. 5G时代，怎样的数据库才能满足金融领域快速发展的需求？
  5. openwrt nas_NAS里整个软路由
  6. oracle数据库架构视频教程,Oracle数据库体系架构_oracle架构_oracle学习视频_oracle数据库_课课家...
  7. 加载Selenium2Library却显示红色
  8. RocketMQ（消息中间件）
  9. windows系统下进入jupyter本地服务器（localhost)的步骤
  10. 电子行报告：从海外龙头发展历程看国内半导体设备企业投资价值
  11. sakila-dwh-schema文件
  12. 中国丹参市场经营模式与盈利预测报告（新版）2021-2026年
  13. 工作岗位必备技能总结
  14. matlab中辗转相除法,基于Matlab的辗转相除法
  15. 概率论与数理统计习题
  16. CHW,HCW顺序和numpy.transpose函数
  17. 锤子手机使用android启动器,锤子桌面启动器app
  18. 介绍一下三电平Boost变换器工作原理
  19. 【Java入门】统计字符串中“ a ~ z “各个字符出现的次数
  20. html5飞机大战小游戏开发,html5 飞机大战

热门文章

  1. 哈夫曼树原理及构造方法
  2. html一键生成预览图,选择图片后显示缩略图（自动生成缩略图）
  3. 路由器mw320虚拟服务器,水星MW320R中继怎么设置_水星MW320R桥接设置-192路由网
  4. 在ubuntu下用mosquitto搭建mqtt服务器，mqtt.fx的tls加密连接
  5. 自定义函数5，is_leap_year判断是否为闰年
  6. 国产替代STM32芯片MCU降本保供，数算我知道的国产车规级单片机AEC-Q100车规级汽车级认证芯片
  7. 本科毕业论文不会写怎么办？
  8. c语言检测正弦波波峰波谷,一种基于波峰波谷检测的计步算法的制作方法
  9. 阿弗雷德·阿德勒：《自卑与超越》第一章
  10. uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址