CSS鼠标悬停-蒲公英云

CSS鼠标悬停

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

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

先看效果

" class="reference-link">

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>