#css动画# 【四】如何实现鼠标经过盒子，盒子向上移动且有阴影？

#css动画# 如何实现鼠标经过盒子，盒子向上移动且有阴影？

思路：

在鼠标经过时，触发事件，就用到hover ；
然后触发的时候我们期望它是隔一点点时间以后，才有效果；
所以需要先设置触发的时间，就用到transition；
然后再处理效果：向上移transform和阴影box-shadow

设置如下：

盒子处：

div {
transition: all 0.9s;} /* 鼠标经过触发时间 */

盒子经过时：

div:hover { / 背景 /
box-shadow: 0 .15rem .3rem rgba(0, 0, 0, 0.4);
/ box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小)内外阴影inset，默认外阴影 /
/向上浮动/
transform: translateY(-.08rem); //向上浮动了8个像素}

示例代码如下：
html

<div class="grid-content bg-purple"><img :src="`/static/image/join${index + 1}.png`" :alt="item.stage" @click="clickControl(item.id)"><div class="grid-stage"><p>· {{ item.stage }}</p></div></div>

css


.grid-content {position: relative;width: 100%;height: 1.87rem;border-radius: .04rem;min-height: .36rem;transition: all 0.9s;  /* 鼠标经过触发时间 */
}.grid-content:hover{/* 背景 */box-shadow: 0 .15rem .3rem rgba(0, 0, 0, 0.4);/* box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 内外阴影inset，默认外阴影 *//*//向上浮动*/transform: translateY(-.08rem); 向上浮动了8个像素}

#css动画# 【四】如何实现鼠标经过盒子，盒子向上移动且有阴影？相关推荐

JS动画和CSS动画之间的区别和特点?
一.写在前面之前我们讲了requestAnimationFrame用来解决js的相关动画出现卡顿的问题.现在我们来详细了解一下CSS和JS动画之间的区别和特点. 二.CSS动画优点: 1.浏览器可 ...
谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
css动画-3d旋转盒子
css动画-3d旋转盒子效果图: 思路: 1.一个容器,装6个子容器放6张图(我是采用的ul列表) <ul class="container"><li id=& ...
html盒子移动动画代码,详解盒子端CSS动画性能提升
流畅动画的标准理论上说,FPS 越高,动画会越流畅,目前大多数设备的屏幕刷新率为 60 次/秒,所以通常来讲 FPS 为 60frame/s 时动画效果最好,也就是每帧的消耗时间为 16.67ms. ...
css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
css动画效果：鼠标移上去底部线条从中间往四周动画延伸
css动画效果:鼠标移上去底部线条从中间往四周动画延伸如图: .top-nav a:after {content: ' ';position: absolute;z-index: 2;bottom: ...
分享一些手写 CSS 动画的常用思路
前言本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗. 交错动画有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇. 那么如 ...
html和css制作动漫岛,CSS动画
transition 早期要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, ...

#css动画# 【四】如何实现鼠标经过盒子，盒子向上移动且有阴影？

#css动画# 如何实现鼠标经过盒子，盒子向上移动且有阴影？

#css动画# 【四】如何实现鼠标经过盒子，盒子向上移动且有阴影？相关推荐

最新文章

热门文章