Перейти к содержанию
IPSGuru.ru - Сообщество веб администраторов

Профили HTML / CSS / JS

voodnik

Автор voodnik
в Профили

Рекомендуемые сообщения

voodnik Новичёк

voodnik

Опубликовано
Опубликовано

Профили HTML / CSS / JS

Доброго времени суток. 
В данной теме будут представлены профили (html / css / js)
*Тема будет обновляться!*
Хук для того чтобы редактировать: 



 Matrix: 

<canvas id="canvas"></canvas>
<style>
@font-face{
    font-family : "Matrix";
    src : url('http://repo.perso.sfr.fr/Matrix_Code_Font/matrix.ttf');
}
body{
	margin: 0;
	padding: 0;
        color: #CCCCCC;
}

.post_block h3 {
    color: white;
    background: transparent;
    text-shadow: none;
    border-top: none !important;
    border-bottom: none !important;
}

.post_block h3 a {
color: white !important;
}

.maintitle {
background: transparent;
box-shadow: none;
border: none;
}

.row2, .post_block.row2 {
    background: transparent;
}

.ipsUserPhoto {
    padding: 0px;
    border: none;
    border-radius: 50%;
    box-shadow: none !important;
}

.ipsSideBlock h3, .ipsSideBlock h3 a, .general_box h3, .general_box h3 a, .bar, .bar a {
    color: #FFFFFF !important;
}

.steamprofile .sp-bg-fade {
    background: rgb(1, 57, 10);
}

.steamprofile .sp-extra {
background: transparent;
}

.steamprofile .sp-online .sp-avatar, .steamprofile .sp-in-game .sp-avatar, .steamprofile .sp-offline .sp-avatar {
    background: rgba(4, 119, 4, 0.84);
    border-radius: 4px;
}

#user_latest_status .status_arrow {
display: none;
}

.steamprofile .sp-online a {
    color: crimson;
}

.ipsBox {
background: none;
}

.steamprofile {
background: transparent;
} 

.steamprofile .sp-online {
    color: crimson;
}

.steamprofile:hover {
background: transparent;
}

.steamprofile .sp-bg-game, .steamprofile .sp-bg-fade {
    background-position: left;
}

#user_latest_status>div {
    background: linear-gradient(to top, rgba(32, 81, 136, 0.37), rgba(0, 84, 3, 0.65));
    text-shadow: none;
    color: white;
}

.status_update {
background: none;
}

#footer_utilities {
display: none;
}

.content_border {
border: none;
}

.ipsVerticalTabbed_tabs li a {
    color: #8C8C8C;
}

.ipsVerticalTabbed_tabs>ul {
    border-top: none;
    border-left: none;
}

.ipsVerticalTabbed_tabs li.active a {
    background: rgba(0, 84, 3, 0.65);
    color: #CCCCCC;
    width: 134px;
}
a:hover {
    color: #FFFFFF;
}

#profile_panes_wrap .reputation .title{
display: none;
}

.reputation.positive, .members li.positive {
    background: linear-gradient(to top, rgba(32, 81, 136, 0.65), rgba(1, 53, 6, 0.47));
}

.ipsVerticalTabbed_tabs li {
background: transparent;
border: none;
}

#recentajaxcontent li, #idm_categories a, #index_stats .status_list li, #panel_files .file_listing li, #panel_screenshots #ss_linked li, .file_listing, #cart_totals td, div#member_filters li, #files li, #order_review td, #package_details .package_info, .block_list li, .package_view_top, .member_entry, #help_topics li, .ipsBox_container .ipsType_pagetitle, .userpopup dl, #announcements td, .preview_info, .sideVerticalList li, fieldset.with_subhead ul, .ipsList_data li, .ipsList_withminiphoto li, table.ipb_table td, .store_categories li, #mini_cart li, #index_stats div[id*="statusReply"], #ipg_category .ipg_category_row, .block_inner .ipb_table td, .gallery_pane h2, .status_feedback li[id*="statusReply"], .ipsSideMenu ul li, #usercp_content .ipsType_subtitle, .ipbfs_login_row, .articles .block-1, .articles .type-1x2x2 .article_row, #idm_category .idm_category_row, #category_list li a, .ipsComment {
border: none;
}

.ipsSideBlock h3, .ipsSideBlock h3 a, .general_box h3, .general_box h3 a, .bar, .bar a {
    color: #FFFFFF;
}

#canvas {
    position: fixed;
    top: 0;
    left: 0;
}

.bar, .ipsSideBlock h3, .general_box h3 {
    border: none !important;
    background: transparent;
    text-shadow: none;
}

.ipsBox_container {
border: none !important;
}

.ipsSideBlock, .general_box {
    background: transparent;
    border: none;
}

#logo {
    float: left;
    z-index: 10;
    position: absolute;
}


#idm_category .idm_category_row, .store_categories li, #idm_categories a, .ipsList_data li, .ipsList_withminiphoto li, table.ipb_table tr td {
background: transparent;
}

.border, .statistics, .post_block, .ipsComment, .popupInner, .no_messages, .poll_question ol, .ipsBox_container, .ipsFloatingAction, .column_view .post_body {
    background: linear-gradient(to top, rgba(32, 81, 136, 0.37), rgba(0, 84, 3, 0.65));
}

#cursor{
	height: 18px;
	width: 12px;
	background-color: #00ff00;
	position: absolute;
	right: 0;
	top: 6px;
}
</style>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var H = window.innerHeight;
var W = window.innerWidth;

canvas.height = H;
canvas.width = W;

var char = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,0,1,2,3,4,5,6,7,8,9";
char = char.split("");

var fontSize = 12;
var columns = W/fontSize;
var decY = [];
var active = 1;

for(var n = 0; n < columns; n++)
	decY[n] = Math.round(Math.random() * (H/10)); 

ctx.fillStyle = "black";
ctx.fillRect(0, 0, W, H);
function draw()
{
	ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
	ctx.fillRect(0, 0, W, H);
	
	ctx.fillStyle = "#0F5";
	ctx.font = fontSize + "px Matrix";

	for(var i = 0; i < decY.length; i++)
	{
		var text = char[Math.floor(Math.random()*char.length)];
		ctx.fillText(text, i*fontSize, decY[i]*fontSize);
		if(decY[i]*fontSize > H && Math.random() > 0.98){
			decY[i] = 0;
		}

		decY[i]++;
	}
}
function cursor(){
	c = document.getElementById("cursor");
	console.log(c.style.display.value);
	if(active == 1){
		c.style.display = 'none';
		active = 0;
	}else{
		c.style.display = 'block';
		active = 1;
	}
}

setInterval(draw,42);
setInterval(cursor, 500);



</script>


 

 

  • Лайк 1
  • Нравится 1
Ссылка на комментарий
voodnik Новичёк

voodnik

Опубликовано
  • Автор
Опубликовано

Marvel: 

<canvas style="
    width: 1920px;
    height: 955px;
    top: 0;
    left: 0;
    right: 0;
    background: #550703;
    position: fixed;
"></canvas>
<img src="http://37.media.tumblr.com/tumblr_mbha9qWF401qcixnko4_500.gif" class="gif">
<div class="wrapper">
    <div class="marvel">MARVEL</div>
    <div class="studios">STUDIOS</div>
  </div>
  <style>
@import url(http://fonts.googleapis.com/css?family=Orbitron);

@keyframes zoomOut {
    0% {
        transform: scale(2.0);
        -webkit-transform: scale(2.0);
    }
    100% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}
@-webkit-keyframes zoomOut {
    0% {
        transform: scale(2.0);
        -webkit-transform: scale(2.0);
    }
    100% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

.post_wrap {
    background: transparent;
}

@font-face {
    font-family: 'BentonSansExtraCompBlack';
    src: url('http://sudocoda.com/fonts/bentonsansextracomp-black-webfont.eot?') format('eot'); 
  src: url('http://sudocoda.com/fonts/bentonsansextracomp-black-webfont.woff') format('woff'), url('http://sudocoda.com/fonts/bentonsansextracomp-black-webfont.ttf') format('truetype');
}

.post_body {
    background: transparent !important;
}

.ipsSideBlock, .general_box {
background: transparent;
border: none;
}

.content_border {
    border: none;
}

.warn_panel {
    border: 0px solid #D3C8C8;
}

.status_update {
    background: transparent;
}

#recentajaxcontent li, #idm_categories a, #index_stats .status_list li, #panel_files .file_listing li, #panel_screenshots #ss_linked li, .file_listing, #cart_totals td, div#member_filters li, #files li, .ipsType_sectiontitle, #order_review td, #package_details .package_info, .block_list li, .package_view_top, .member_entry, #help_topics li, .ipsBox_container .ipsType_pagetitle, .userpopup dl, #announcements td, .preview_info, .sideVerticalList li, fieldset.with_subhead ul, .ipsList_data li, .ipsList_withminiphoto li, table.ipb_table td, .store_categories li, #mini_cart li, #index_stats div[id*="statusReply"], #ipg_category .ipg_category_row, .block_inner .ipb_table td, .gallery_pane h2, .status_feedback li[id*="statusReply"], .ipsSideMenu ul li, #usercp_content .ipsType_subtitle, .ipbfs_login_row, .articles .block-1, .articles .type-1x2x2 .article_row, #idm_category .idm_category_row, #category_list li a, .ipsComment {
    border: none !important;
}



.row1, .post_block.row1 {
    background-color: transparent;
    color: rgb(255, 255, 255);
}


.ipsBox {
    background: transparent;
}

#profile_background > .ipsLayout {
    position: relative;
    margin-top: -259px;
}

#shoutbox-shouts-table{
border: none;
}
.ipsVerticalTabbed_tabs li {
    color: #FFFFFF;
    border-bottom: 0px solid #e9ebed;
    background: transparent;
}

#shoutbox-shouts-table .row2 td {
   border-bottom: 0px solid #d5dde5;
}

.ipsSideBlock h3, .ipsSideBlock h3 a, .general_box h3, .general_box h3 a, .bar, .bar a {
    color: white !important;
    text-shadow: none;
}

.ipsVerticalTabbed_tabs>ul {
    width: 149px !important;
    margin-top: 10px;
    border-top: 0px solid #e9ebed;
    border-left: 0px solid #e9ebed;
}

#logo {
    float: left;
    z-index: 10;
    position: absolute;
}

.row2, .post_block.row2 {
   background-color: transparent;
}

.maintitle{
background: transparent;
border: none;
box-shadow: none;
}

.post_block {
    background-color: transparent;
}

.post_block h3 {
    background: transparent url('http://fastfrag.ru/uploads/imgs/pre_1427283140__triangles.png');
}

.bar, .general_box h3 {
    background: transparent url('http://fastfrag.ru/uploads/imgs/pre_1427283140__triangles.png');
    box-shadow: none !important;
border: none !important;
}

.ipsVerticalTabbed_tabs li.active a {
    background: transparent url('http://fastfrag.ru/uploads/imgs/pre_1427283140__triangles.png');
color: #FFFFFF;
}

#footer_utilities {
display: none;
}

#user_utility_links a {
    background: transparent;
    box-shadow: none;
    color: #fff;
    display: inline-block;
    padding: 0 10px;
    border-radius: 3px;
    line-height: 30px;
    height: 30px;
    text-shadow: none;
    border: 0;
}
#profile_panes_wrap .reputation {
    background: url('http://fastfrag.ru/uploads/imgs/pre_1427283140__triangles.png');
}

#profile_panes_wrap .reputation .title {
display: none;
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@-o-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@-o-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@-moz-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@-webkit-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

.fadeOut {
	-webkit-animation-name: fadeOut;
	-moz-animation-name: fadeOut;
	-o-animation-name: fadeOut;
	animation-name: fadeOut;}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

.gif { 
  background: url('http://37.media.tumblr.com/tumblr_mbha9qWF401qcixnko4_500.gif');
  width: 100%;  
  height: 100%;
  position: fixed; 
  top: 0; left: 0;
  -webkit-animation: fadeOut 9s infinite;
  -moz-animation: fadeOut 9s infinite;
  animation: fadeOut 9s infinite;
}
html { 
  background: #550703; width:100%; height: 100%; overflow-x: hidden;
}

.ipsBox_container {
    background: transparent;
    border: none !important;
    color: white !important;
}

.wrapper { margin-top:0%; }
.marvel { 
  border: solid 1px #fff;
  padding: 8px 4px 0 0;
  animation: zoomOut 9s ease-in-out infinite;
  -webkit-animation: zoomOut 9s ease-in-out infinite;
  margin: auto auto;
  text-align: center;
  color: #fff; 
  width: 570px; 
  margin-top: 50px;  
  font-size: 15em; 
  line-height: .80;
  font-family: "BentonSansExtraCompBlack", sans-serif; 
}
.studios { 
  font-family: "Orbitron", sans-serif;
  animation: zoomOut 9s ease-in-out infinite;
  -webkit-animation: zoomOut 9s ease-in-out infinite ;
  font-weight: bolder;
  color: #fff;
  letter-spacing: 67px;
  text-align: center;
  position: relative;
  margin: 7px 15px 7px 85px;
}
body {     
  background: #550703;
}
</style>

 

Дополнено 1 minute later

Без названия: 

<canvas id="yo"></canvas>
<style>
body {
color: black;
} 

#logo {
float: left;
z-index: 10;
position: absolute;
}

#user_latest_status .status_arrow {
border-color: transparent rgba(77, 0, 222, 0.35) transparent transparent;
}

#user_utility_links a {
background: rgba(163, 181, 213, 0.55);
}

.desc.lighter, .desc.lighter.blend_links a {
color: black;
}

#user_latest_status>div {
background-color: rgba(198, 175, 213, 0.65);
}

.row2, .post_block.row2 {
background: transparent;
}

.ipsVerticalTabbed_tabs li a:hover {
background: transparent;
}

.maintitle {
background: transparent;
border: none;
}

.desc, .desc.blend_links a, p.posted_info {
color: black;
}

#profile_panes_wrap .reputation {
background: rgba(212, 244, 213, 0.73);
}

.ipsBox {
background: transparent;
}

.ipsUserPhoto {
background: transparent;
border-radius: 50%;
box-shadow: none !important;
border: 0px solid black;
}

.content_border {
border: none !important;
}

.status_update {
background: transparent;
}

canvas {
top: 0;
left: 0;
position: fixed;
}

a {
color: rgb(77, 0, 222);
}

#profile_panes_wrap .reputation .title {
display: none;
}

.bar, .ipsSideBlock h3, .general_box h3 {
border: none;
text-shadow: none;
background: transparent;
}

#idm_category .idm_category_row, .store_categories li, #idm_categories a, .ipsList_data li, .ipsList_withminiphoto li, table.ipb_table tr td {
background-image: none;
}

.ipsBox_container {
border: none;
}

.ipsVerticalTabbed_tabs li.active a {
background: rgba(181, 128, 213, 0.45);
width: 134px;
}

.ipsVerticalTabbed_tabs>ul{
border: none !important;
}

.ipsVerticalTabbed_tabs li {
background: transparent;
border: none !important;
}
#recentajaxcontent li, #idm_categories a, #index_stats .status_list li, #panel_files .file_listing li, #panel_screenshots #ss_linked li, .file_listing, #cart_totals td, div#member_filters li, #files li, #order_review td, #package_details .package_info, .block_list li, .package_view_top, .member_entry, #help_topics li, .ipsBox_container .ipsType_pagetitle, .userpopup dl, #announcements td, .preview_info, .sideVerticalList li, fieldset.with_subhead ul, .ipsList_data li, .ipsList_withminiphoto li, table.ipb_table td, .store_categories li, #mini_cart li, #index_stats div[id*="statusReply"], #ipg_category .ipg_category_row, .block_inner .ipb_table td, .gallery_pane h2, .status_feedback li[id*="statusReply"], .ipsSideMenu ul li, #usercp_content .ipsType_subtitle, .ipbfs_login_row, .articles .block-1, .articles .type-1x2x2 .article_row, #idm_category .idm_category_row, #category_list li a, .ipsComment {
border: none !important;
}

#footer_utilities {
display: none;
}

.ipsSideBlock, .general_box {
border: none;
background: transparent;
}

.border, .statistics, .post_block, .ipsComment, .popupInner, .no_messages, .poll_question ol, .ipsBox_container, .ipsFloatingAction, .column_view .post_body {
background: rgba(181, 128, 213, 0.45);
}

</style>
<script>
var w = window.innerWidth;
var h = window.innerHeight;
var canv = document.getElementById("yo");
canv.width = w;
canv.height = h;
var cont = canv.getContext('2d');
cont.fillStyle = "#ddffee";
cont.fillRect(0,0,w,h);
var trailcount = 0;
var canv2 = document.createElement("canvas");
canv2.width = w;
canv2.height = h;
var cont2 = canv2.getContext('2d');

function trail(x,y) {
this.id = trailcount;
trailcount++;
this.x = x,
this.y = y,
this.colr = 0,
this.colg = Math.floor((Math.random() * 120) + 1) + 135,
this.colb = Math.floor((Math.random() * 120) + 1) + 135,
this.type = Math.floor((Math.random() * 3) + 1),
this.dirx = Math.floor((Math.random() * 2) + 1),
this.diry = Math.floor((Math.random() * 2) + 1),
this.c = [0,0,0,0],
this.run = function() {

this.c[0] = this.c[0] + 0.01;
this.speed = Math.sin(this.c[0]) * 0.5 + 1;

this.c[1] = this.c[1] + (0.01*this.speed);
this.c[2] = this.c[2] + Math.sin(this.c[1]) * (0.05 * this.speed);
this.c[3] = this.c[3] + Math.cos(this.c[2]) * (0.05 * this.speed);
this.speedx = this.speed;
this.speedy = this.speed;
if (this.dirx==1) { this.speedx = -this.speed; }
if (this.diry==1) { this.speedy = -this.speed; }
this.y = this.y + Math.cos(this.c[3]) * ((this.type*1.5)*this.speedx);
this.x = this.x + Math.sin(this.c[3]) * ((this.type*1.5)*this.speedy);

// loop movement
if (this.x < 0) { this.x = w; }
if (this.y < 0) { this.y = h; }
if (w < this.x) { this.x = 0; }
if (h < this.y) { this.y = 0; }

this.arcsize = Math.sin(this.type - this.c[0]) * this.type * 10;
//this.arcsize = (this.type-(this.c[0]))*8;
if (this.arcsize < 0.1) { this.arcsize = 0.1; }
cont.fillStyle = "rgba("+this.colg+","+this.colb+",150,0.5)";
cont.beginPath();
cont.arc(this.x, this.y, this.arcsize, 0, 2*Math.PI);
cont.fill(); 
cont.strokeStyle = "rgba(0,50,150,0.3)";
cont.stroke(); 


var newtrail = Math.floor((Math.random() * 20) + 1);
if (newtrail == 10 && trails.length < 50) {
trails.push(new trail(this.x,this.y));
}

// destroy
if (this.arcsize < this.c[0]) {
killTrail(this.id);
}

}
}

function killTrail(id) {
for (j=0; j<trails.length; j++) {
if (trails[j].id == id) {
trails.splice(j,1);
}
}
}

var trails = [
new trail(Math.floor((Math.random() * w) + 1),Math.floor((Math.random() * h) + 1)),
new trail(Math.floor((Math.random() * w) + 1),Math.floor((Math.random() * h) + 1)),
new trail(Math.floor((Math.random() * w) + 1),Math.floor((Math.random() * h) + 1)),
new trail(Math.floor((Math.random() * w) + 1),Math.floor((Math.random() * h) + 1)),
new trail(Math.floor((Math.random() * w) + 1),Math.floor((Math.random() * h) + 1)),
new trail(Math.floor((Math.random() * w) + 1),Math.floor((Math.random() * h) + 1))
];

setInterval(function(){
//cont.drawImage(canv2,0,1);
cont.fillStyle = "rgba(200,255,240,0.015)";
cont.fillRect(0,0,w,h);
for (i=0; i<trails.length; i++) {
trails[i].run(); 
}
//cont2.drawImage(canv,0,0);
},1000/30);
</script>

 

  • Лайк 1
Ссылка на комментарий
  • 7 месяцев спустя...
voodnik Новичёк

voodnik

Опубликовано
  • Автор
Опубликовано

Circle:
uLL0jpbr8MI.jpg 

<canvas id="c" width="1280" height="933"></canvas>
<style>
body{margin:0;}
canvas {
position: fixed;
top: 0;
left: 0;
}

a {
    color: #4F5ED1;
}

#user_latest_status .status_arrow {
display: none;
}

body {
color: white;
}

#user_latest_status>div {
    background-color: rgba(235, 241, 247, 0.23);
    color: #D8D8D8;
    text-shadow: none;
}


a:hover { 
color: white;
}

.status_update {
background: transparent;
}

.content_border {
border: none;
}

.post_block h3 a {
color: white !important;
}

.row2, .post_block.row2 {
background: transparent;
}

.ipsVerticalTabbed_tabs li a {
color: #4F5ED1;
}

.ipsVerticalTabbed_tabs li a:hover {
color: #4F5ED1 !important;
} 

.ipsUserPhoto {
    padding: 0px;
    border: none;
    border-radius: 50%;
    box-shadow: none !important;
}

.ipsBox {
background: transparent;
}

.ipsVerticalTabbed_tabs>ul {
border: none;
}

.steamprofile {
    background: transparent !important;
}

.steamprofile .sp-extra {
background: transparent;
}

.steamprofile:hover {
background: transparent;
}

.steamprofile .sp-online a {
    color: aqua;
}

.steamprofile * {
color: aqua;
}

.steamprofile .sp-bg-game, .steamprofile .sp-bg-fade {
    background-position: left;
}

.steamprofile .sp-online .sp-avatar, .steamprofile .sp-in-game .sp-avatar, .steamprofile .sp-offline .sp-avatar {
    background: #241967;
    border-radius: 3px;
}

.steamprofile .sp-bg-fade {
    background: #313131;
}

.steamprofile .sp-in-game a {
color: aqua;
}

.ipsVerticalTabbed_tabs li {
background: transparent;
border: none;
}

.ipsVerticalTabbed_tabs li.active a {
background: transparent;
color: white;
}

#idm_category .idm_category_row, .store_categories li, #idm_categories a, .ipsList_data li, .ipsList_withminiphoto li, table.ipb_table tr td {
background: transparent;
}

.ipsSideBlock h3, .ipsSideBlock h3 a, .general_box h3, .general_box h3 a, .bar, .bar a {
color: white;
text-shadow: none;
}

#profile_panes_wrap .reputation .title {
display: none;
}

.reputation.positive, .members li.positive {
    background: linear-gradient(to right, #05F3A3, #F136A6);
}

.post_block h3 {
    background: #3D1B68;
box-shadow: none !important;
text-shadow: none;
border: none !important;
}

#logo {
    float: left;
    z-index: 10;
    position: absolute;
}

.ipsSideBlock, .general_box { 
background: transparent;
border: none !important;
}

.ipsBox_container {
border: none;
}

#recentajaxcontent li, #idm_categories a, #index_stats .status_list li, #panel_files .file_listing li, #panel_screenshots #ss_linked li, .file_listing, #cart_totals td, div#member_filters li, #files li, #order_review td, #package_details .package_info, .block_list li, .package_view_top, .member_entry, #help_topics li, .ipsBox_container .ipsType_pagetitle, .userpopup dl, #announcements td, .preview_info, .sideVerticalList li, fieldset.with_subhead ul, .ipsList_data li, .ipsList_withminiphoto li, table.ipb_table td, .store_categories li, #mini_cart li, #index_stats div[id*="statusReply"], #ipg_category .ipg_category_row, .block_inner .ipb_table td, .gallery_pane h2, .status_feedback li[id*="statusReply"], .ipsSideMenu ul li, #usercp_content .ipsType_subtitle, .ipbfs_login_row, .articles .block-1, .articles .type-1x2x2 .article_row, #idm_category .idm_category_row, #category_list li a, .ipsComment {
border: none !important;
}

#idm_category .idm_category_row, .store_categories li, #idm_categories a, .ipsList_data li, .ipsList_withminiphoto li, table.ipb_table tr td {
background: transparent;
}

#footer_utilities {
display: none;
}

.bar, .ipsSideBlock h3, .general_box h3 {
background: transparent;
border: none !important;
}

.border, .statistics, .post_block, .ipsComment, .popupInner, .no_messages, .poll_question ol, .ipsBox_container, .ipsFloatingAction, .column_view .post_body {
background: transparent;
}

</style>
<script>

(function() {
  var H, Particle, W, animate, animationLoop, canvas, colors, ctx, damping_constant, density, display_list, draw, init, last_time, min_distance, num_particles, onMouseMove, spring_constant, text_array, update;

  window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
      return window.setTimeout(callback, 1000 / 60);
    };
  })();

  canvas = null;

  ctx = null;

  num_particles = 300;

  density = 8;

  min_distance = 70;

  text_array = [];

  display_list = [];

  last_time = null;

  spring_constant = 0.2;

  damping_constant = 0.08;

  colors = ['#18aDF4', '#F4eA03', '#f00700', '#00f415', '#FF00A5', '#1A00A9'];

  W = window.innerWidth;

  H = window.innerHeight;

  init = function(e) {
    var i, _i, _results;
    canvas = document.getElementById('c');
    ctx = canvas.getContext('2d');
    canvas.width = W;
    canvas.height = H;
    canvas.addEventListener('mousemove', onMouseMove);
    canvas.addEventListener('touchstart', onTouchStart);

    _results = [];
    for (i = _i = 0; 0 <= num_particles ? _i < num_particles : _i > num_particles; i = 0 <= num_particles ? ++_i : --_i) {
      _results.push(display_list.push(new Particle));
    }
    return _results;
  };

  onTouchStart = function(e) {
    var child, d, dx, dy, mx, my, _i, _len, _results;
    mx = e.offsetX || e.pageX;
    my = e.offsetY || e.pageY;
    _results = [];
    for (_i = 0, _len = display_list.length; _i < _len; _i++) {
      child = display_list[_i];
      dx = child.x - mx;
      dy = child.y - my;
      d = Math.sqrt(dx * dx + dy * dy);
      if (d < min_distance) {
        child.speed_x += dx * 0.05;
        _results.push(child.speed_y += dy * 0.05);
      } else {
        _results.push(void 0);
      }
    }
    return _results;
  };


  onMouseMove = function(e) {
    var child, d, dx, dy, mx, my, _i, _len, _results;
    mx = e.offsetX || e.pageX;
    my = e.offsetY || e.pageY;
    _results = [];
    for (_i = 0, _len = display_list.length; _i < _len; _i++) {
      child = display_list[_i];
      dx = child.x - mx;
      dy = child.y - my;
      d = Math.sqrt(dx * dx + dy * dy);
      if (d < min_distance) {
        child.speed_x += dx * 0.05;
        _results.push(child.speed_y += dy * 0.05);
      } else {
        _results.push(void 0);
      }
    }
    return _results;
  };

  animate = function() {
    animationLoop();
    return requestAnimFrame(animate);
  };

  animationLoop = function() {
    var current_time, dt;
    if (!last_time) {
      last_time = (new Date).getTime();
    }
    current_time = (new Date).getTime();
    dt = (current_time - last_time) / 1000;
    last_time = current_time;
    window.fps = 1 / dt;
    draw();
    return update();
  };

  draw = function() {
    var child, _i, _len, _results;
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, W, H);
    _results = [];
    for (_i = 0, _len = display_list.length; _i < _len; _i++) {
      child = display_list[_i];
      if (typeof child.draw !== 'function') {
        continue;
      }
      ctx.save();
      if (!isNaN(child.x || isNaN(child.y))) {
        ctx.translate(child.x, child.y);
      }
      if (!isNaN(child.scale_x || isNaN(child.scale_y))) {
        ctx.scale(child.scale_x, child.scale_y);
      }
      if (!isNaN(child.alpha)) {
        ctx.globalAlpha = child.alpha;
      }
      child.draw();
      _results.push(ctx.restore());
    }
    return _results;
  };

  update = function() {
    var child, _i, _len, _results;
    _results = [];
    for (_i = 0, _len = display_list.length; _i < _len; _i++) {
      child = display_list[_i];
      if (typeof child.update === 'function') {
        _results.push(child.update());
      } else {
        _results.push(void 0);
      }
    }
    return _results;
  };

  Particle = (function() {
    function Particle(radius, x, y) {
      this.radius = radius != null ? radius : 1;
      this.x = x != null ? x : Math.random() * W;
      this.y = y != null ? y : Math.random() * H;
      this.speed_x = 120 - Math.random() * 0;
      this.speed_y = 120 - Math.random() * 0;
      this.ox = this.x;
      this.oy = this.y;
      this.color = "#ff0";
      this.alpha = 1;
      this.reset();
    }

    Particle.prototype.draw = function() {
      ctx.fillStyle = this.color;
      ctx.beginPath();
      ctx.arc(4, 4, 4, 0, Math.PI * 2, true);
      return ctx.fill();
    };

    Particle.prototype.update = function() {
      var acc_x, acc_y;
      acc_x = -spring_constant * (this.x - this.ox) - damping_constant * this.speed_x;
      acc_y = -spring_constant * (this.y - this.oy) - damping_constant * this.speed_y;
      this.speed_x += acc_x;
      this.speed_y += acc_y;
      this.alpha -= 0.03;
      this.scale_x += 0.08;
      this.scale_y += 0.08;
      this.x += this.speed_x;
      this.y += this.speed_y;
      if (this.alpha <= 0) {
        return this.reset();
      }
    };

    Particle.prototype.reset = function() {
      this.alpha = Math.random();
      this.scale_x = this.scale_y = Math.random();
      return this.color = colors[~~(Math.random() * colors.length)];
    };

    Particle.prototype.reposition = function() {
      var point;
      point = text_array[~~(Math.random() * text_array.length)];
      this.ox = this.x = point.x + ~~(3 + Math.random() * 6);
      return this.oy = this.y = point.y + ~~(3 + Math.random() * 6);
    };

    return Particle;

  })();

  init();

  animate();

}).call(this);


</script>

 

  • Нравится 1
Ссылка на комментарий
voodnik Новичёк

voodnik

Опубликовано
  • Автор
Опубликовано

Line:
ejZH4OtvML8.jpg
  

<canvas id="canvas" width="1280" height="572"></canvas>
<style>
body {
background: #000;
}

canvas {
    display: block;
    width: 1920px;
    height: 955px;
    top: 0;
    left: 0;
    position: fixed;
    background: black;
}

#footer_utilities {
display: none
}

.warn_panel {
border: none;
}

.bar, .general_box h3 {
    background: transparent; 
    text-shadow: none;
    box-shadow: none !important;
}

.row2, .post_block.row2 {
 background: transparent; 
}

.post_block h3 {
background: transparent;
}

.maintitle {
background: none;
box-shadow: none !important;
border: none;
}

.post_body {
background: transparent !important;
border: none !important;
}

.border, .statistics, .post_block, .ipsComment, .popupInner, .no_messages, .poll_question ol, .ipsBox_container, .ipsFloatingAction, .column_view .post_body {
background: none;
}

#profile_panes_wrap .reputation {
background: rgba(208, 8, 8, 0.48);;
box-shadow: none;
}

#profile_panes_wrap .reputation .title {
display: none;
}

.row1, .post_block.row1 {
    background-color: transparent;
    color: rgb(255, 255, 255);
}

#shoutbox-shouts-table{
border: none;
}

#shoutbox-shouts-table .row2 td {
   border-bottom: 0px solid #d5dde5;
}


.ipsBox_container {
background: url('http://fastfrag.ru/uploads/imgs/pre_1427283140__triangles.png');
border: none !important;
color: white;
}

.ipsBox {
background: none;
}

.ipsVerticalTabbed_tabs>ul {
border-top: none;
border-left: none;
border-bottom: none;
}

#recentajaxcontent li, #idm_categories a, #index_stats .status_list li, #panel_files .file_listing li, #panel_screenshots #ss_linked li, .file_listing, #cart_totals td, div#member_filters li, #files li, .ipsType_sectiontitle, #order_review td, #package_details .package_info, .block_list li, .package_view_top, .member_entry, #help_topics li, .ipsBox_container .ipsType_pagetitle, .userpopup dl, #announcements td, .preview_info, .sideVerticalList li, fieldset.with_subhead ul, .ipsList_data li, .ipsList_withminiphoto li, table.ipb_table td, .store_categories li, #mini_cart li, #index_stats div[id*="statusReply"], #ipg_category .ipg_category_row, .block_inner .ipb_table td, .gallery_pane h2, .status_feedback li[id*="statusReply"], .ipsSideMenu ul li, #usercp_content .ipsType_subtitle, .ipbfs_login_row, .articles .block-1, .articles .type-1x2x2 .article_row, #idm_category .idm_category_row, #category_list li a, .ipsComment {
border-bottom: none;
}

.content_border {
border: none;
}

.ipsVerticalTabbed_tabs li {
    background: transparent;
    border-bottom: none;
}

.ipsVerticalTabbed_tabs li.active a {
    background: url('http://fastfrag.ru/uploads/imgs/pre_1427283140__triangles.png');
    color: white;
    width: 134px;
}

.status_update {
background: none;
}

</style>
<script>
var canvas,
	ctx,
	width,
	height,
	size,
	lines,
	tick;

function line() {
	this.path = [];
	this.speed = rand( 10, 20 );
	this.count = randInt( 10, 30 );
	this.x = width / 2, + 1;
	this.y = height / 2 + 1;
	this.target = { x: width / 2, y: height / 2 };
	this.dist = 0;
	this.angle = 0;
	this.hue = tick / 5;
	this.life = 1;
	this.updateAngle();
	this.updateDist();
}

line.prototype.step = function( i ) {
	this.x += Math.cos( this.angle ) * this.speed;
	this.y += Math.sin( this.angle ) * this.speed;
	
	this.updateDist();
	
	if( this.dist < this.speed ) {
		this.x = this.target.x;
		this.y = this.target.y;
		this.changeTarget();
	}
		
	this.path.push( { x: this.x, y: this.y } );	
	if( this.path.length > this.count ) {
		this.path.shift();
	}
	
	this.life -= 0.001;
	
	if( this.life <= 0 ) {
		this.path = null;
		lines.splice( i, 1 );	
	}
};

line.prototype.updateDist = function() {
	var dx = this.target.x - this.x,
		dy = this.target.y - this.y;
	this.dist = Math.sqrt( dx * dx + dy * dy );
}

line.prototype.updateAngle = function() {
	var dx = this.target.x - this.x,
		dy = this.target.y - this.y;
	this.angle = Math.atan2( dy, dx );
}

line.prototype.changeTarget = function() {
	var randStart = randInt( 0, 3 );
	switch( randStart ) {
		case 0: // up
			this.target.y = this.y - size;
			break;
		case 1: // right
			this.target.x = this.x + size;
			break;
		case 2: // down
			this.target.y = this.y + size;
			break;
		case 3: // left
			this.target.x = this.x - size;
	}
	this.updateAngle();
};

line.prototype.draw = function( i ) {
	ctx.beginPath();
	var rando = rand( 0, 1 );
	for( var j = 0, length = this.path.length; j < length; j++ ) {
		ctx[ ( j === 0 ) ? 'moveTo' : 'lineTo' ]( this.path[ j ].x + rand( -rando, rando ), this.path[ j ].y + rand( -rando, rando ) );
	}
	ctx.strokeStyle = 'hsla(' + rand( this.hue, this.hue + 30 ) + ', 80%, 55%, ' + ( this.life / 3 ) + ')';
	ctx.lineWidth = rand( 0.1, 2 );
	ctx.stroke();
};

function rand( min, max ) {
	return Math.random() * ( max - min ) + min;
}

function randInt( min, max ) {
	return Math.floor( min + Math.random() * ( max - min + 1 ) );
};

function init() {
	canvas = document.getElementById( 'canvas' );
	ctx = canvas.getContext( '2d' );
	size = 20;
	lines = [];
	reset();
	loop();
}

function reset() {
	width = Math.ceil( window.innerWidth / 12 ) * 12;
	height = Math.ceil( window.innerHeight / 12 ) * 12;
	tick = 0;
	
	lines.length = 0;	
	canvas.width = width;
	canvas.height = height;
}

function create() {
	if( tick % 10 === 5 ) {		
		lines.push( new line());
	}
}

function step() {
	var i = lines.length;
	while( i-- ) {
		lines[ i ].step( i );	
	}
}

function clear() {
	ctx.globalCompositeOperation = 'destination-out';
	ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1';
	ctx.fillRect( 0, 0, width, height );
	ctx.globalCompositeOperation = 'lighter';
}

function draw() {
	ctx.save();
	ctx.translate( width / 3, height / 3 );
	ctx.rotate( tick * 0.001 );
	var scale = 0.8 + Math.cos( tick * 0.02 ) * 0.2;
	ctx.scale( scale, scale );
	ctx.translate( -width / 3, -height / 3 );
	var i = lines.length;
	while( i-- ) {
		lines[ i ].draw( i );	
	}
	ctx.restore();
}

function loop() {
	requestAnimationFrame( loop );
	create();
	step();
	clear();
	draw();
	tick++;
}

function onresize() {
	reset();	
}

window.addEventListener( 'resize', onresize );

init();
</script>

 

  • Нравится 1
Ссылка на комментарий
voodnik Новичёк

voodnik

Опубликовано
  • Автор
Опубликовано

Night sky:
M_38S9SsONM.jpg
  

<canvas id="canvas" width="1920" height="955"></canvas>
<style>
canvas {
  
  position: fixed;
  top: 0;
  left: 0;
}
</canvas>
	<style type="text/css">
#customBackground{

		background-color: #FFFFFF !important;
	
	background-image: url("http://fastfrag.ru/uploads/bgimages/bgimg-3303.jpg?nc=1454099896") !important;
		
			background-position: 50% 50%;
			background-repeat: no-repeat;
			-webkit-background-size: 100% 100%;
			-moz-background-size: 100% 100%;
			background-size: cover;
		
			height: 600px;
			margin: -50px -9px 0 -9px;
}

#profile_background > .ipsLayout{ position: relative; margin-top: -129px; }
#user_info_cell, #user_info_cell *{ color: #fff; text-shadow: rgba(0,0,0,0.9) 0px 1px 8px; }
.ipsLayout.ipsLayout_withleft{padding-left: 150px;background: none !important;}
#user_utility_links{ margin-top: 0; }

#user_utility_links a{
	background: url("http://fastfrag.ru/public/style_images/ff/trans50.png") repeat;
	background: rgba(0,0,0,0.5);
	-webkit-box-shadow: inset rgba(0,0,0,0.4) 0px 1px 3px, rgba(255,255,255,0.1) 0px 1px 0px;
	-moz-box-shadow: inset rgba(0,0,0,0.4) 0px 1px 3px, rgba(255,255,255,0.1) 0px 1px 0px;
	box-shadow: inset rgba(0,0,0,0.4) 0px 1px 3px, rgba(255,255,255,0.1) 0px 1px 0px;
	color: #fff;
	display: inline-block;
	padding: 0 10px;
	border-radius: 3px;
	line-height: 30px;
	height: 30px;
	text-shadow: rgba(0,0,0,0.4) 0px 1px 0px;
	border: 0;
}

#user_utility_links a:hover{
	background: url("http://fastfrag.ru/public/style_images/ff/trans70.png") repeat;
	background: rgba(0,0,0,0.7);
}

#user_utility_links img{ margin-right: 4px; }
</style>
<script type="text/javascript">
	ipb.profile.customization = 1;
</script>
<div class="noite"></div>

  <div class="constelacao"></div>

  <div class="lua">
    <div class="textura"></div>
  </div>

  <div class="chuvaMeteoro"></div>

  <div class="floresta">
    <img src="https://raw.githubusercontent.com/interaminense/starry-sky/master/src/img/bgTree.png" alt="" />
  </div>

</body>
<style>
* {
  box-sizing: content-box;
}

.status_update{
background: transparent;
}

.ipsVerticalTabbed_tabs>ul {
    border-top: 0px solid #e9ebed;
    border-left: 0px solid #e9ebed; 
}


.maintitle {
background: url('http://fastfrag.ru/uploads/imgs/pre_1427283140__triangles.png') rgb(28, 21, 44);
box-shadow: none;
}

.post_block h3 {
background: url('http://fastfrag.ru/uploads/imgs/pre_1427283140__triangles.png') rgb(28, 21, 44);
box-shadow: none !important;
}

.bar, .general_box h3 {
    background: url('http://fastfrag.ru/uploads/imgs/pre_1427283140__triangles.png') rgb(28, 21, 44);
box-shadow: none !important;
}

#profile_panes_wrap .reputation {
background: url('http://fastfrag.ru/uploads/imgs/pre_1427283140__triangles.png') rgb(28, 21, 44);
}

.row2, .post_block.row2 {
   background-color: transparent;
}

.post_body {
   background: transparent !important;
}

.row1, .post_block.row1 {
    background-color: transparent;
    color: rgb(255, 255, 255);
}

#shoutbox-shouts-table{
border: none;
}

#shoutbox-shouts-table .row2 td {
   border-bottom: 0px solid #d5dde5;
}

#recentajaxcontent li, #idm_categories a, #index_stats .status_list li, #panel_files .file_listing li, #panel_screenshots #ss_linked li, .file_listing, #cart_totals td, div#member_filters li, #files li, .ipsType_sectiontitle, #order_review td, #package_details .package_info, .block_list li, .package_view_top, .member_entry, #help_topics li, .ipsBox_container .ipsType_pagetitle, .userpopup dl, #announcements td, .preview_info, .sideVerticalList li, fieldset.with_subhead ul, .ipsList_data li, .ipsList_withminiphoto li, table.ipb_table td, .store_categories li, #mini_cart li, #index_stats div[id*="statusReply"], #ipg_category .ipg_category_row, .block_inner .ipb_table td, .gallery_pane h2, .status_feedback li[id*="statusReply"], .ipsSideMenu ul li, #usercp_content .ipsType_subtitle, .ipbfs_login_row, .articles .block-1, .articles .type-1x2x2 .article_row, #idm_category .idm_category_row, #category_list li a, .ipsComment {
    border-bottom: 0px solid #f3f3f3;
}

blockquote.ipsBlockquote {
    background: rgba(255, 255, 255, 0.74);
}

.ipsBox_container {
    background: transparent;
    border: 0px solid black !important;
    color: white !important;
}

.border, .statistics, .post_block, .ipsComment, .popupInner, .no_messages, .poll_question ol, .ipsBox_container, .ipsFloatingAction, .column_view .post_body {
    background: url("http://fastfrag.ru/uploads/imgs/pre_1427283140__triangles.png");
}

#footer_utilities {
display: none;
}

.content_border{ 
border: none;
}

.warn_panel {
border: none;
} 

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  overflow-x: hidden;
}

#profile_panes_wrap .reputation .title {
display: none;
}

.ipsBox {
   background: transparent; 
}

.ipsVerticalTabbed_tabs li a {
    color: #D6D6D6;
}

.ipsVerticalTabbed_tabs li.active a {
    width: 133px;
    background: url('http://fastfrag.ru/uploads/imgs/pre_1427283140__triangles.png');
    color: #B7B7B7;
}

.title {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  color: #fff;
  font-weight: 100;
  font-size: 3em;
  font-family: 'Pacifico', cursive;
}

.title .avatar {
  width: 40px;
  height: 40px;
  background-image: url(../img/avatar.jpg);
  display: inline-block;
  border-radius: 50%;
  background-size: 100%;
}

.ipsVerticalTabbed_tabs li {
    background: transparent;
    border-bottom: 0px solid black;
}

.noite {
    background: -webkit-linear-gradient(top, rgb(0, 0, 0) 50%, rgb(25, 19, 39)80%, rgb(43, 32, 72));
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
}

.constelacao {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: rotate 600s infinite linear;
}

.estrela {
  background-color: white;
  border-radius: 50%;
  position: absolute;
  animation-name: estrela;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.estrela.style1 { animation-duration: 0.5s; animation-name: estrela; }
.estrela.style2 { animation-duration: 1s; animation-name: estrela; }
.estrela.style3 { animation-duration: 1.5s; animation-name: estrela; }
.estrela.style4 { animation-duration: 2s; animation-name: estrelaDestacada; }

.estrela.tam1 { width: 1px; height: 1px; }
.estrela.tam2 { width: 2px; height: 2px; }
.estrela.tam3 { width: 3px; height: 3px; }

.estrela.opacity1 { opacity:  1; }
.estrela.opacity2 { opacity: .5; }
.estrela.opacity3 { opacity: .1; }

.meteoro {
  position: absolute;
  background-color: #fff;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  transform: rotate(-35deg);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

.meteoro:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 0;
  height: 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 85px solid white;
  position: absolute;
  left: 2px;
  top: 0;
}

.meteoro.style1 { animation-name: meteoroStyle1; }
.meteoro.style2 { animation-name: meteoroStyle2; }
.meteoro.style3 { animation-name: meteoroStyle3; }
.meteoro.style4 { animation-name: meteoroStyle4; }

.lua {
  position: absolute;
  right: 200px;
  top: 150px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0 0 160px 0px #fff, 0 0 30px -4px #fff, 0 0 8px 2px rgba(255, 255, 255, 0.26);
  background-color: #fff;
  animation-name: lua;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 10s;
}

.lua .textura {
  background-image: url(https://raw.githubusercontent.com/interaminense/starry-sky/master/src/img/bgMoon.png);
  background-position: center;
  background-size: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.4;
}

.floresta {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.floresta img {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
#logo {
    float: left;
    z-index: 10;
    position: absolute;
}

@keyframes escurecer {
  0%   { top: 0; }
  100% { top: 100%; }
}

@keyframes estrela {
  0% {
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.05);
  }
  50% {
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.4);
  }
  100% {
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.05);
  }
}

@keyframes estrelaDestacada {
  0% {
    background-color: #FFFFFF;
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 1);
  }
  20% {
    background-color: #FFC4C4;
    box-shadow: 0 0 10px 0px rgb(255, 196, 196, 1);
  }
  80% {
    background-color: #C4CFFF;
    box-shadow: 0 0 10px 0px rgb(196, 207, 255, 1);
  }
  100% {
    background-color: #FFFFFF;
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.2);
  }
}

@keyframes meteoroStyle1 {
  0% { opacity: 0; right: 300px; top: 100px; }
  30% { opacity: .3; }
  60% { opacity: .3; }
  100% { opacity: 0; right: 1000px; top: 600px; }
}

@keyframes meteoroStyle2 {
  0% { opacity: 0; right: 700px; top: 100px; }
  30% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; right: 1400px; top: 600px; }
}

@keyframes meteoroStyle3 {
  0% { opacity: 0; right: 300px; top: 300px; }
  30% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; right: 1000px; top: 800px; }
}

@keyframes meteoroStyle4 {
  0% { opacity: 0; right: 700px; top: 300px; }
  30% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; right: 1400px; top: 800px; }
}

@keyframes lua {
  0%{
    box-shadow: 0 0 160px 0px #fff, 0 0 30px -4px #fff, 0 0 8px 2px rgba(255, 255, 255, 0.26);
  }
  50% {
    box-shadow: 0 0 80px 0px #fff, 0 0 30px -4px #fff, 0 0 8px 2px rgba(255, 255, 255, 0.26);
  }
  100% {
    box-shadow: 0 0 160px 0px #fff, 0 0 30px -4px #fff, 0 0 8px 2px rgba(255, 255, 255, 0.26);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
</style>
<script>
function init(){

  //estrelas

  var style = ["style1", "style2", "style3", "style4"];
  var tam = ["tam1", "tam1", "tam1", "tam2", "tam3"];
  var opacity = ["opacity1", "opacity1", "opacity1", "opacity2", "opacity2", "opacity3"];

  function getRandomArbitrary(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }

  var estrela = "";
  var qtdeEstrelas = 250;
  var noite = document.querySelector(".constelacao");
  var widthWindow = window.innerWidth;
  var heightWindow = window.innerHeight;

  for (var i = 0; i < qtdeEstrelas; i++) {
    estrela += "<span class='estrela " + style[getRandomArbitrary(0, 4)] + " " + opacity[getRandomArbitrary(0, 6)] + " "
    + tam[getRandomArbitrary(0, 5)] + "' style='animation-delay: ." +getRandomArbitrary(0, 9)+ "s; left: "
    + getRandomArbitrary(0, widthWindow) + "px; top: " + getRandomArbitrary(0, heightWindow) + "px;'></span>";
  }

  noite.innerHTML = estrela;

  //meteoros

  var numeroAleatorio = 5000;

  setTimeout(function(){
    carregarMeteoro();
  }, numeroAleatorio);

  function carregarMeteoro(){
    setTimeout(carregarMeteoro, numeroAleatorio);
    numeroAleatorio = getRandomArbitrary(5000, 10000);
    var meteoro = "<div class='meteoro "+ style[getRandomArbitrary(0, 4)] +"'></div>";
    document.getElementsByClassName('chuvaMeteoro')[0].innerHTML = meteoro;
    setTimeout(function(){
      document.getElementsByClassName('chuvaMeteoro')[0].innerHTML = "";
    }, 1000);
  }

}

window.onload = init;
</script>

 

  • Нравится 2
Ссылка на комментарий

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйтесь. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...