使用html+css3实现QQ登录界面渐变色效果
效果展示
代码展示
<!DOCTYPE html>
<html lang="ch"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {height: 100%;overflow: hidden;}.color {position: absolute;filter: blur(200px);}.color:nth-child(1) {top: -350px;width: 600px;height: 600px;background: rgb(47, 102, 255);animation: colorOne 3s ease infinite alternate;}@keyframes colorOne {0% {background: rgb(47, 102, 255);}25% {background: rgb(47, 154, 255);}50% {background: rgb(47, 179, 255);}75% {background: rgb(47, 255, 238);}100% {background: rgb(47, 255, 203);}}.color:nth-child(2) {bottom: -150px;left: 100px;width: 500px;height: 500px;background: rgb(27, 178, 255);animation: colorTwo 3s ease infinite alternate;}@keyframes colorTwo {0% {background: rgb(27, 178, 255);}25% {background: rgb(47, 137, 255);}50% {background: rgb(47, 130, 255);}75% {background: rgb(47, 144, 255);}100% {background: rgb(47, 85, 255);}}.color:nth-child(3) {bottom: 50px;right: 100px;width: 500px;height: 500px;background: rgb(130, 225, 253);animation: colorThree 3s ease infinite alternate;}@keyframes colorThree {0% {background: rgb(130, 225, 253);}25% {background: rgb(130, 148, 253);}50% {background: rgb(50, 47, 255);}75% {background: rgb(78, 47, 255);}100% {background: rgb(137, 47, 255);}}.color:nth-child(4) {top: -300px;right: -20px;width: 600px;height: 600px;background: rgb(192, 132, 255);animation: colorFour 3s ease infinite alternate;}@keyframes colorFour {0% {background: rgb(192, 132, 255);}25% {background: rgb(251, 132, 255);}50% {background: rgb(255, 132, 214);}75% {background: rgb(255, 132, 183);}100% {background: rgb(255, 132, 142);}}.color:nth-child(5) {top: 20px;left: 40%;width: 400px;height: 300px;background-color: rgb(133, 169, 254);animation: colorFive 3s ease infinite alternate;}@keyframes colorFive {0% {background: rgb(133, 169, 254);}25% {background: rgb(133, 254, 187);}50% {background: rgb(171, 254, 133);}75% {background: rgb(242, 254, 133);}100% {background: rgb(254, 206, 133);}}.color:nth-child(6) {bottom: 20px;left: 50%;width: 300px;height: 300px;background-color: rgb(50, 230, 243);animation: colorSix 3s ease infinite alternate;}@keyframes colorSix {0% {background: rgb(50, 230, 243);}25% {background: rgb(50, 243, 98);}50% {background: rgb(243, 230, 50);}75% {background: rgb(243, 153, 50);}100% {background: rgb(243, 89, 50);}}</style>
</head><body><!-- 背景色 --><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div>
</body></html>实现思路
animation + filter
使用html+css3实现QQ登录界面渐变色效果相关推荐
- 用combobox扩展控件（dsCtrlComboBox)做出类似QQ登录界面的效果
原文地址:http://www.uieasy.cn/blog/?p=513 传统的combobox 在使用方面有很多限制,很难满足我们combobox类型控件的需求.主要表现中combobox内置的l ...
- 使用html+css3实现QQ登录界面
1.代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
- Unity Shader(一) Lowpoly动态低多边形 (QQ登录界面低边动画)
前言 在逛论坛的时候偶然发现有人在问动态低多边形(Lowpoly)是如何实现的,因为经常编写UGUI拓展对顶点操作较为熟悉的我立马就想到利用继承UnityEngine.Graphic,重写OnPopu ...
- 【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50589570 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
- Android实现仿QQ登录界面背景动画效果
登录QQ的时候,我们会看到在登录界面的背景不是静态的,而是一段动画效果,刚开始觉得蛮好奇的,现在我们也来实现一下这种效果,实现起来还是挺简单的. 实现步骤: 1.自定义CustomVideoView类 ...
- java qq登录界面_用java实现QQ登录界面怎么写
展开全部 用32313133353236313431303231363533e78988e69d8331333365646263java做QQ登录界面的写法如下: package ch10; impo ...
- java仿qq登录 界面设计,Java Swing仿QQ登录界面效果
本文实例为大家分享了Java Swing仿QQ登录界面展示的具体代码,供大家参考,具体内容如下 闲来无事将早些时候已实现的QQ登录界面再实现了一遍,纯手工打造(意思是没有用NetBeans.MyEcl ...
- qq登录界面句柄_别小看QQ邮箱测试，80%的测试新手都不能写出完整的测试用例~...
对于很多刚进入测试行业的新手来说,由于自身的工作经验不足,虽有测试基础知识傍身,但仍然很难将测试用例写的尽善尽美.因此,学习别人的测试经验,将是你成为测试达人的必经之路. 今天,我们就以QQ邮箱为例, ...
- Android UI布局—— 仿QQ登录界面
最近,有点空闲的时间就拿QQ登录界面来模仿练手,做了个简单的登录界面.界面一般般吧,不算很漂亮,现在拿出来分享,希望大家一起学习与进步.有什么不足之处,请各位大侠多多赐教,谢谢.这个界面涉及到Line ...
- java如何引入qq登陆,Java Swing仿QQ登录界面 学习之用
闲来无事将早些时候已实现的QQ登录界面再实现了一遍,纯手工打造(意思是没有用NetBeans.MyEclipse的拖动功能). 源代码如下: package ibees.qq; import java ...
最新文章
- uniapp 分享缩略图过大怎么办_女性胸外扩怎么办|3步带你完成改变
- 难以置信！LSTM和GRU的解析从未如此清晰（动图+视频）
- html xhtml and css,HTML与XHTML的重要区别
- 凯利公式判定持仓比例
- Python3 django2.0 字段加密 解密 AES
- Web前端好不好学？Web前端要学些什么呢？
- c语言编程回文数用数组,【C语言程序设计】C语言回文数怎么求？
- java怎么运行_不要再问我Java程序是怎么执行的了！
- 今天加班做了昨天晚上要写的页面，用到了一些之前用过但还不熟悉需要上网搜索才能用的知识点：...
- 一级计算机手机试题app,计算机一级考试题库
- CSS中如何实现表格文字的换行
- c语言第二版第三章答案,C语言程序设计(第2版) 刘克威,张凌晓著 习题答案-第三章...
- Xilinx FPGA MIPI 接口简单说明
- O2O模式发展迅速的原因 o2o模式成功的原因是什么？
- 计组中原码一位乘和原码二位乘方法和注意事项
- Java工程师的工资待遇如何？
- fpu测试_解毒盖世G600散热器，3900X超频测试能不能压住？
- 【Unity】：从【3ds Max】为人形骨骼 humanoid 添加动画
- 数据结构之中缀表达式计算
- ArcGIS API For JavaScript 拉框放大地图