MENU

css动画之鼠标移上去的元素变大

• April 21, 2019 • Read: 335 • 无聊

学了一段时间的html和css,今天突然就是想炫耀一下。毕竟,学习就是为了炫耀2333。给自己的小破网站加了个小动画。

不知道各位看官发现了没有,在我的破网站上,鼠标移动到段落,代码和图片上边之后,这个元素就会整体变大。好看不好看不说,毕竟看着很nb。这可不是用js实现的,我t娘的哪儿会js啊。。。用到了css3的特性,然后在站点后台把代码插进去了。前端学习的话,我收藏了一个非常nb的网站:点此直达

如下我插进去的css代码:

<style type="text/css">
pre,p,img{
    transition:all 800ms ease 100ms;
}
img:hover{
    transform:scale(1.1,1.1);
}
p:hover{
    transform:scale(1.1,1.1);
}
pre:hover{
    transform:scale(1.1,1.1);
}
</style>

更新4.22

听从了一个大佬的建议,把放大的动画改成了只有首页的文章简介放大以及图片会放大,其他的没了。的确和谐了一点2333。然后又从其他网站扒了一段js代码,就是本站的鼠标点击特效,点击出现小心心。

抓包把这个js抓出来了,如图:

myssr

代码如下:

<script>
!function(e, t, a) {
    function n() {
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
        o(),
        r()
    }
    function r() {
        for (var e = 0; e < d.length; e++)
            d[e].alpha <= 0 ? (t.body.removeChild(d[e].el),
            d.splice(e, 1)) : (d[e].y--,
            d[e].scale += .004,
            d[e].alpha -= .013,
            d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }
    function o() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
            t && t(),
            i(e)
        }
    }
    function i(e) {
        var a = t.createElement("div");
        a.className = "heart",
        d.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: s()
        }),
        t.body.appendChild(a)
    }
    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch (t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    e.requestAnimationFrame = function() {
        return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) {
            setTimeout(e, 1e3 / 60)
        }
    }(),
    n()
}(window, document);

</script>

更新4.23

再次优化了一下。修改之后的动画效果如下:鼠标移动到首页文章上之后,文章变大;鼠标移动到评论框之后评论框变大背景变白。

<style type="text/css">
#index article,img,#textarea{
    transition:all 500ms ease 10ms;
}
#index article:hover{
    transform:scale(1.1,1.1);
}
img:hover{
      transform:scale(1.1,1.1);
}
#textarea:hover{
      transform:scale(1.1,1.1);
}

</style>

还有一段我自己撸的原生js代码,去掉了点击返回最上边的图标,毕竟,我已经有拉姆了2333。然后修改了页脚的版权信息,修改了评论框的内容。

<script>
    window.onload = function(){
        var oText = document.getElementById('textarea');
        oText.placeholder='写的什么垃圾玩意儿?想喷他?点这儿。。。'
        var oSpan = document.getElementById('backtop');
        oSpan.parentNode.removeChild(oSpan);
        var oFooter = document.getElementById('footer');
        oFooter.innerHTML='<div class="container"><p>Copyright © 2019 <a href="https://lemea.co/">乐米酷博客</a></p><p><a href="http://www.miitbeian.gov.cn/" target="_blank" > 冀ICP备19002468号</a>  •  <a href="https://get233.com/archives/mirages-intro.html" target="_blank" style="color:#e47192;">Mirages</a></p>    </div>'   
    }
</script>
Tags: 前端
最后编辑于: April 23, 2019
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

已有 5 条评论
  1. 大佬,为啥我没看到你的效果。。。。@(疑问)

    1. @Hamery你用的手机吗,手机上轻点一下元素就可以看到23333

    2. @柊叶2333,估计我看的那会没刷新出来,现在有了

    3. @Hamery主题好评,紫罗兰永恒花园

    4. @柊叶哈哈哈,我的小破站让大佬见笑了