时间：2023-07-20 03:51:01 | 来源：网站运营
时间：2023-07-20 03:51:01 来源：网站运营
CSS3为网页打造丝滑鼠标效果：可能各位经常能看到一个画面：在一个网站首页右下角的地方有两个图标，分别是QQ和微信字样，当鼠标划入时，会在上方以极其流利的动画显示出一个二维码、或提示。
在线咨询
<div class="container"> <section> <a href="javascript:void(0);"> <i class="iconfont icon-qq"></i> <span> <img src="img/qq.png" /> 优C体验咨询群 </span> </a> <a href="javascript:void(0);"> <i class="iconfont icon-wangzhan"></i> <span class="span_two"> <img src="img/hub.png" /> 优C·技术封推 </span> </a> </section></div>这里用父子结构的原因在于：要实现“紧跟着i图标周围弹出内容”需要用到 “父相子绝” 的position模式。overflow:hidden; ）—— 这是最基础的。否则你的网页将会很难看！/** 这里为了方便演示将div居中 */div.container { display: inline-block; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}接下来，我们对链接进行样式设置，创建简单的背景悬停效果，并定位社交媒体图标:a { color: #fff; background: #8a938b; border-radius: 4px; text-align: center; text-decoration: none; position: relative; display: inline-block; box-sizing: border-box; padding: 12px; -o-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; -webkit-font-smoothing: antialiased;}a:hover { background: #5a665e;}.iconfont { font-size: 36px; vertical-align: middle; display: inline-block; position: relative; top: 20%;}接下来，我们将对弹出文本进行样式设置和动画处理:a span { max-width: 200px; max-height: 147px; color: #666; position: absolute; bottom: 0; left: -30px; right: 0; padding: 10px 6px; z-index: -1; font-size: 11px; border-radius: 5px; background: #fff; visibility: hidden; opacity: 0; -o-transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);}a span.span_two { left: 0; right: -30px;}span img{ max-width: 100%; max-height: 100%; width: initial; height: initial;}/* 当图标处于悬停状态时，文本将弹出 */a:hover span { bottom: 70px; visibility: visible; opacity: 1;}a span::before { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; position: absolute; bottom: -4px; left: 68px; right: auto;}a span.span_two::before { left: auto; right: 68px;}它的作用原理就是 —— 一个div的上下左右边框是可以分别操控的、是独立的（它不是四个方形）：@media (any-hover: none) { a:focus { background-color: #5a665e; }}@media (any-hover: none) { a:focus span { bottom: 70px; visibility: visible; opacity: 1; }}any-hover：可用于测试是否有任意可用的输入装置可以hover悬停在元素上的CSS媒体属性。例如鼠标这个输入装置就可以控制cursor手形的位置，以及hover在元素上；例如手机都是手指控制，没有什么悬停感应，因此，没有装置可以hover悬停（虽然手指也能触发:hover伪类效果）。因此，any-hover媒体查询简介可以用来精确控制不同设备上的hover交互行为，尤其对于跨平台的网页，响应式网站，非常有用。
语法：
opacity / visibility + translate + scale 也可以完美实现，不过...有现成的东西，干嘛不用呢？::after 和 ::before 伪元素；overflow: hidden 的盒子 —— 不能加到上面的盒子中，因为after和before不属于div！事实上，transform动画中的属性表示的含义更多的是“过渡多少”而不是“过渡到哪里”！那么，这个层级关系就很明了了：
<!--伪元素装饰盒子--><div class="pic_border"> <!--overflow-hidden盒子--> <div class="pic_box"> <!--transition过渡盒子--> <div class="pic_item"> <div class="pic_text">music</div> <div class="pic_back">此时此刻，非我莫属</div> </div> </div></div>按照上面所说，我们很容易为它添加对应的CSS：.pic_border{ position: relative;}.pic_border::before{ content: ''; position: absolute; top: 50%; left: 0; width: 43vw; height: 1px; background-color: red;}.pic_border::after{ content: ''; position: absolute; top: 50%; right: 0; width: 43vw; height: 1px; background-color: red;}@media screen and (max-width: 1100px) { .pic_border::before,.pic_border::after{ width: 20vw; }}.pic_box{ display: inline-block; height: 70px; margin-left: calc(50% - 70px); overflow: hidden; perspective: 2000px; cursor: pointer; user-select: none;}.pic_item{ width: 100%; height: 100%; transform-style: preserve-3d; transition: all .7s ease;}.pic_text,.pic_back{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}.pic_text{ transform: rotateX(0deg) translateZ(-21.9px);}.pic_back{ transform: rotateX(90deg) translateZ(-15px);}.pic_box:hover .pic_item{ transform: rotateX(-90deg);}.pic_box:active .pic_item{ transform: rotateX(-90deg);}需要注意的是：3D效果是一定要有Z轴参与的！ 不然会显得很“尴尬“关键词：效果,打造
