随机样例生成器(外观优化)

说明

利用浮动布局方法对生成器进行了外观上的优化.

其可根据窗口的大小自动调节

另外在点击按钮时会有动画效果产生

效果图

css部分代码

body{background: linear-gradient(315deg,rgb(127, 213, 247),rgb(158, 234, 240));margin: 0;text-align: center;
}
#main{margin: 2% auto;
}
h3{font-size: 25px;
}
#input{text-align: left;font-size: 18px;margin: 0 20%;/*border:  2px solid red;*/
}
.input-text{float: left;margin: 0 3% 0 28%;width: 160px;border: 1px solid green;
}
.input_are{width: 200px;height: 25px;background: transparent;
}
#button{width: 150px;height: 50px;margin: 0 40%;background: transparent;
}
#button:hover{animation: change 3s infinite ;
}
@keyframes change{0%{box-shadow: 0 0 100px rgb(33, 143, 177);}30%{/*transform: translate(0,-10px);*/color: aqua;box-shadow: 0 0 100px rgb(47, 0, 255);}60%{color: rgb(124, 39, 202);box-shadow: 0 0 100px rgb(177, 33, 170);}100%{box-shadow: 0 0 100px red;color: black;}
}
#button:active{animation: jump 2s infinite alternate;
}
@keyframes jump{0%{transform: translate(0,-10px);}50%{transform: translate(0,-10px);}100%{transform: translate(0,-10px);}
}
#output{height: 350px;width: 58%;
}

随机样例生成器(外观优化)相关推荐

很好的理解遗传算法的样例
遗传算法的手工模拟计算演示样例为更好地理解遗传算法的运算过程,以下用手工计算来简单地模拟遗传算法的各个主要运行步骤. 例:求下述二元函数的最大值: (1) 个体编码 ...
TensorFlow中cnn-cifar10样例代码详解
TensorFlow是一个支持分布式的深度学习框架,在Google的推动下,它正在变得越来越普及.我最近学了TensorFlow教程上的一个例子,即采用CNN对cifar10数据集进行分类.在看源代码 ...
spark mllib lda 中文分词、主题聚合基本样例
github https://github.com/cclient/spark-lda-example spark mllib lda example 官方示例较为精简在官方lda示例的基础上,给合 ...
HLS-Demo IOS 视屏直播样例
from: https://github.com/yangchao0033/HLS-Demo/blob/master/README.md demo简介:如果觉得文章有用的话,请读者在github上点个 ...
逻辑回归的向量化实现样例
逻辑回归的向量化实现样例 From Ufldl Jump to: navigation, search 我们想用批量梯度上升法对logistic回归分析模型进行训练,其模型如下: 让我们遵从公开 ...
Stanford UFLDL教程逻辑回归的向量化实现样例
逻辑回归的向量化实现样例我们想用批量梯度上升法对logistic回归分析模型进行训练,其模型如下: 让我们遵从公开课程视频与CS229教学讲义的符号规范,设 ,于是 ,, 为截距.假设我们有m个训练 ...
操作系统之进程调度——优先权法和轮转法（附上样例讲解）
操作系统之进程调度--优先权法和轮转法(附上样例讲解) 操作系统之银行家算法-详解流程及案例数据操作系统之多线程编程-读者优先/写者优先详解操作系统之存储管理--FIFO算法和LRU算法操作系统 ...
《Mali OpenCL SDK v1.1.0》教程样例之一“Hello World”
1.算法简述实现矩阵相加:Cn = An + Bn.这个例子虽然很简单,但是由于矩阵元素之间相互独立,每个元素可以非常容易地进行并行计算,可以非常理想地在OpenCL中实现. 2. C/C++实现 ...
斗地主AI算法——第十六章の样例分析
上一章,我们已经完成了测试模块的开发.至此我们已经可以进行整体测试了.本章主要内容就是对随机生成的对局情况进行简单的分析. 实际上整个开发过程绝大部分时间都是用在样例分析上,通过样例给出的返回操作分析 ...
重要性采样(Importance Sampling)简介和简单样例实现
重要性采样(Importance Sampling)简介和简单样例实现在渲染领域,重要性采样这个术语是很常见的,但它究竟是什么呢?我们首先考虑这样的一种情况: 如果场景里有一点P,我们想计算P点的最 ...

随机样例生成器(外观优化)

说明

效果图

css部分代码

随机样例生成器(外观优化)相关推荐

最新文章

热门文章