Question

任何人都可以告诉我在哪里可以获得或如何制作类似社交网页javascript / css，就像本页底部的那个一样？

谢谢

http://www.graphixshare.com/photoshop/160292-layered-psd-sources-colorful-3d-stars-backgrounds.html

Answer 1

<强> HTML

<div id="twitter">
</div>

<强> CSS

#twitter
{
    width:70px;
    height:50px;
    background-image:url("https://twitter.com/images/resources/twitter-bird-white-on-blue.png");
    background-size:50px 50px;
    background-repeat:no-repeat;
    background-position:10px 20px;
    -webkit-box-shadow: 0px -5px 5px rgba(50, 50, 50, 0.75) inset;
-moz-box-shadow:    0px -5px 5px rgba(50, 50, 50, 0.75) inset;
box-shadow:         0px -5px 5px rgba(50, 50, 50, 0.75) inset;
    text-align:center;
}
#twitter:hover
{
    background-position:10px 10px;
}

当您使用鼠标悬停时，background-image会改变位置，并且会产生border-shadow效果。

Answer 2

虽然我还没有看到有问题的页面是如何做到的，但通过提供悬停样式，可以使用纯HTML和CSS轻松完成。您的普通视图会隐藏图标，并且在悬停时会弹出图标。

查看“：hover”CSS伪类

Answer 3

首先获取内容，这是一个无序的社交网站链接列表。如果您访问这些网站的主页，则会在某处显示Developer个链接。按照该链接，您通常会很快介绍可嵌入网页的各种代码，以生成基本链接。

但是，这个网站已添加到此。他们为每个网站创建了两个自己的图像。这些类似于网站的标识，就像它们藏在口袋里一样。他们还制作了第二张图片，让它从口袋中“拉出”。拍摄这些图像后，他们可以使用CSS伪造选择器:hover来切换网页中的图像。

这是最简单的方法。他们可以使用javascript的onMouseOver样式事件为动画制作动画，但我认为CSS更优雅。

w3 page有一种展示可能性的绝佳方式。此代码显示两种解决方案。一个使用两个图像并切换其可见性。（编辑）第二个解决方案以与Ali解决方案类似的方式重新定位背景。

<html>
    <head>
        <style>
        /* Using two images */
            a.social       img.tuck   { visibility: visible }
            a.social       img.untuck { visibility: false   }
            a.social:hover img.tuck   { visibility: false   }
            a.social:hover img.untuck { visibility: visible }

        /* Using one image, just repositioned */
            a.social-img                 { position: relative; width: 4ex; height 6ex;
                                           overflow: hidden }
            a.social-img          img    { position: absolute; width: 4ex; height: 8ex;
                                           top: 0ex; left: 0ex }
            a.social-img:hover    img    { top: -2ex; left: 0ex }
        </style>
    </head>
    <body>
        <h1>Two Images</h1>
        <ul>
            <li><a class="social" href="twitter.api.stuff">
                <img class="tuck" src="twitter_tucked.jpg" />
                <img class="untuck" src="twitter_untucked.jpg" />
            </a></li>
            <li><a class="social" href="facebook.api.stuff">
                <img class="tuck" src="facebook_tucked.jpg" />
                <img class="untuck" src="facebook_untucked.jpg" />
            </a></li>
        </ul>
        <h2>Single Image</h2>
        <ul>
            <li><a class="social-img" href="twitter.api.stuff">
                <img src="twitter-link.jpg" />
            </a><li>
            <li><a class="social-img" href="facebook.api.stuff">
                <img src="facebook-link.jpg" />
            </a><li>
        </ul>
    </body>
</html>

使用javascript和css动画社交Feed？

3 个答案: