JS 点击页面漂浮出文字2

Posted 2021-01-02 不如吃茶去v

<style>
.animate{
    animation:myfirst 3s;
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
    user-select:none;
}
@keyframes myfirst{
    0%   { transform: scale(1); }
    10%  { transform: scale(1.2); }
    20%  { transform: scale(1); }
    30%  { transform: scale(1.2); }
    40% { transform: scale(1); }
    50%  { transform: scale(1.2); }
    60% { transform: scale(1); }
    70%  { transform: scale(1.2); }
    80% { transform: scale(1); }
    90% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
</style>

<script>
$(document).click(function(e){    
    var list = ['学而时习之', '不亦说乎', '有朋自远方来', '不亦乐乎', '人不知而不愠', '不亦君子乎', '三人行 必有我师焉', '择其善者而从之', '其不善者而改之', '学而不思则罔', '思而不学则殆'];
    var lists = Math.floor(Math.random() * list.length);
    var colors = '#'+Math.floor(Math.random()*0xffffff).toString(16);
    var $i = $('<span class="animate" />').text( list[lists] );
    var xx = e.pageX || e.clientX + document.body.scroolLeft;
    var yy = e.pageY || e.clientY + document.body.scrollTop;

    $('body').append($i);
    $i.css({
        top: yy,
        left: xx,
        color: colors,
        transform: 'translate(-50%, -50%)',
        display: 'block',
        position: 'absolute',
        zIndex: 999999999999
    })  
    $i.animate({
        top: yy,
        opacity: .5
    }, 3000, function(){
        $i.remove();
    })     
})
</script>