css悬停动画,CSS卡片悬停动画效果实现
技术概述
尝试给卡片添加鼠标悬停动画效果,主要使用CSS3的 transition(属性渐变),scale,z-index实现。
技术详述
添加卡片阴影
注册鼠标悬停事件,当事件触发,修改边框 box-shadow属性。
.card:hover {
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}
组件拉伸处理
需要实现文本组件高度拉伸以及文本浮现和过滤。通过hover监听悬停事件,transition改变body组件高度,使用 translateX, translateY使组件在界面沿X,Y轴垂直移动,完成文本组件的拉伸。
描述文本浮现可使用 opacity属性的透明度实现,当监测hover,属性值变为1显现。为避免文本溢出,可添加filters对溢出文本进行省略处理。
/**
* BODY
**/
.card__body {
position: relative;
height: 185px;
padding: 20px;
/*兼容 Safari Chrome 浏览器
-webkit-transition: height 0.5s;*/
transition: height 0.5s;
}
.card:hover .card__body {
height: 300px;
}
/**
* DESCRIPTION
**/
.card__description {
position: absolute;
left: 20px;
right: 20px;
bottom: 56px;
margin: 0;
padding: 0;
color: #666C74;
line-height: 27px;
opacity: 0;
transform: translateY(45px);
transition: opacity 0.3s, -webkit-transform 0.3s;
transition-delay: 0s;
}
.card:hover .card__description {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
}
图片缩放及阴影覆盖
同上监听hover事件,使用 transform 实现属性渐变,将背景色设为 #000,事件触发修改透明度,实现阴影覆盖效果;使用 scale属性,将图片沿X,Y轴缩放。
/**
* IMG
**/
.card__thumb {
height: 245px;
overflow: hidden;
background-color: #000;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
.card__thumb img {
width: 400px;
height: 250px;
display: block;
opacity: 1;
transform: scale(1);
transition: opacity 0.5s, transform 0.5s;
}
.card:hover .card__thumb {
height: 130px;
}
.card:hover .card__thumb img {
opacity: 0.6;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
问题和解决过程
问题:无法进行图片自适应,在img层或card_thumb层设置宽高会影响悬停时图片的缩放和文本组件的拉伸。
解决:
方法一:对body,header,footer,thumb添加父级组件,在父级设置宽高,再使用 z-index属性实现组件堆叠效果。相当于在一个组件内设置三层组件,互相之间不干涉,设置宽高比也可直接自适应。
方法二:算出图片应有宽高,直接在img层设置宽高,这里宽高分别为400px,250px。缺点在于卡片组件调整大小时,图片也需要调整,很麻烦。
解决效果
总结
实现悬停技术时几乎没有遇到什么难点,它就像把几个属性效果叠加获得一个动画效果,很简单但也很意思。但实现动画的基础还是在于你要熟悉CSS的属性功能,在使用时才会更加熟练,因为几乎所有的CSS动画效果实现,都是由transition这些简单底层的属性组合实现,掌握基础属性,就可以实现更多动画效果。
css悬停动画,CSS卡片悬停动画效果实现相关推荐
- html桌面卡牌效果,html+css实现响应式卡片悬停效果
话不多,看效果先: 卡片悬停,响应式卡片,简约效果. 实现: 1. 定义标签,.kapian为最底层盒子,然后两个子盒子一个放图片,一个放文本: The aurora borealis natural ...
- CSS 3.0实现卡片悬停立体特效
今天给大家分享一个用CSS 3.0实现的卡片悬停立体特效,效果如下: 以下是代码实现,欢迎大家制复粘贴和收藏. <!DOCTYPE html> <html lang="en ...
- android 卡片旋转动画,Android-显示卡片翻转的动画片效果
Android---显示卡片翻转的动画效果 本文译自:http://developer.android.com/training/animation/cardflip.html 本文介绍如何是一个自定 ...
- css 悬停动画_CSS3缩放图像动画效果悬停
css 悬停动画 Today we will look into CSS3 Zoom Image animation effect with mouse on hover. With images b ...
- 【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> & ...
- 【每日一练】56—CSS实现一款实用的响应式卡片悬停效果
写在前面 今天这个练习,是目前很多网站上非常常见的一个效果,主要是这个效果干净简洁,它没有任何多余的内容,看起来也很舒服. 具体效果,请看下面的gif动画: 因为是GIF录屏,背景的渐变色有点色块,衔 ...
- 响应式卡片悬停效果 html+css
话不多,看效果先: 卡片悬停,响应式卡片,简约效果. 实现: 1. 定义标签,.kapian为最底层盒子,然后两个子盒子一个放图片,一个放文本: <div class="kapian& ...
- svg+js鼠标悬停卡片充满动画js特效
下载地址svg+js的鼠标悬停动画特效,css不规则的图形鼠标悬停后卡片充满动画特效. dd:
- css实现简单的告警提示动画效果
需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 <!DOCTYPE html> <html lang="en"> ...
- css怎样使弹跳的小球旋转,如何使用纯CSS实现小球跳跃台阶的动画效果(附源码)...
本篇文章给大家带来的内容是关于如何使用纯CSS实现小球跳跃台阶的动画效果(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github ...
最新文章
- SAP HUM已知一个内部HU号码,如何得到HU号码?
- 【学术相关】考研生对导师“嚣张发言”引热议:希望您今年招个女同学,不然我换导师!...
- 【Leetcode | 13】56. 合并区间
- cuda笔记-GPU多线程的奇偶排序
- 大气新闻出版社网站模板
- 在单位用oracle备份到磁带的脚本(看不明白的地方交流)
- 【Wannafly挑战赛14 E】无效位置(并查集思想+线性基合并)
- 数字信号处理实验一 T3
- CISCO模拟器综合应用
- adb shell dunpsys SurfaceFlinger
- windows域用户切换本地用户
- 5000头奶牛的数字化之旅
- 跑深度模型的显卡_人工智能研究者应该选择哪款显卡?
- vi毕业设计参考文献优秀范例
- 如何搭建ftp服务器实现文件共享
- java基础2 判断语句:if ... else 语句和 switch 语句
- 软件测试管理工具——禅道(安装、讲解)
- 视频编解码 — SVC可伸缩性
- 仿钉钉 集成自动化 流程设计器demo
- opencv实战——图像矫正算法深入探讨