Line 1: | Line 1: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<style> | <style> | ||
Line 153: | Line 57: | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
− | + | .box-info a{color: white; width: 100%;} | |
} | } |
Revision as of 20:55, 1 November 2017
<style>
html, body {
padding: 0; margin: 0; height: 100%;
}
.contain{
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; height: 100%;}
.contain .box {
height: 50%; width: 33.333%; background-repeat: no-repeat; background-size: 115%; background-position: 50% 50%; -webkit-transition: background-size 0.275s ease-in-out; transition: background-size 0.275s ease-in-out; flex-grow: 1; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
} .contain .box:hover{
background-size: 100%; } .box-info { background: rgba( 35, 35, 35, 0.7 ); box-sizing: border-box; height: 100%; width: 100%; -webkit-transition: opacity 0.45s ease-in-out; transition: opacity 0.45s ease-in-out; text-align: center; padding-bottom: 40%; padding-top: 40%; font-weight: 900; font-size: 30px; font-family: "Lato", Helvetica, Arial, sans-serif; color: #fff; opacity: 0; } .box-info:hover{ opacity: 1; } .box-info a{color: white; width: 100%;} } }
} </style>
<a>Design</a>
<a>Marcket Demand</a>
<a>Application prospect</a>
<a>Safety</a>
<a>Policy</a>
<a>Idea Exchanging</a>
<a>Science Popularization</a>
<a>Education</a>
</div> </div></div>
<script type="text/javascript"> function send(num) { var openClass = 'is-open'; var add1=document.getElementById(num); var add2=document.getElementById('Lay'+num); addClass(add1,openClass); addClass(add2,openClass); function hasClass(element,csName){ return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); };
function addClass(element,csName){
if(!hasClass(element,csName)){
element.className+=' '+csName;
} };} function show(num) { var openClass = 'is-open'; var remove1=document.getElementById(num); var remove2=document.getElementById('Lay'+num); deleteClass(remove1,openClass); deleteClass(remove2,openClass); function hasClass(element,csName){ return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); }; function deleteClass(element,csName){ if (hasClass(element,csName)) {
var reg = new RegExp("(\\s|^)" + csName + "(\\s|$)"); element.className = element.className.replace(reg, " "); }
}; }
</script> <script type="text/javascript"> ( function(window,document){
var layout = document.getElementById('layout'), menu = document.getElementById('menu'), menuLink = document.getElementById('menuLink'), content = document.getElementById('main');
function toggleClass(element, className) { var classes = element.className.split(/\s+/), length = classes.length, i = 0;
for(; i < length; i++) { if (classes[i] === className) { classes.splice(i, 1); break; } } // The className is not found if (length === classes.length) { classes.push(className); }
element.className = classes.join(' '); }
function toggleAll(e) { var active = 'active';
e.preventDefault(); toggleClass(layout, active); toggleClass(menu, active); toggleClass(menuLink, active); }
menuLink.onclick = function (e) { toggleAll(e); };
content.onclick = function(e) { if (menu.className.indexOf('active') !== -1) { toggleAll(e); } };
}(this, this.document)); </script>
<script type="text/javascript" >
function Show(tagId) { if (document.getElementById(tagId).style.display=="none") { document.getElementById(tagId).style.display="block"; } else { document.getElementById(tagId).style.display="none"; } }
</script> <script type="text/javascript" > (function() {
var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
// Main initHeader(); addListeners();
function initHeader() { width = window.innerWidth; height = window.innerHeight; target = {x: 0, y: height};
largeHeader = document.getElementById('large-header'); largeHeader.style.height = height+'px';
canvas = document.getElementById('demo-canvas'); canvas.width = width; canvas.height = height; ctx = canvas.getContext('2d');
// create particles circles = []; for(var x = 0; x < width*0.5; x++) { var c = new Circle(); circles.push(c); } animate(); }
// Event handling function addListeners() { window.addEventListener('scroll', scrollCheck); window.addEventListener('resize', resize); }
function scrollCheck() { if(document.body.scrollTop > height) animateHeader = false; else animateHeader = true; }
function resize() { width = window.innerWidth; height = window.innerHeight; largeHeader.style.height = height+'px'; canvas.width = width; canvas.height = height; }
function animate() { if(animateHeader) { ctx.clearRect(0,0,width,height); for(var i in circles) { circles[i].draw(); } } requestAnimationFrame(animate); }
// Canvas manipulation function Circle() { var _this = this;
// constructor (function() { _this.pos = {}; init(); console.log(_this); })();
function init() { _this.pos.x = Math.random()*width; _this.pos.y = height+Math.random()*100; _this.alpha = 0.1+Math.random()*0.3; _this.scale = 0.1+Math.random()*0.3; _this.velocity = Math.random(); }
this.draw = function() { if(_this.alpha <= 0) { init(); } _this.pos.y -= _this.velocity; _this.alpha -= 0.0005; ctx.beginPath(); ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false); ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')'; ctx.fill(); }; }
})(); </script> </body> </html>