模仿锤子手机的bigbang效果 

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script src="jquery.js"></script>
    <style type="text/css">

        span{display: inline-block;background:linear-gradient(blue 10%,green);margin-right: 20px;font-size: 30px;margin-top: 10px;border-radius: 5px;color:white;font-weight:bold }


    </style>
</head>
<body style="height: 100%">
<div id="aa">　贝壳，大家一定都不陌生吧?在海滩，就有一个又一个、千奇百怪的贝壳。这次的综合课我们就做了一次贝壳工艺品。 </div>
<input type="button" value="bigbang" onclick="bang()">
<div id="bb"></div>
<script type="text/javascript">

    var ww=$('#aa').html().split("")
    var dd=ww.map(function(key){
        return '<span>'+key+'</span>';
    })
    function bang(){
        $('#bb').html(dd.join(''));
    }
</script>
</body>
</html>

　　

posted @ 2017-02-13 17:47  刘浩2561179983  阅读(228)  评论(0)    收藏  举报