CSS鼠标悬停

港控/mmm° 2022-05-25 06:17 329阅读 0赞

> 在学习中遇到许多好看的样式，虽然只是用HTML+CSS简单的实现，仅作为我的学习笔记和同爱好学习者的分享：

*  **先看效果**

## ![这里写图片描述][70] ##

### HTML部分 ###

html：

<div class="box shadow">
                这是是pic-1
                <div class="circle"></div>
            </div>
            <div class="box shadow">
                这是是pic-2
                <div class="circle"></div>
            </div>
            <div class="box shadow">
                这是是pic-3
                <div class="circle"></div>
            </div>

### CSS样式 ###

css：

<style type="text/css">
    html { box-sizing: border-box; font: 18px PT Mono; background: antiquewhite; }
    
    *,
    *::before,
    *::after { box-sizing: inherit; }
    
    body { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100vh; }
    
    .box { width: 25%; min-width: 250px; display: block; height: 50px; position: relative; border-radius: 5px; background: linear-gradient(to right, #abbd73 35%, #d6e2ad 100%); margin-bottom: 40px; padding: 15px 25px 0 40px; color: darkslategray; box-shadow: 1px 2px 1px -1px #777; transition: background 200ms ease-in-out; }
    
    .shadow { position: relative; }
    
    .shadow:before { z-index: -1; position: absolute; content: ""; bottom: 13px; right: 7px; width: 75%; top: 0; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(4deg); transform: rotate(4deg); transition: all 150ms ease-in-out; }
    
    .box:hover { background: linear-gradient(to right, #abbd73 0%, #abbd73 100%); }
    
    .shadow:hover::before { -webkit-transform: rotate(0deg); transform: rotate(0deg); bottom: 20px; z-index: -10; }
    
    .circle { position: absolute; top: 14px; left: 15px; border-radius: 50%; box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 25px antiquewhite; width: 20px; height: 20px; display: inline-block; }
    
    </style>

内容虽然简单，但样式还是挺实用的。

> 可以配合fullPage.js的布局实现好看的界面效果哟~

[70]: /images/20220525/0944f65a168b4d2cbd3c5eb358d5da38.png

发表评论取消回复

表情：

评论列表（有 0 条评论，329人围观）

还没有评论，来说两句吧...

相关阅读

相关十分钟实现鼠标悬停效果，CSS3悬停效果

视频：[https://www.bilibili.com/video/BV1cy4y1D7mz][https_www.bilibili.com_video_BV1cy4y1D7

系统管理员/ 2022年12月28日 08:19/ 0 赞/ 294 阅读

相关 html鼠标悬停按钮效果,纯css3实现的鼠标悬停动画按钮

今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下： ![09a8e28f276a625f

淩亂°似流年/ 2022年10月06日 05:58/ 0 赞/ 300 阅读

相关 CSS3按钮鼠标悬停动画js特效

[下载地址][Link 1] CSS3按钮鼠标悬停动画特效是一款包含6种不同效果的简单按钮悬停动画特效。 ![17ead0125e7ac57e4b0c36d38ce7d86

Love The Way You Lie/ 2022年09月16日 06:13/ 0 赞/ 234 阅读

相关鼠标悬停卡片css3动画js特效

[下载地址][Link 1]基于Bootstrap网格布局的图片画廊，css3鼠标hover卡片动画特效。该特效在鼠标悬停或hover到卡片上时，通过CSS3制作一系列的文字和

Love The Way You Lie/ 2022年09月11日 00:29/ 0 赞/ 290 阅读

相关 css3鼠标悬停按钮颜色文字变化

[下载地址][Link 1]css3鼠标悬停在按钮上的特效，颜色和文字变化切换成其它的 ![1630057956.png][] dd: [Link 1]: https:

川长思鸟来/ 2022年09月09日 06:01/ 0 赞/ 246 阅读

相关纯CSS实现图像鼠标悬停效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家今天来看一组纯CSS实现的鼠标悬停效果，在线研究代码点[效果一][Link 1]、[效果二][Link 2]、

分手后的思念是犯贱/ 2022年08月26日 11:19/ 0 赞/ 321 阅读

相关鼠标悬停显示

鼠标悬停设置页面中鼠标放在超链接上时的显示效果，并且可以在里面设置文本样式和字体大小等属性 <div> a:hover{

不念不忘少年蓝@/ 2022年06月16日 01:21/ 0 赞/ 313 阅读

相关 css实现鼠标悬停，光标出现小手

用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmous

曾经终败给现在/ 2022年05月31日 09:05/ 0 赞/ 654 阅读

相关 CSS鼠标悬停

> 在学习中遇到许多好看的样式，虽然只是用HTML+CSS简单的实现，仅作为我的学习笔记和同爱好学习者的分享：先看效果 ![这里写图片描述][70] HTM

港控/mmm°/ 2022年05月25日 06:17/ 0 赞/ 330 阅读

相关 css实现鼠标悬停效果

![在这里插入图片描述][20200527151344896.gif] 感觉css的话，原来的我认为很难学，挺生涩的，但是认真看了以后，感觉css很有意思，能写出很多好看的

浅浅的花香味﹌/ 2021年07月27日 01:57/ 0 赞/ 560 阅读