文本悬停效果,如挖空

时间:2018-12-04 15:09:52

标签: javascript html css

在这里,我有一支带tryimg的笔来找出错误。 问题是光标位置是页面加载的位置。而且我无法对不同的链接产生多重影响。 我想要达到的结果也是相同的:     https://laerkeandersen.com/ 笔的链接在这里:
    https://codepen.io/Killrockstar/pen/VVNoMa

var cursor = document.querySelector('.cursor');

var short_headline = document.querySelector('#__short_headline');
var short_headline_position = short_headline.getBoundingClientRect();

var brand = document.querySelector('#__brand');
var brand_position = brand.getBoundingClientRect();

var sales = document.querySelector('#__sales');
var sales_position = sales.getBoundingClientRect();

var interdisciplinary = document.querySelector('#__interdisciplinary');
var interdisciplinary_position = interdisciplinary.getBoundingClientRect();

var menu_about = document.querySelector("a[href='/#about']");
var menu_about_position = menu_about.getBoundingClientRect();


document.body.onmousemove = function(e) {
    /*Adjust the position of the cursor*/
    cursor.style.left=e.pageX-20+'px';
    cursor.style.top=e.pageY-20+'px';
    /*Adjust the radial-gradient*/
    short_headline.style.setProperty('--x',(e.pageX-short_headline_position.left)+'px');
    short_headline.style.setProperty('--y',(e.pageY-short_headline_position.top)+'px');

    /*Adjust the position of the cursor*/
    /*Adjust the radial-gradient*/
    brand.style.setProperty('--x',(e.pageX-brand_position.left)+'px');
    brand.style.setProperty('--y',(e.pageY-brand_position.top)+'px');

    /*Adjust the position of the cursor*/
    /*Adjust the radial-gradient*/
    sales.style.setProperty('--x',(e.pageX-sales_position.left)+'px');
    sales.style.setProperty('--y',(e.pageY-sales_position.top)+'px');

    /*Adjust the position of the cursor*/
    /*Adjust the radial-gradient*/
    interdisciplinary.style.setProperty('--x',(e.pageX-interdisciplinary_position.left)+'px');
    interdisciplinary.style.setProperty('--y',(e.pageY-interdisciplinary_position.top)+'px');


    menu_about.style.setProperty('--x',(e.pageX-menu_about_position.left)+'px');
    menu_about.style.setProperty('--y',(e.pageY-menu_about_position.top)+'px');
}

0 个答案:

没有答案