点击出现金光html,HTML5 金光闪烁的登录框模板

最新推荐文章于 2023-07-05 11:02:35 发布
最新推荐文章于 2023-07-05 11:02:35 发布
阅读量167 收藏
点赞数
文章标签： 点击出现金光html

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Audiowide);

::-moz-selection {

background: #c00;

text-shadow: none;

}

::selection {

background: #c00;

text-shadow: none;

}

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video {

border: 0;

font: inherit;

font-size: 100%;

margin: 0;

padding: 0;

vertical-align: baseline;

text-rendering: optimizeLegibility;

}

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

display: block;

}

html,

body {

height: 100%;

margin: 0;

padding: 0;

}

body {

background: #1b1b1b;

color: #fff;

font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

font-size: 12px;

line-height: 1;

}

.background-wrap {

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

z-index: -1;

overflow: hidden;

}

.background {

background: url('https://myrror.co/etc/419062774_1385132057.jpg');

background-size: cover;

filter: blur(10px);

height: 105%;

position: relative;

width: 105%;

right: -2.5%;

left: -2.5%;

top: -2.5%;

bottom: -2.5%;

}

* {

box-sizing: border-box;

cursor: default;

outline: none;

}

form {

background: #111;

border: 1px solid #191919;

border-radius: 0.4em;

bottom: 0;

box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);

height: 280px;

left: 0;

margin: auto;

overflow: hidden;

position: absolute;

right: 0;

top: 0;

width: 300px;

}

form:after {

background: linear-gradient(to right, #111, #444, #b6b6b8, #444, #2f2f2f, #272727);

content: "";

display: block;

height: 1px;

left: 50px;

position: absolute;

top: 0;

width: 150px;

}

form:before {

border-radius: 50%;

box-shadow: 0 0 6px 4px #fff;

content: "";

display: block;

height: 5px;

left: 34%;

position: absolute;

top: -7px;

width: 8px;

}

.inset {

border-top: 1px solid #19191a;

padding: 20px;

}

form h1 {

font-family: 'Audiowide';

border-bottom: 1px solid #000;

font-size: 18px;

padding: 15px 0;

position: relative;

text-align: center;

text-shadow: 0 1px 0 #000;

}

form h1 {

color: #fb0;

font-family: Audiowide;

font-weight: normal;

}

form h1.poweron {

color: #fff;

transition: all 0.5s;

animation: flicker 1s ease-in-out 1 alternate, neon 1.5s ease-in-out infinite alternate;

animation-delay: 0s, 1s;

}

form h1:after {

position: absolute;

width: 250px;

height: 180px;

content: "";

display: block;

pointer-events: none;

top: 0;

margin-left: 138px;

transform-style: flat;

transform: skew(20deg);

background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0)));

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);

background: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);

background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);

filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#42ffffff', endColorstr='#00ffffff', GradientType=0);

background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);

}

input[type=text],

input[type=password] {

background: linear-gradient(#1f2124, #27292c);

border: 1px solid #222;

border-radius: 0.3em;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);

color: #fff;

font-size: 13px;

margin-bottom: 20px;

padding: 8px 5px;

width: 100%;

}

input[type=text]:disabled,

input[type=password]:disabled {

color: #999;

}

label[for=remember] {

color: #bbb;

display: inline-block;

height: 20px;

line-height: 20px;

vertical-align: top;

padding: 0 0 0 5px;

}

.p-container {

padding: 0 20px 20px;

}

.p-container:after {

clear: both;

content: "";

display: table;

}

.p-container span {

color: #0d93ff;

display: block;

float: left;

padding-top: 8px;

}

input[type=submit] {

background: #fb0;

border: 1px solid rgba(0, 0, 0, 0.4);

border-radius: 0.3em;

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 10px 10px rgba(255, 255, 255, 0.1);

color: #fff;

cursor: pointer;

font-size: 13px;

font-weight: 700;

height: 40px;

padding: 5px 20px;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);

width: 100%;

}

.denied {

background: #f00 !important;

}

input[type=submit]:hover,

input[type=submit]:focus {

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);

}

input[type=text]:hover:not([disabled]),

input[type=text]:focus,

input[type=password]:hover:not([disabled]),

input[type=password]:focus,

label:hover ~ input[type=text],

label:hover ~ input[type=password] {

background: #27292c;

}

input[type="checkbox"] {

opacity: 0;

background: red;

position: absolute;

cursor: pointer;

z-index: 1;

height: 100%;

width: 100%;

left: 0;

top: 0;

}

.checkboxouter {

height: 20px;

width: 20px;

border-radius: 3px;

background-color: #000;

position: relative;

display: inline-block;

border: 2px solid #555;

}

.checkbox {

position: absolute;

border-bottom: 2px solid #333;

border-right: 2px solid #333;

background-color: transparent;

height: 10px;

width: 5px;

margin: auto;

left: 50%;

transform: rotate(45deg);

transform-origin: -35% 30%;

transition: all 0.2s;

}

input[type="checkbox"]:checked ~ .checkbox {

transition: all 0.3s;

border-bottom: 2px solid #fc0;

border-right: 2px solid #fc0;

}

@keyframes neon {

from {

text-shadow: 0 0 2.5px #fff, 0 0 5px #fff, 0 0 7.5px #fff, 0 0 10px #b6ff00, 0 0 17.5px #b6ff00, 0 0 20px #b6ff00, 0 0 25px #b6ff00, 0 0 37.5px #b6ff00;

}

to {

text-shadow: 0 0 3px #fff, 0 0 7px #fff, 0 0 13px #fff, 0 0 17px #b6ff00, 0 0 33px #b6ff00, 0 0 38px #b6ff00, 0 0 48px #b6ff00, 0 0 63px #b6ff00;

}

}

@keyframes flicker {

0% {

text-shadow: 0 0 2.5px #fff, 0 0 5px #fff, 0 0 7.5px #fff, 0 0 10px #b6ff00, 0 0 17.5px #b6ff00, 0 0 20px #b6ff00, 0 0 25px #b6ff00, 0 0 37.5px #b6ff00;

}

2% {

text-shadow: none;

}

8% {

text-shadow: 0 0 2.5px #fff, 0 0 5px #fff, 0 0 7.5px #fff, 0 0 10px #b6ff00, 0 0 17.5px #b6ff00, 0 0 20px #b6ff00, 0 0 25px #b6ff00, 0 0 37.5px #b6ff00;

}

10% {

text-shadow: none;

}

20% {

text-shadow: 0 0 2.5px #fff, 0 0 5px #fff, 0 0 7.5px #fff, 0 0 10px #b6ff00, 0 0 17.5px #b6ff00, 0 0 20px #b6ff00, 0 0 25px #b6ff00, 0 0 37.5px #b6ff00;

}

22% {

text-shadow: none;

}

24% {

text-shadow: 0 0 2.5px #fff, 0 0 5px #fff, 0 0 7.5px #fff, 0 0 10px #b6ff00, 0 0 17.5px #b6ff00, 0 0 20px #b6ff00, 0 0 25px #b6ff00, 0 0 37.5px #b6ff00;

}

28% {

text-shadow: none;

}

32% {

text-shadow: 0 0 2.5px #fff, 0 0 5px #fff, 0 0 7.5px #fff, 0 0 10px #b6ff00, 0 0 17.5px #b6ff00, 0 0 20px #b6ff00, 0 0 25px #b6ff00, 0 0 37.5px #b6ff00;

}

34% {

text-shadow: none;

}

36% {

text-shadow: none;

}

42% {

text-shadow: none;

}

100% {

text-shadow: 0 0 2.5px #fff, 0 0 5px #fff, 0 0 7.5px #fff, 0 0 10px #b6ff00, 0 0 17.5px #b6ff00, 0 0 20px #b6ff00, 0 0 25px #b6ff00, 0 0 37.5px #b6ff00;

}

}

山东石头
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
暗黑金光信息动态网页模板
01-23
【暗黑金光信息动态网页模板】是一种设计独特的网页模板，专为那些寻求独特视觉体验的网站所有者或开发者提供。这个模板结合了暗色系的背景与金色元素，营造出一种神秘且高贵的氛围，同时也展现出强烈的现代感和动态...
金光特效（less）
叶小树咯
07-26 317
基于less的金光特效
css 自定义全局的input样式(提交按钮，文本框)
水月灯花的博客
03-23 3623
HTML input 标签 根据不同的type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 自定义input全局按钮的样式 google的input按钮定义 input[type="submit"] { -moz-user-select:none; background-color:#F5F5F5; background-image:-moz-linear-gradient(center top , #F5F5F...
HTML中css渲染元素,使用CSS来渲染HTML的表单元素
weixin_30336949的博客
07-10 370
效果：实现：使用CSS来渲染HTML的表单元素input[type=text], select {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}input[type=submit]...
【CSS 18】HTML表单优化 输入字段样式 输入框填充 边框美化 彩色输入框 获得焦点 图标与图像 动画效果 transition属性 文本域样式 select选择菜单 输入按钮 响应式
最新发布
Zane Boy's blogs
07-05 2467
HTML表单优化 输入字段样式 输入框填充 边框美化 彩色输入框 获得焦点 图标与图像 动画效果 transition属性 文本域样式 select选择菜单 输入按钮 响应式 input[type=password] - 将仅选择密码字段。- input[type=number] - 将仅选择数字字段。- input[type=text] - 将仅选择文本字段。如果仅需要下边框，请使用 border-bottom 属性。使用 padding 属性在文本字段内添加空间。
css响应式布局_Skeleton源码阅读：一个极简、响应式CSS库
weixin_39640417的博客
11-11 530
Skeleton是我在阅读10 Best CSS Frameworks for Front-End Developers时发现的CSS库，以下是文章对其的描述： Skeleton is so minimal that it doesn’t even call itself a CSS framework, library, or even module. It’s boilerplate, and...
H5表单验证2(h5自带验证美化)
weixin_40512519的博客
09-25 5158
h5自带验证美化：要做出不一样的表单验证，我们要了解一些伪类及css选择器。 :required和:optional :in-range和:out-of-range :valid和:invalid :read-only和:read-write //:required和:optional <style> .container{ max-w...
HTML5+SVG实现的黑森林月夜下无头骑士骑马与金光南瓜动画效果源码.zip
11-03
在这个特定的压缩包"HTML5+SVG实现的黑森林月夜下无头骑士骑马与金光南瓜动画效果源码.zip"中，我们看到一个基于HTML5和SVG（可缩放矢量图形）技术实现的创意动画效果。这个动画描绘了黑森林的月夜场景，其中无头...
金光闪闪PPT片头动画PPT模板.pptx
07-12
标题中的“金光闪闪PPT片头动画PPT模板”是指一种设计独特的PPT模板，其特点是具有动态的片头动画效果，可能包含金色或闪亮的元素，以吸引观众的注意力并为演示文稿增添专业和高质感的视觉体验。这种模板常用于商业...
金光四射flash动画
07-24
在"金光四射"的动画中，可能采用了形状补间或动作补间技术，使线条在不同帧之间平滑地变换颜色和位置，创造出闪烁的效果。线条的颜色可以通过ActionScript编程语言动态改变，或者直接在Flash的舞台上进行手动调整，...
金光闪闪光芒四射的喜庆节日开场动画PPT模板
03-20
关键词：红色PPT背景，喜庆，动态，动画，绸缎幻灯片背景图片，节日幻灯片模板下载，.PPTX格式； 金光闪闪光芒四射的喜庆节日PPT开场动画免费下载；关键词：红色PPT背景，喜庆，动态，动画，绸缎幻灯片背景
前端入门学习笔记七十六
m0_65384293的博客
12-13 307
前端入门学习笔记
PHP基础学习第十二篇（CSS响应式表单和布局）
xiaomoge__的博客
10-06 1111
CSS响应式表单和布局
html5中奖名单特效,HTML5 Canvas移动手机端的幸运大奖盘特效
weixin_28688385的博客
06-04 388
这是一款基于jquery和HTML5 Canvas的幸运大奖盘特效。该幸运大奖品特效支持移动端，它通过动态构造Canvas元素来生成大奖盘，并通过jquery代码来随机获取奖品。使用方法HTML结构抽奖用的大转盘使用图片来制作，开始时它们被隐藏。整个抽奖大奖盘放置在一个容器中，控制容器的大小即可以控制奖盘的大小。 CSS样式为大奖盘添加下面的CSS样式：.banner{displ...
html 边框四周闪光的效果,纯css 边框闪烁效果
weixin_29056145的博客
06-04 2474
代码如下：#ho-shan{width: 100%;height: 100%;position: relative;outline: none;background-color: #dd524d;border-radius: 5px;transform-origin: 0 0;opacity: .7;border: none;}#ho-shan::after {content: "";-webki...
html边框闪烁代码,纯css实现动态边框的示例代码
weixin_42515364的博客
06-05 1079
背景这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图：动态边框思路看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是添加四个div来分别实现上下左右的边框效果，虽然可行，但是要添加四个额外元素，有点儿得不偿失的感觉。难道就没有更好的解决方案了...就在我绞尽脑汁的时候，灵光乍现...
HTML CSS3按钮边框动画特效代码
tenggeer0789的博客
04-28 2622
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3按钮边框动画特效代码</title> <style> button{ background:#1AAB8A; color:#fff; border:none; posi...
表格边框闪动效果
iteye_13833的博客
11-30 498
 页面特效-简单的实现表格边框闪动效果（表格边框在指定时间内黄色红色交替闪烁） 代码如下：   &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;页面特效篇--表格边框闪动&lt;/TITLE&gt; &lt;/HEAD&gt; &lt;BODY bgcolor="#fef4d2" &gt; &lt;br&gt;&l
设置HTML中的文本框光标持续闪动,CSS3 自定义的闪烁的文本输入光标
weixin_35662528的博客
06-04 1359
CSS语言：CSSSCSS确定/*Thick font*/@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow:700);/*Script font*/@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two);/*Reading ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值