html鼠标经过图片有浮起效果,CSS实现鼠标滑过卡片上浮效果的示例
原理
hover 的时候对元素设置阴影:box-shadow,使其样式与常态不同。
box-shadow 表达式参见 MDN:
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影,以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
指定单个 box-shadow 的用法:
给出两个、三个或四个数字值的情况。
如果只给出两个值,这两个值将被浏览器解释为 x 轴上的偏移量 和 y 轴上的偏移量 。
如果给出了第三个值,这第三个值将被解释为模糊半径的大小 。
如果给出了第四个值,这第四个值将被解释为扩展半径的大小 。
可选,插页(阴影向内) inset。
可选,颜色值 。
下面列举几种样式,也是在本博客系统中多次用到的。
一、鼠标悬浮仿纸张折起的样式
代码实现:
在 hover 状态增加了 transition 属性,从而产生渐变的效果。
鼠标悬浮仿纸张折起的样式
/* 核心样式 */
.card {
width: 300px;
height: 180px;
border: 10px solid #FFF;
border-bottom: 0 none;
background-color: #FFF;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .15)
}
.card:hover {
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .25);
transition: all .2s ease-in-out;
}
/* 非核心样式 */
.card-header {
text-align: center;
}
.card-body, .card-footer {
text-align: left;
}
这是一张卡片
描述:鼠标悬浮时,类似纸张折起的效果
原理:改变 y 轴上的偏移和阴影扩散半径(第二、三个数字)
二、鼠标悬浮仿纸张聚焦的样式
代码实现:
与上面的区别是调整了box-shadow属性的具体数值( y 轴上的偏移和阴影扩散半径,即第二、三个数字)。
鼠标悬浮仿纸张聚焦的样式
/* 核心样式 */
.card {
padding: 10px;
width: 300px;
height: 180px;
background-color: #FFF;
box-shadow: none;
}
.card:hover {
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .2);
border-color: #eee;
transition: all .2s ease-in-out;
}
/* 非核心样式 */
.card-header {
text-align: center;
}
.card-body, .card-footer {
text-align: left;
}
这是一张卡片
描述:鼠标悬浮时,整张纸聚焦的效果
原理:改变 y 轴上的偏移和阴影扩散半径(第二、三个数字)
三、鼠标悬浮仿纸张抬起的样式
代码实现:
通过 box-shadow 属性和 transform 属性相结合。
鼠标悬浮仿纸张抬起的样式
/* 核心样式 */
.card {
padding: 10px;
width: 300px;
height: 180px;
background-color: #FFF;
border: none;
border-radius: 6px;
-webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 250ms cubic-bezier(.02, .01, .47, 1);
}
.card:hover {
box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
transform: translate(0,-5px);
transition-delay: 0s !important;
}
.box-shadow {
-webkit-box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.15);
box-shadow: 0 4px 16px rgba(48, 55, 66, 0.15);
}
/* 非核心样式 */
.card-header {
text-align: center;
}
.card-body, .card-footer {
text-align: left;
}
这是一张卡片
描述:鼠标悬浮时,整张纸抬起的效果
原理:增加 transform 属性
四、鼠标悬浮仿纸张升起的样式(动画实现)
代码实现:
使用 @keyframes 规则创建动画,将一套 CSS 样式逐渐变化为另一套样式。
在悬浮状态下执行动画。
鼠标悬浮仿纸张升起的样式
/* 核心样式 */
.card {
padding: 10px;
width: 300px;
height: 180px;
background-color: #FFF;
border: none;
border-radius: 6px;
-webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 250ms cubic-bezier(.02, .01, .47, 1);
}
.card:hover {
animation: fly 0.0001s linear;
animation-fill-mode: both;
}
@keyframes fly {
0% {
box-shadow: 2px 2px 2px #e2dede, -2px 2px 2px #e2dede;
}
100% {
box-shadow: 6px 8px 12px #e2dede, -6px 8px 12px #e2dede;
}
}
/* 非核心样式 */
.card-header {
text-align: center;
}
.card-body, .card-footer {
text-align: left;
}
这是一张卡片
描述:鼠标悬浮时,整张纸升起的效果
原理:使用 @keyframes 规则创建动画
以上就是CSS实现鼠标滑过卡片上浮效果的示例的详细内容,更多关于CSS实现鼠标滑过卡片上浮效果的资料请关注脚本之家其它相关文章!
html鼠标经过图片有浮起效果,CSS实现鼠标滑过卡片上浮效果的示例相关推荐
- html5鼠标悬停图片放大的原理,jQuery当鼠标悬停时放大图片的效果实例
这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HT ...
- html鼠标移除的效果,css实现鼠标移入移出动态效果
这篇文章主要介绍了关于css实现鼠标移入移出动态效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 知识点:transform-origin 兼容性:IE10以上 p { positi ...
- html5鼠标经过图片透明,html5 css3透明时钟鼠标悬浮图片放大
特效描述:html5 css3 透明时钟 鼠标悬浮 图片放大,html5 css3时钟及鼠标悬浮图片扩大特效,适合于初学者,而且是个不错的展示效果 代码结构 1. 引入CSS 2. HTML代码 va ...
- html hover 效果,CSS八种让人眼前一亮的HOVER效果的示例代码
一.发送效果HTML // 这里是一个svg的占位 Send CSS #send-btn{ display: flex; align-items: center; justify-content: c ...
- html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码
代码如下所示: Document .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overfl ...
- html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
- html怎么打开时出现动画效果,html5动画制作打开抽出卡片动画效果代码
特效描述:html5动画 打开抽出 卡片动画效果.抽出卡片特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Sample paper Lorem ipsum dolor sit a ...
- php 鼠标经过 图片,jq实现酷炫的鼠标经过图片翻滚效果_jquery
短短的十多行代码就实现了一个酷炫的图片翻滚代码,要实现这个效果并不难,只要思路对了,一切都好办,不多说了,直接上代码看效果! html结构: *{ margin:0; padding:0;} .lis ...
- html+css鼠标悬停发光按钮![HTML鼠标悬停的代码]使用HTML + CSS实现鼠标悬停的一些奇幻效果!
源码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 鼠标跟随效果css,CSS3 鼠标跟随+滑动覆盖动效
CSS 语言: CSSSCSS 确定 *, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box; } htm ...
最新文章
- oracle中的null 字段,Oracle下的NULL字段
- 【阿里妈妈营销科学系列】开篇:C.M.O——“人群.渠道.机会”营销分析导论
- python初心记录二
- kubernetes 启动_如何启动和组织Kubernetes聚会
- pytorch 4 regression 回归
- MediaPipe - BlazeFace原理
- python随机密码生成
- ognl # % 的作用(井号,星号,百分号)
- 不知道是真是假的流量购买---有待考察
- 数码管显示 0-9999计数器
- Win11玩游戏掉帧的解决方法
- 绕过CDN查询真实IP方法
- 基于Laravel 框架的内容管理系统
- 每个公司、每个社区,都需要不止一个“灵魂人物”。
- STM32f103微妙延迟函数
- msra数据集_微软机器阅读理解超越人类水平,CoQA数据集得分刷新记录
- 自适应波束形成(二)——时域窄带LCMV波束形成器
- TI杯 LaunchPad MSP430开发环境搭建
- 等概率整群抽样与多阶段抽样
- CentOS7忘记root密码,重置root密码
热门文章
- 小谈一下Qt的绘制引擎(结尾有彩蛋)
- 有关winRAR32相关问题
- 光流法的视频移动目标检测(matlab代码)
- C语言程序设计勾股数,打印出100内的所有的勾股数(用C语言实现)
- python 使用公司邮箱发邮件_python 使用腾讯企业邮箱发送邮件
- 396万奖金池!视觉特征编码、AI+无线通信两大赛道等你来战!助力元宇宙!
- 认知升级:从首席架构师到CTO
- 未来15年,还有一波“增量”机会
- matlab GUI界面变量值传递到其他.m文件
- java web play_玩转Java Web应用开发:Play框架