正文

html+css鼠标悬停效果

未来的羁绊  2022-02-09  765

关键词：

HTML+CSS实现鼠标悬停效果

HTML：

<link href="style.css" rel="stylesheet">

<a class="social" href="https://webbb.be" target="_blank">
     <div class="front">
        <i class="fa fa-facebook"></i>
     </div>
     <div class="back">
        <i class="fa fa-facebook"></i>
     </div>
</a>

<a class="social social-twitter" href="https://webbb.be" target="_blank">
     <div class="front">
        <i class="fa fa-twitter"></i>
     </div>
     <div class="back">
        <i class="fa fa-twitter"></i>
     </div>
</a>

<a class="social social-github" href="https://webbb.be" target="_blank">
     <div class="front">
        <i class="fa fa-github"></i>
     </div>
     <div class="back">
        <i class="fa fa-github"></i>
     </div>
</a>

<a class="social social-pinterest" href="https://webbb.be" target="_blank">
     <div class="front">
        <i class="fa fa-pinterest"></i>
     </div>
     <div class="back">
        <i class="fa fa-pinterest"></i>
     </div>
</a>

<a class="social social-googleplus" href="https://webbb.be" target="_blank">
     <div class="front">
        <i class="fa fa-google-plus"></i>
     </div>
     <div class="back">
        <i class="fa fa-google-plus"></i>
     </div>
</a>

<a class="social social-skype" href="https://webbb.be" target="_blank">
     <div class="front">
        <i class="fa fa-skype"></i>
     </div>
     <div class="back">
        <i class="fa fa-skype"></i>
     </div>
</a>

<a class="social social-linkedin" href="https://webbb.be" target="_blank">
     <div class="front">
        <i class="fa fa-linkedin"></i>
     </div>
     <div class="back">
        <i class="fa fa-linkedin"></i>
     </div>
</a>

<a class="social social-skype" href="https://webbb.be" target="_blank">
     <div class="front">
        <i class="fa fa-skype"></i>
     </div>
     <div class="back">
        <i class="fa fa-skype"></i>
     </div>
</a>

<a class="social social-dribbble" href="https://webbb.be" target="_blank">
     <div class="front">
        <i class="fa fa-dribbble"></i>
     </div>
     <div class="back">
        <i class="fa fa-dribbble"></i>
     </div>
</a>

CSS：

/**
 * CSS3 social icon hover effect
 * Read more on my blog: http://webbb.be/blog/
 */

body {
    background: #f06;
    background: linear-gradient(45deg, #f06, yellow);
    min-height: 100%;
}
a,a:visited { color: #fff; }
a:hover { color: #fff; }

.social {
    float: left;
    margin: 2em 2em; width: 100px; height: 100px;     
    display: block; text-align: center; line-height:103px; color: #fff;
    
    position: relative;
    transform:rotateY(0deg);
    transition:transform .25s ease-out;
    transform-style:preserve-3d;
}
.social > div {
    width: 100px; height: 100px; background: #000;
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.social >.front {
    transform:translateZ(40px);
}
.social >.back {
    background: #3B5998; font-size: 3em;
    transform:rotateY(-100deg) translateZ(40px);
}

/*  Social Media Colors 
    Facebook #3B5998
    Flickr #FE0883
    Foursquare #8FD400
    Google+ #C63D2D
    Instagram #4E433C
    Linkedin #4875B4
    Tumblr #2B4964
    Twitter #33CCFF
    Vimeo #86B32D
    Youtube #FF3333
    Dribbble #ea4c89
*/
.social.social-twitter > .back { background: #55ACEE; }
.social.social-github > .back { background: #f3f3f3; color: #000; }
.social.social-pinterest > .back { background: #e3262e; }
.social.social-googleplus > .back { background: #dd4B39; }
.social.social-skype > .back { background: #12A5F4; }
.social.social-linkedin > .back { background: #4875B4; }
.social.social-dribbble > .back { background: #ea4c89; }

/* Hover */
.social:hover {
    transform: rotateY(100deg);
}

效果：

html+css制作鼠标悬停效果

...; <metacharset="UTF-8"> <title>鼠标悬停效果</title> <styletype="text/css"> * margin:0; padding:0; ... 查看详情

尝试使用 html 和 css 获得鼠标悬停缩放过渡效果，但图像溢出，图像的位置正在改变

】尝试使用html和css获得鼠标悬停缩放过渡效果，但图像溢出，图像的位置正在改变【英文标题】：Tryingtogetamousehoverzoomtransistioneffectusinghtmlandcssbutimageisgettingoverflowed,theimagespositionaregettingaltered【发布时间】：2020-05-1414:38:14【问题... 查看详情

使用html和css实现鼠标悬停时文本的旋转

鼠标悬停在文字上时，文字会出现旋转效果。这种效果实现的原理是，将每个文字或者单词的每个字母在任一轴（最好是Y轴）一起旋转。每个文字或者单词都包裹在<li>标记中，然后使用CSS：hoverSelector选择器，我们将在Y轴... 查看详情

鼠标悬停tip效果如何用css实现？

参考技术A鼠标悬停tip效果，是一个非常有用的功能，在页面布局受到局限的时候，我们不能往页面中添加过多的内容。而鼠标悬停tip效果，可以在鼠标移上去的时候有一个提示信息，我们可以将相关的信息放置在这个tip中，不... 查看详情

css鼠标悬停图片加边框效果,不位移的方法

<!DOCTYPEHTML><htmllang="en-US"><head><title>css实现鼠标悬停时图片加边框效果</title><styletype="text/css">body{background:#222;color:#06c;}em{font-style:inherit;}img{background:w 查看详情

css鼠标悬停图片加边框效果，页面布局发生错位的解决办法

CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法.recomend-list{width:1200px;a{@extend%fl;margin-right:30px;width:260px;height:440px;border:2pxsolidtransparent;@extend%borderbox;&:hover{border-color:#109ef3;}}img{widt 查看详情

css如何实现鼠标悬停的提示效果

求一个demo，效果如下图。鼠标悬停时出现提示“任务中心”。不要只给一个思路，要具体代码，谢谢。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <styl... 查看详情

css实现鼠标悬停在图片上图片缓慢缩放效果

方法一：.container{　　background-size:100%100%;　　transition:all2s;}.container:hover{　　background-size:120%120%;} 方法二：img{　　transition:all2s;}img:hover{　　transform:scale(1.2); //图片放大的倍查看详情

鼠标悬停图片移动的效果

...购物网站，像京东，蘑菇街这些都有对展示的图片做这种鼠标悬停图片上移，下移，左移或者右移效果，实现代码很简单，就用css3的transform便可实现。下列代码实现的是鼠标悬停，div向上移动30px，鼠标拿开div恢复原始位置。css... 查看详情

鼠标悬停效果工具提示

】鼠标悬停效果工具提示【英文标题】：hovereffecttooltipfollowingmouse【发布时间】：2022-01-0618:29:04【问题描述】：我对css没有什么问题，我无法正常使用转换。如果工具提示有更多文本，那么鼠标和工具提示之间的空间就会很大。... 查看详情

使用 CSS 在悬停图像上创建缩放效果？

...间】：2013-03-2307:54:51【问题描述】：我目前正在尝试在将鼠标悬停在我的四个图像之一上时创建缩放效果。问题是大多数示例通常使用表格或掩码div来应用某种效果。这是一个实现我想要的this的示例。This是我目前的代码。HTML<... 查看详情

鼠标悬停时间 CSS HTML [重复]

】鼠标悬停时间CSSHTML[重复]【英文标题】：MouseoverhovertimeCSSHTML[duplicate]【发布时间】：2015-12-2012:11:04【问题描述】：我的问题是我希望很容易。我有鼠标悬停显示一些文本。我的问题是，在鼠标消失后，有没有机会让这个悬... 查看详情

在当前页面上隐藏悬停效果

...和css以突出显示导航栏上的当前页面。我想要的是当您将鼠标悬停在当前页面上时，它不会产生悬浮效果。这是涉及的css.navwidth:960px;height:40px;bac 查看详情

用css变量实现鼠标悬停动效

...="button"><span>HovermeI‘mawesome</span></div> 鼠标悬停动效，顾名思义，跟鼠标是有很大关系的。查看详情

html图片鼠标悬停效果设置！

在一个DIV标签里面插入了一张图片，附上链接后，我想当鼠标悬停在图片上面的时候，这个图片会突出或者放大！求代码！http://www.internetke.com/jsEffects/2015012104/类似这类效果！@charset"utf-8";/*科e互联特效基本框架CSS*/body,ul,d... 查看详情

HTML/CSS - 将鼠标悬停在照片上时显示链接

】HTML/CSS-将鼠标悬停在照片上时显示链接【英文标题】：HTML/CSS-Displaythelinkwhilehoveringoveraphoto【发布时间】：2020-12-0416:15:49【问题描述】：我希望在将鼠标悬停在图像上时显示我的链接。我编写代码的方式仅在我将鼠标悬停在链... 查看详情

html5/css3鼠标悬停动画菜单按钮

在线演示本地下载查看详情

放大鼠标悬停效果

】放大鼠标悬停效果【英文标题】：magnifyeffectonmousehover【发布时间】：2013-05-0611:48:48【问题描述】：我有一个包含几个链接的导航栏。我希望在鼠标悬停时放大（增加大小）的链接。我希望其他链接处于各自的位置。我为此编... 查看详情