网站开发程序设计,个人在线免费公司注册,刚开始做汽配网站要进货,きょこんきょうしゃ在线CSS 实现卡片以及鼠标移入特效 文章目录 CSS 实现卡片以及鼠标移入特效0、效果预览默认鼠标移入后 1、创建卡片组件2、添加样式3、完整代码 0、效果预览
默认 鼠标移入后 在本篇博客中#xff0c;我们将探讨如何使用 CSS 来实现卡片组件#xff0c;并添加鼠标移入特效#…CSS 实现卡片以及鼠标移入特效 文章目录 CSS 实现卡片以及鼠标移入特效0、效果预览默认鼠标移入后 1、创建卡片组件2、添加样式3、完整代码 0、效果预览
默认 鼠标移入后 在本篇博客中我们将探讨如何使用 CSS 来实现卡片组件并添加鼠标移入特效使你的界面更具吸引力。 1、创建卡片组件
首先我们通过 Vue 的模板语法创建一个简单的卡片组件。在这里我们使用了Element Plus的滚动条组件el-scrollbar来包裹我们的卡片。
templateel-scrollbardiv classmain-container!-- 循环生成卡片 --div v-for(item, index) in 10 :keyindex classmy-carddiv classtop智能抠图工具/divdiv classmiddleimg srchttps://se1.360simg.com/sdm/472_321_/t012b6da5bd9bfd8a69.png alt卡片图片/divdiv classfoot免费 在线使用/div/div/div/el-scrollbar
/template2、添加样式
使用 SCSS 语法为卡片组件添加样式包括卡片布局、边框、阴影等。
style langscss scoped
.main-container {display: flex;flex-wrap: wrap;justify-content: center;.my-card {// 卡片样式display: flex;flex-direction: column;justify-content: space-between;width: 300px;height: auto;padding: 16px;margin: 10px;user-select: none;background-color: #fff;border-radius: 10px;transition: box-shadow 0.3s ease 0s, border-color 0.3s ease 0s;// 鼠标悬停效果:hover {border-color: transparent;box-shadow:0 1px 2px -2px rgb(0 0 0 / 16%),0 3px 6px 0 rgb(0 0 0 / 12%),0 5px 12px 4px rgb(0 0 0 / 9%);}.top {margin-bottom: 12px;font-size: 24px;}.middle {margin-bottom: 12px;img {width: 265px;height: 180px;border-radius: 10px;}}}
}
/style通过以上步骤你已经成功创建了一个简单的Vue卡片组件并为其添加了鼠标移入特效。这使得用户在浏览你的页面时能够获得更好的交互体验。
3、完整代码
script setup langts
defineOptions({name: NavigationItIndex,
})
/scripttemplateel-scrollbardiv classmain-containerdiv v-for(item, index) in 10 :keyindex classmy-carddiv classtop智能抠图工具/divdiv classmiddleimg srchttps://se1.360simg.com/sdm/472_321_/t012b6da5bd9bfd8a69.png/divdiv classfoot免费 在线使用/div/div/div/el-scrollbar
/templatestyle langscss scoped
// 样式
.main-container {display: flex;flex-wrap: wrap;justify-content: center;.my-card {display: flex;flex-direction: column;justify-content: space-between;width: 300px;height: auto;padding: 16px;margin: 10px;user-select: none;background-color: #fff;border-radius: 10px;transition: box-shadow 0.3s ease 0s, border-color 0.3s ease 0s;:hover {border-color: transparent;box-shadow:0 1px 2px -2px rgb(0 0 0 / 16%),0 3px 6px 0 rgb(0 0 0 / 12%),0 5px 12px 4px rgb(0 0 0 / 9%);}.top {margin-bottom: 12px;font-size: 24px;}.middle {margin-bottom: 12px;img {width: 265px;height: 180px;border-radius: 10px;}}}
}
/style
