CSS3卡片光照效果
时间:2022-07-27
本文章向大家介绍CSS3卡片光照效果,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我们今天要使用CSS3实现下面这样的卡片光照效果:
实现
首先给出HTML结构:
<div class="hover-light">卡片光照效果</div>
然后给出初始的CSS结构:
.hover-light{
width: 250px;
height: 180px;
margin: 0 auto;
background: #70c3ff;
color:white;
font-size: 2rem;
text-align: center;
border-radius: 8px;
}
此时效果大概是这个样子:
要实现卡片光照的效果,我们需要添加子元素,此时使用伪元素::after
是最好的选择。我们需要给::after
添加一个斜着的渐变来模拟光照效果,这里我们使用从左到右的渐变,然后再给一个倾斜的形变就可以模拟了。最好再给一个简单的悬浮动画就完事了。下面直接给出CSS的其他代码:
.hover-light{
width: 250px;
height: 180px;
margin: 0 auto;
background: #70c3ff;
color:white;
font-size: 2rem;
text-align: center;
border-radius: 8px;
/*子绝父相对*/
position: relative;
/*子溢出父元素隐藏 这样hover子元素的时候 不算hover父元素*/
overflow: hidden;
}
.hover-light::after{
content: "";
position: absolute;
/*首先隐藏子元素*/
left: -100%;
top: 0;
/*设置和父元素一样大*/
width: 100%;
height: 100%;
/*添加从左往右的渐变 即模仿光照效果*/
background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
background-image: linear-gradient(to right,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
/*光照是斜着的更好看*/
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
transform: skewx(-25deg);
/*添加动画效果*/
transition: all .3s ease;
}
.hover-light:hover::after {
/*鼠标放在父元素上 移动子元素*/
left: 100%;
}
通过这样就实现了上面的卡片光照效果!
进阶
上面光照效果已经完成,其实CSS3的形变投影等功能组合起来可以实现更好的效果,我们现在添加样式,给父元素也添加一个动画的效果:
.hover-light{
/*... 其他代码相上*/
transition: all .3s ease;
}
.hover-light::after{
/*... 其他代码相上*/
/*添加动画效果 直接继承父类的效果*/
transition: inherit;
}
.hover-light:hover {
/*向上移动6个像素*/
-moz-transform: translateY(-6px);
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
/*添加一个淡一点的阴影*/
-moz-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
-webkit-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
}
此时的效果:
完整HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSSS3卡片光照效果</title>
<style>
body{
padding: 20px;
}
.hover-light{
width: 250px;
height: 180px;
margin: 0 auto;
background: #70c3ff;
color:white;
font-size: 2rem;
text-align: center;
border-radius: 8px;
/*子绝父相对*/
position: relative;
/*子溢出父元素隐藏 这样hover子元素的时候 不算hover父元素*/
overflow: hidden;
transition: all .3s ease;
}
.hover-light::after{
content: "";
position: absolute;
/*首先隐藏子元素*/
left: -100%;
top: 0;
/*设置和父元素一样大*/
width: 100%;
height: 100%;
/*添加从左往右的渐变 即模仿光照效果*/
background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
background-image: linear-gradient(to right,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
/*光照是斜着的更好看*/
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
transform: skewx(-25deg);
/*添加动画效果 直接继承父类的效果*/
transition: inherit;
}
.hover-light:hover::after {
/*鼠标放在父元素上 移动子元素*/
left: 100%;
}
.hover-light:hover {
/*向上移动6个像素*/
-moz-transform: translateY(-6px);
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
/*添加一个淡一点的阴影*/
-moz-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
-webkit-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
}
</style>
</head>
<body>
<div class="hover-light">卡片光照效果</div>
</body>
</html>
- Decision Trees in Apache Spark (Apache Spark中的决策树)
- Feature Selection For Machine Learning in Python (Python机器学习中的特征选择)
- 简约的JAVA版本MapReduce和日常No.25
- 根据职位说明使用机器学习来检索相关简历
- 微信小游戏初体验
- 一行Spark代码的诞生记(深度剖析Spark架构)
- Ray:AI的分布式系统
- Spring Boot 中使用 MongoDB 增删改查
- 来人啊给我炸了那个Java虚拟机No.46
- 机器学习虾扯淡之Logistic回归No.44
- 大数据计数原理1+0=1这你都不会算(一)No.47
- 机器学习虾扯蛋之SVD奇异值分解No.48
- 提高Spark姿势水平 No.73
- 好好玩的螺旋算法No.69
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 有一次小明传数据给我,把我弄哭了
- Java删除空字符:Java8 & Java11
- 6k+点赞的SpringBoot+Netty分布式即时通讯系统!爱了爱了!
- Day63:数据流中的中位数
- Prometheus是什么?
- Day64:滑动窗口的最大值
- 第10天:NLP补充——朴素贝叶斯(Naive-Bayes)
- Day65:矩阵中的路径
- Day66:机器人的运动范围
- 第11天:NLP补充——主题模式(LDA)
- 一文快速上手Rollup,JavaScript类库打包好帮手
- Day67:剪绳子
- Typecho实现微信发消息:Type时光机
- 插入排序
- Typecho1.1仿简书主题小屏幕菜单栏展开优化