HTML
<body class="bd">
<div class="bgcl" id="bdcl" style="background:#02BFB8"></div>
<div>
<div class="tcbg txtCenter">
<div class="txt color1" id="txtx"><i class="fa fa-quote-left icon"></i> My 66 year old son rates this colour very gorgeous :-\)</div>
<h5 class="designer color1" id="designer">-Copy it to your clipboard to use it.</h5>
<div style="margin-top:30px">
<a href="#" class="twitter" style="background:#22d4b6" id="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" target="view_window" style="background:#22d4b6" class="twitter tumblr" id="tumblr"><i class="fa fa-tumblr" id="tumblr" aria-hidden="true"></i></a>
<div class="twitter newQuote" style="background:#22d4b6" id="bbttnn" onclick="abbr()">New Quote</div>
</div>
</div>
</div>
</body>
CSS
bd{
width:100%;
height:100%;
}
.bgcl{
position:absolute;
width:100%;
height:100%;
transition: all 1s;
}
.tcbg{
position:absolute;
width:550px;
position: absolute;
left:50%;
margin-left:-275px;
top:200px;
padding:40px 50px;
background: #FFFFFF;
box-shadow: 0 30px 150px 0 rgba(0,0,0,0.10);
border-radius: 4px;
border: 1px solid rgba(0,0,0,0.1);
}
.icon{
font-size:38px;
transition: all 1s;
}
.color1{
color:#22d4b6;
transition: all 1s;
}
.txt{
font-size:30px;
font-family:DIN-Bold;
text-align: center;
transition: all 1s;
}
.designer{
font-family: DINCond-BoldAlternate;
font-weight:200;
text-align:right;
font-size:20px;
margin-top:24px;
transition: all 1s;
}
.twitter{
float:left;
text-align:center;
width:40px;
height:40px;
font-size:20px;
display: flex;
align-items: center;
justify-content: center;
border-radius:4px;
color:#fff;
transition: all 1s;
}
.twitter:hover{
opacity:0.7;
transition: all 1s;
}
.tumblr{
margin-left:16px;
transition: all 1s;
}
.newQuote{
font-family:DIN-Bold;
font-size:16px;
width:auto;
padding:16px;
position:absolute;
right:50px;
transition: all 1s;
}
JavaScript
function randomColor()
{
var col=["#333","#7f92ab","#a88a4d","#6993c3","#f9824c","#4c80a8","#44a7b5","#0f52df"];
var flo=Math.floor(Math.random() * col.length);
return col[flo];
}
function randomTxtx()
{
var jj=["It's sleek not just amazing!","This design has navigated right into my heart.","Found myself staring at it for minutes.","I want to learn this kind of hero! Teach me.","Amazing shapes!","Delightful, friend. I like the use of typography and layers!","Nice use of space grey in this shot =\)","So cool and fun =\)","Such radiant.","My 50 year old son rates this colour very beastly, friend.","Navigation, layers, shot, spaces – incredible mate","Revolutionary work you have here.","Ahhhhhhh...","Ivory. Engaging. It keeps your mind occupied while you wait."];
var flo=Math.floor(Math.random()*jj.length);
return jj[flo];
}
function abbr()
{
c=randomColor();
d=randomTxtx();
var div1=document.getElementById('bbttnn');
var txtx=document.getElementById('txtx');
var designer=document.getElementById('designer');
var twitter=document.getElementById('twitter');
var tumblr=document.getElementById('tumblr');
var bdcl=document.getElementById('bdcl');
bdcl.style.background=c;
txtx.style.color=c;
txtx.innerHTML=d;
designer.style.color=c;
div1.style.background=c;
twitter.style.background=c;
tumblr.style.background=c;
}
网友评论