es6+css3+媒体查询小动画 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content = "width=device-width" initial-scale="1.0">
    <meta name="renderer" content="webkit">
    <meta name="referrer" content="always">
    <title>amin</title>
    <style>
        *{
            margin:0;
            padding:0;
            text-shadow:3px 3px 0 rgba(0,0,0,0.2);
            font-family: sans-serif,Microsoft YaHei，cursive;
        }
        .jump{
            text-transform:uppercase;
            background-color: goldenrod;
            width:100%;
            padding-bottom:1em;
            text-align: center;
        }
       span{
          display:inline-block;
           font-size:500%;
      transition:transform 0.2s;
           color:#fff;
       
        }
        
       span:hover{
            color:#532;
            z-index:999;
            transform: translateY(-20px) rotate(10deg) scale(1.3); 
           -webkit-translateY(-20px) rotate(10deg) scale(1.3); 
        }
        @media screen and (max-width:780px){
             span{
          display:inline-block;
           font-size:350%;       
        }
         @media screen and (max-width:530px){
             span{
          display:inline-block;
           font-size:180%;
        }    
    </style> 
</head>
<body>
    <div class="jump">
    <h2>Jump!</h2>
    </div>
 <script >	
window.onload= function(){
    const jumpH2 = document.querySelector('h2')
    jumpH2.innerHTML=spanWrap(jumpH2.textContent);
    
        function spanWrap(headings){
        let jumps= [...headings];//字符串变字符数组。
        return jumps.map(jump => `<span>${jump}</span>`).join('');//map
        
    }
}
	</script>
</body>
</html>

　　

posted @ 2017-12-01 13:58  Esther_Cheung  阅读(366)  评论(0)    收藏  举报