Link Ipertestuale su testo

**LolloMazzy** · 21-05-2015, 16:58

Ciao ragazzi, spero di non aver errato sezione...
Vengo subito al dunque: sto cercando di imparare un po di html e css, e prendendo spunto da un tema di codepen, non riesco a far in modo di cliccare sopra alla scritta '@' che si trova al centro della pagina in modo tale che mi rimandi ad un altro file html.
La mia impressione è che il div della scritta si trovi un livello più basso del div inerente alal figura in movimento e percio non me la fa cliccare.
Vi posto il codice di html, css e js.

codice:

    
    
    
    
    	            	  

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">


    <title>HOME</title>
    
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">


    
    <style type="text/css">
	A:link, A:visited {text-decoration:none}
    </style>
    
    <style>
    body {
        height: 100vh;
        width: 100vw;
        display: block;
        align-items: center;
        justify-content: center;
        background: black;
        pointer-events: none;
    }


#wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left:0px;
}


.shape {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  mix-blend-mode: screen;
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation-iteration-count: infinite;
}
.shape:nth-of-type(1) {
  -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  background: deeppink;
  animation-name: shape-top;
}
.shape:nth-of-type(2) {
  -webkit-clip-path: polygon(100% 50%, 62% 100%, 0% 82%, 0% 18%, 62% 0%);
  background: deepskyblue;
  animation-name: shape-right;
}
.shape:nth-of-type(3) {
  -webkit-clip-path: polygon(50% 100%, 0% 62%, 18% 0%, 82% 0%, 100% 62%);
  background: gold;
  animation-name: shape-bottom;
}
.shape:nth-of-type(4) {
  -webkit-clip-path: polygon(0% 50%, 38% 0%, 100% 18%, 100% 82%, 38% 100%);
  background: LimeGreen;
  animation-name: shape-left;
}


@keyframes shape-top {
  25% {
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 120%, 50% 120%, 0% 50%);
  }
  50% {
    -webkit-clip-path: polygon(50% 0%, 100% 100%, 50% 100%, 50% 100%, 0% 100%);
  }
  75% {
    -webkit-clip-path: polygon(50% 45%, 70% 65%, 60% 100%, 40% 100%, 30% 65%);
  }
}
@keyframes shape-right {
  25% {
    -webkit-clip-path: polygon(100% 50%, 50% 100%, -20% 50%, -20% 50%, 50% 0%);
  }
  50% {
    -webkit-clip-path: polygon(100% 50%, 0% 100%, 0% 50%, 0% 50%, 0% 0%);
  }
  75% {
    -webkit-clip-path: polygon(55% 50%, 35% 70%, 0% 60%, 0% 40%, 35% 30%);
  }
}
@keyframes shape-bottom {
  25% {
    -webkit-clip-path: polygon(50% 100%, 0% 50%, 50% -20%, 50% -20%, 100% 50%);
  }
  50% {
    -webkit-clip-path: polygon(50% 100%, 0% 0%, 50% 0%, 50% 0%, 100% 0%);
  }
  75% {
    -webkit-clip-path: polygon(50% 55%, 30% 35%, 40% 0%, 60% 0%, 70% 35%);
  }
}
@keyframes shape-left {
  25% {
    -webkit-clip-path: polygon(0% 50%, 50% 0%, 120% 50%, 120% 50%, 50% 100%);
  }
  50% {
    -webkit-clip-path: polygon(0% 50%, 100% 0%, 100% 50%, 100% 50%, 100% 100%);
  }
  75% {
    -webkit-clip-path: polygon(45% 50%, 65% 30%, 100% 40%, 100% 60%, 65% 70%);
  }
}


    </style>


    
        <script src="js/prefixfree.min.js"></script>
    
 </head>


 <body>


  
    
<div id="wrapper">
    <div class="shape"></div>
    <div class="shape"></div>
    <div class="shape"></div>
    <div class="shape"></div>
    <div class="container">
	<a href"../../2-Home/Home.html">
            <p style="font-family: Stencil; font-size: 50px; color: black">@</p>
	</a>
  </div>
</div>
        
</body>
</html>

codice:

html,body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  pointer-events: none;
}


#wrapper {
  position: relative;
  width: 30vw;
  height: 30vw;
  z-index: 1;
}


.container {
    width: 10px;
    height: 10px;
    background: trasparent;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -115px;
    margin-left: -67px;
    text-align: center; /* orizzontale */
    line-height: 145px; /* verticale */
 }




.shape {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  mix-blend-mode: screen;
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation-iteration-count: infinite;
}
.shape:nth-of-type(1) {
  -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  background: deeppink;
  animation-name: shape-top;
}
.shape:nth-of-type(2) {
  -webkit-clip-path: polygon(100% 50%, 62% 100%, 0% 82%, 0% 18%, 62% 0%);
  background: deepskyblue;
  animation-name: shape-right;
}
.shape:nth-of-type(3) {
  -webkit-clip-path: polygon(50% 100%, 0% 62%, 18% 0%, 82% 0%, 100% 62%);
  background: gold;
  animation-name: shape-bottom;
}
.shape:nth-of-type(4) {
  -webkit-clip-path: polygon(0% 50%, 38% 0%, 100% 18%, 100% 82%, 38% 100%);
  background: LimeGreen;
  animation-name: shape-left;
}


@keyframes shape-top {
  25% {
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 120%, 50% 120%, 0% 50%);
  }
  50% {
    -webkit-clip-path: polygon(50% 0%, 100% 100%, 50% 100%, 50% 100%, 0% 100%);
  }
  75% {
    -webkit-clip-path: polygon(50% 45%, 70% 65%, 60% 100%, 40% 100%, 30% 65%);
  }
}
@keyframes shape-right {
  25% {
    -webkit-clip-path: polygon(100% 50%, 50% 100%, -20% 50%, -20% 50%, 50% 0%);
  }
  50% {
    -webkit-clip-path: polygon(100% 50%, 0% 100%, 0% 50%, 0% 50%, 0% 0%);
  }
  75% {
    -webkit-clip-path: polygon(55% 50%, 35% 70%, 0% 60%, 0% 40%, 35% 30%);
  }
}
@keyframes shape-bottom {
  25% {
    -webkit-clip-path: polygon(50% 100%, 0% 50%, 50% -20%, 50% -20%, 100% 50%);
  }
  50% {
    -webkit-clip-path: polygon(50% 100%, 0% 0%, 50% 0%, 50% 0%, 100% 0%);
  }
  75% {
    -webkit-clip-path: polygon(50% 55%, 30% 35%, 40% 0%, 60% 0%, 70% 35%);
  }
}
@keyframes shape-left {
  25% {
    -webkit-clip-path: polygon(0% 50%, 50% 0%, 120% 50%, 120% 50%, 50% 100%);
  }
  50% {
    -webkit-clip-path: polygon(0% 50%, 100% 0%, 100% 50%, 100% 50%, 100% 100%);
  }
  75% {
    -webkit-clip-path: polygon(45% 50%, 65% 30%, 100% 40%, 100% 60%, 65% 70%);
  }
}

codice:

!function(){function e(e,r){return[].slice.call((r||document).querySelectorAll(e))}if(window.addEventListener){var r=window.StyleFix={link:function(e){try{if("stylesheet"!==e.rel||e.hasAttribute("data-noprefix"))return}catch(t){return}var n,i=e.href||e.getAttribute("data-href"),a=i.replace(/[^\/]+$/,""),o=(/^[a-z]{3,10}:/.exec(a)||[""])[0],s=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(a)||[""])[0],l=/^([^?]*)\??/.exec(i)[1],u=e.parentNode,p=new XMLHttpRequest;p.onreadystatechange=function(){4===p.readyState&&n()},n=function(){var t=p.responseText;if(t&&e.parentNode&&(!p.status||p.status<400||p.status>600)){if(t=r.fix(t,!0,e),a){t=t.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,r,t){return/^([a-z]{3,10}:|#)/i.test(t)?e:/^\/\//.test(t)?'url("'+o+t+'")':/^\//.test(t)?'url("'+s+t+'")':/^\?/.test(t)?'url("'+l+t+'")':'url("'+a+t+'")'});var n=a.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");t=t.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+n,"gi"),"$1")}var i=document.createElement("style");i.textContent=t,i.media=e.media,i.disabled=e.disabled,i.setAttribute("data-href",e.getAttribute("href")),u.insertBefore(i,e),u.removeChild(e),i.media=e.media}};try{p.open("GET",i),p.send(null)}catch(t){"undefined"!=typeof XDomainRequest&&(p=new XDomainRequest,p.onerror=p.onprogress=function(){},p.onload=n,p.open("GET",i),p.send(null))}e.setAttribute("data-inprogress","")},styleElement:function(e){if(!e.hasAttribute("data-noprefix")){var t=e.disabled;e.textContent=r.fix(e.textContent,!0,e),e.disabled=t}},styleAttribute:function(e){var t=e.getAttribute("style");t=r.fix(t,!1,e),e.setAttribute("style",t)},process:function(){e("style").forEach(StyleFix.styleElement),e("[style]").forEach(StyleFix.styleAttribute)},register:function(e,t){(r.fixers=r.fixers||[]).splice(void 0===t?r.fixers.length:t,0,e)},fix:function(e,t,n){for(var i=0;i<r.fixers.length;i++)e=r.fixers[i](e,t,n)||e;return e},camelCase:function(e){return e.replace(/-([a-z])/g,function(e,r){return r.toUpperCase()}).replace("-","")},deCamelCase:function(e){return e.replace(/[A-Z]/g,function(e){return"-"+e.toLowerCase()})}};!function(){setTimeout(function(){},10),document.addEventListener("DOMContentLoaded",StyleFix.process,!1)}()}}(),function(e){function r(e,r,n,i,a){if(e=t[e],e.length){var o=RegExp(r+"("+e.join("|")+")"+n,"gi");a=a.replace(o,i)}return a}if(window.StyleFix&&window.getComputedStyle){var t=window.PrefixFree={prefixCSS:function(e,n){var i=t.prefix;if(t.functions.indexOf("linear-gradient")>-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/gi,function(e,r,t,n){return r+(t||"")+"linear-gradient("+(90-n)+"deg"})),e=r("functions","(\\s|:|,)","\\s*\\(","$1"+i+"$2(",e),e=r("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+i+"$2$3",e),e=r("properties","(^|\\{|\\s|;)","\\s*:","$1"+i+"$2:",e),t.properties.length){var a=RegExp("\\b("+t.properties.join("|")+")(?!:)","gi");e=r("valueProperties","\\b",":(.+?);",function(e){return e.replace(a,i+"$1")},e)}return n&&(e=r("selectors","","\\b",t.prefixSelector,e),e=r("atrules","@","\\b","@"+i+"$1",e)),e=e.replace(RegExp("-"+i,"g"),"-"),e=e.replace(/-\*-(?=[a-z]+)/gi,t.prefix)},property:function(e){return(t.properties.indexOf(e)?t.prefix:"")+e},value:function(e){return e=r("functions","(^|\\s|,)","\\s*\\(","$1"+t.prefix+"$2(",e),e=r("keywords","(^|\\s)","(\\s|$)","$1"+t.prefix+"$2$3",e)},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+t.prefix})},prefixProperty:function(e,r){var n=t.prefix+e;return r?StyleFix.camelCase(n):n}};!function(){var e={},r=[],n=getComputedStyle(document.documentElement,null),i=document.createElement("div").style,a=function(t){if("-"===t.charAt(0)){r.push(t);var n=t.split("-"),i=n[1];for(e[i]=++e[i]||1;n.length>3;){n.pop();var a=n.join("-");o(a)&&-1===r.indexOf(a)&&r.push(a)}}},o=function(e){return StyleFix.camelCase(e)in i};if(n.length>0)for(var s=0;s<n.length;s++)a(n[s]);else for(var l in n)a(StyleFix.deCamelCase(l));var u={uses:0};for(var p in e){var f=e[p];u.uses<f&&(u={prefix:p,uses:f})}t.prefix="-"+u.prefix+"-",t.Prefix=StyleFix.camelCase(t.prefix),t.properties=[];for(var s=0;s<r.length;s++){var l=r[s];if(0===l.indexOf(t.prefix)){var c=l.slice(t.prefix.length);o(c)||t.properties.push(c)}}"Ms"!=t.Prefix||"transform"in i||"MsTransform"in i||!("msTransform"in i)||t.properties.push("transform","transform-origin"),t.properties.sort()}(),function(){function e(e,r){return i[r]="",i[r]=e,!!i[r]}var r={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};r["repeating-linear-gradient"]=r["repeating-radial-gradient"]=r["radial-gradient"]=r["linear-gradient"];var n={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display",grid:"display","inline-grid":"display","min-content":"width"};t.functions=[],t.keywords=[];var i=document.createElement("div").style;for(var a in r){var o=r[a],s=o.property,l=a+"("+o.params+")";!e(l,s)&&e(t.prefix+l,s)&&t.functions.push(a)}for(var u in n){var s=n[u];!e(u,s)&&e(t.prefix+u,s)&&t.keywords.push(u)}}(),function(){function r(e){return a.textContent=e+"{}",!!a.sheet.cssRules.length}var n={":read-only":null,":read-write":null,":any-link":null,"::selection":null},i={keyframes:"name",viewport:null,document:'regexp(".")'};t.selectors=[],t.atrules=[];var a=e.appendChild(document.createElement("style"));for(var o in n){var s=o+(n[o]?"("+n[o]+")":"");!r(s)&&r(t.prefixSelector(s))&&t.selectors.push(o)}for(var l in i){var s=l+" "+(i[l]||"");!r("@"+s)&&r("@"+t.prefix+s)&&t.atrules.push(l)}e.removeChild(a)}(),t.valueProperties=["transition","transition-property"],e.className+=" "+t.prefix,StyleFix.register(t.prefixCSS)}}(document.documentElement);

**LolloMazzy** · 24-05-2015, 21:21

nessuno mi può dare una mano?

Discussione: Link Ipertestuale su testo

Strumenti discussione

Ricerca discussione

Visualizza

Link Ipertestuale su testo

Tag per questa discussione

Permessi di invio