10个实用的CSS样式之悬浮卡片

这篇具有很好参考价值的文章主要介绍了10个实用的CSS样式之悬浮卡片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

👨‍🎓作者简介:一位喜欢写作,计科专业大三菜鸟

🏡个人主页:starry陆离

📚订阅专栏:『10个实用的CSS样式』

1.简介

对于初学前端的小白来说css样式的设计很考验基本功和创意想法,而在项目开发中我们不可能将大部分的时间用于CSS代码的编写,能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式,因为自己也是初学者,所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是悬浮卡片

首先我们来看看最终的效果

10个实用的CSS样式之悬浮卡片

2.布局设计

可以看到页面的布局还是很简单的。可以分为三层

  1. 最外层就是一个大的背景容器
  2. 第二层是3个小卡片
  3. 第三层是每个卡片里又有不同型号的标题文字和超链接

10个实用的CSS样式之悬浮卡片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- 第一个卡片 -->
        <div class="card">
            <div class="content">
                <h2>01</h2>
                <h3>Card One</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                    Enim mollitia recusandae atque eum unde quaerat laboriosam possimus! 
                    Possimus id excepturi quisquam quae blanditiis dolor fugiat, 
                    magni quaerat nihil saepe cumque.</p>
                <a href="#">Read More</a>
            </div>
        </div>
        <!-- 第二个卡片 -->
        <div class="card">
            <div class="content">
                <h2>02</h2>
                <h3>Card Two</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                    Enim mollitia recusandae atque eum unde quaerat laboriosam possimus! 
                    Possimus id excepturi quisquam quae blanditiis dolor fugiat, 
                    magni quaerat nihil saepe cumque.</p>
                <a href="#">Read More</a>
            </div>
        </div>
        <!-- 第三个卡片 -->
        <div class="card">
            <div class="content">
                <h2>03</h2>
                <h3>Card Three</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                    Enim mollitia recusandae atque eum unde quaerat laboriosam possimus! 
                    Possimus id excepturi quisquam quae blanditiis dolor fugiat, 
                    magni quaerat nihil saepe cumque.</p>
                <a href="#">Read More</a>
            </div>
        </div>
    </div>
</body>
</html>

设计好布局之后我们可以看到我们的页面是如此简陋的

10个实用的CSS样式之悬浮卡片

3.样式美化

接下来就是我们的重重之中页面美化。

3.1body美化

首先我们在CSS中引入Google的字体包

@import url('http://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');

然后逐层的,由外到里的来设计样式。

对于页面整体我们通过box-sizing 属性计算一个元素的总宽度和总高度:

  • content-box 是默认值。如果你设置一个元素的宽为 100px,那么这个元素的内容区会有 100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  • border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的。也就是说,如果你将一个元素的 width 设为 100px,那么这 100px 会包含它的 border 和 padding,内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。

box-sizing - CSS(层叠样式表) | MDN (mozilla.org)

display:flex(弹性盒子布局)详解_羡阳公子的博客

@import url('http://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}

body{
    display: flex;/* flex容器(flex container) */
    justify-content: center;/* 定义项目在主轴上的对齐方式 */
    align-items: center;/* 定义项目在竖直方向上对齐方式 */
    min-height: 100vh;
    background: #161623;
}

通过一番设计此时页面已经渲染成这样样子。相比与之前页面中的元素都居中排列在了页面上。

10个实用的CSS样式之悬浮卡片

对页面的整体布局做了设计之后我们开始设计页面的颜色。在目标界面中的左上角有一团颜色的渐变圆的一角,这是通过伪元素设计出来的。

clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。

也正是通过这个属性我们的

body::after{
    content: '';
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#2196f3,#e91e63);
    clip-path: circle(20% at 10% 10%);
    /* circle()可以传人2个可选参数;
		1. 圆的半径,默认元素宽高中短的那个为直径,支持百分比
		2. 圆心位置,默认为元素中心点 */
}

深入学习 CSS 中的伪元素 ::before 和 ::after - 掘金 (juejin.cn)

clip-path - CSS(层叠样式表) | MDN (mozilla.org)

10个实用的CSS样式之悬浮卡片

3.2container美化

到这一步我们对body的美化算是完成了,接下来就是对container选择器的设置。我们看到这里的文字在蓝色圆圈的后面,我们通过z-index 属性

z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候,z-index 较大的元素会覆盖较小的元素在上层进行显示。默认情况下当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同

这时我们可以看到container选择器内的内容都在上层显示了出来。

.container{
    position: relative;
    display: flex; /* flex容器(flex container) */
    justify-content: center;/* 定义项目在主轴上的对齐方式 */
    align-items: center;/* 定义项目在竖直方向上对齐方式 */
    max-width: 1200px;
    flex-wrap: wrap;/* 定义项目是否换行以及如何换行  */
    z-index: 1;
}

10个实用的CSS样式之悬浮卡片

3.3card美化

现在我们来设计卡片的样式。设计思路也很简单为了能突出卡片的轮廓我们对卡片设置一个于body的背景有差异的颜色作为card的颜色。再设置一些阴影美化。

.container .card{
    position: relative;
    width: 280px;
    height: 400px;
    margin: 30px;
    /* 设置阴影 */
    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    /* 设置card的背景色 */
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);

}

10个实用的CSS样式之悬浮卡片

3.4content美化

接下来就是对卡片中的标题、文字、超链接的样式美化。

首先我注释的内容可以先忽略不看。所以这段美化是比较简单的只是对颜色大小和位置做了调整,这时大家看到的效果应该是这样。

.container .card .content{
    padding: 20px;
    text-align: center;
    /* transform: translateY(100px); */
    /* opacity: 0; */
    /* transition: 0.5s; */
}
/* .container .card:hover .content{
    transform: translateY(0px);
    opacity: 1;
} */
.container .card .content h2{
    position: absolute;
    top: -60px;
    right: 1px;
    font-size: 10em;
    color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}
.container .card .content h3{
    font-size: 1.8em;
    color: #fff;
    z-index: 1;
}
.container .card .content p{
    font-size: 1em;
    color: #fff;
    font-weight: 300;
}
.container .card .content a{
    position: relative;
    display: inline-block;
    padding: 8px 20px;
    margin-top: 15px;
    background: #fff;
    color: #000;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

10个实用的CSS样式之悬浮卡片

3.5加上动画

其实做完这些美化差不多了,界面的设计应该以简约大气为主。但是大学生嘛,就喜欢花里胡哨的东西。所以考虑之下继续学习了加动画的操作,其实就是上面注释的那6行代码便可实现动画。

这里有几个属性解释一下:

  • opacity:指定了一个元素的不透明度,1为完全不透明,0为完全透明。
  • transform:旋转rotate,缩放scale,倾斜skew或平移translate给定元素
  • :hover:伪类,会在光标(鼠标指针)悬停在元素上时提供关联的样式。

因此这6行代码的意思就是初始时卡片上的内容完全透明不显示,且垂直方向平移到100px的位置。当用户的光标停留在卡片上时激活样式,卡片上的内容显示,且垂直平移到0px的位置。(默认元素的左上角是原点,向右为x正轴,向下为y正轴)

transform - CSS(层叠样式表) | MDN (mozilla.org)

:hover - CSS(层叠样式表) | MDN (mozilla.org)

4.结语

到此为止一个简单的悬浮卡片就做好啦,当然在常见的网站中不会这样去配色哈,还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得点赞支持哈。文章来源地址https://www.toymoban.com/news/detail-481126.html

到了这里,关于10个实用的CSS样式之悬浮卡片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序Vant Weapp-Card 商品卡片自定义修改样式

          商品卡片,用于展示商品的图片、价格等信息。       官方文档给出的配置项对大多数人来说都太官方,这是官方给出的。       高级用法               可以通过插槽添加定制内容。         在官方文档中给出的示例配置中,你根本无法调整中部宽度。  van-card

    2024年03月24日
    浏览(55)
  • 【CSS动画02--卡片旋转3D】

    css动画02--旋转卡片3D 当鼠标移动到中间的卡片上会有随着中间的Y轴进行360°的旋转,以下是几张图片的介绍,上面是鄙人自己录得一个供大家参考的小视频🤭

    2024年02月12日
    浏览(43)
  • HTML+CSS:3D轮播卡片

    实现了一个3D翻转的卡片动画,其中每个卡片都有不同的图片和不同的旋转角度。整个动画循环播放,无限次。整个页面的背景是一个占据整个屏幕的背景图片,并且页面内容被隐藏在背景图片之下。 这段代码设置了页面的基本样式,包括高度、居中、背景颜色和溢出部分的

    2024年01月23日
    浏览(54)
  • CSS 一个好玩的卡片“开卡效果”

    渐变 conic-gradient box-shadow clip-path 变换、过渡 transform 、 transition 动画 animation @keyframes 伪类、伪元素 :hover 、 ::before 、 ::after … 绝对布局 。。。 clip-path 生成网站 https://techbrood.com/tool?p=css-clip-path

    2024年02月10日
    浏览(35)
  • CSS 实现卡片以及鼠标移入特效

    默认 鼠标移入后 在本篇博客中,我们将探讨如何使用 CSS 来实现卡片组件,并添加鼠标移入特效,使你的界面更具吸引力。 首先,我们通过 Vue 的模板语法创建一个简单的卡片组件。在这里,我们使用了Element Plus的滚动条组件(el-scrollbar)来包裹我们的卡片。 使用 SCSS 语法

    2024年01月25日
    浏览(53)
  • CSS鼠标悬浮图片模糊切换效果

    当我们想设置在鼠标移入前,图片是半透明(模糊)的,在我们鼠标移入后,图片就变得清晰,这里我们可以设置css的伪类:hover来实现: 首先我们在body中写一个div模块,这个div包裹了两个部分,一个部分就是我们要用的img,第二部分就是文字,文字部分也用一个div包裹。

    2024年02月10日
    浏览(59)
  • CSS实现一个交互感不错的卡片列表

    横向滚动 鼠标悬停时突出显示 默认堆叠展示 鼠标悬停时,完整展示当前块+适当旋出效果 移动端样式优化、磁吸效果 美化滚动条 flex 布局 css 简单变换+过渡 transform、transition 渐变色函数 linear-gradient … 伪类、伪元素 滚动条、::after、 ::before …

    2024年02月11日
    浏览(38)
  • 纯css实现鼠标悬浮、点击更改元素背景

    css伪类 active:元素被点击时变色,点击后颜色消失 focus:元素被点击后变色,点击后颜色不消失 hover:鼠标悬浮时变色,移除后颜色消失 template部分代码 style部分代码

    2024年02月16日
    浏览(41)
  • 判断css文字发生了截断,增加悬浮提示

    示例: 固定显示宽度,溢出显示...,利用了css的属性,想要实现成下面这样:  针对溢出的文字,hover显示全部。  提示很好加,使用tooltip组件就行了,难点是如何判断是否发生了文字溢出。 利用dom元素的 可视宽度 clientWidth  和 实际宽度 scrollWidth 不同就可以比较出是否发

    2024年02月04日
    浏览(34)
  • 有什么能直接用的开源QT的ui样式库

    Qt 提供了许多可供直接使用的开源 UI 样式库。其中一些常用的样式库包括: Fusion:Qt 的默认样式库,提供现代化和简洁的界面。 Windows:模拟 Windows 的界面样式。 WindowsVista:模拟 Windows Vista 的界面样式。 WindowsXP:模拟 Windows XP 的界面样式。 Macintosh:模拟 Mac OS X 的界面样式

    2024年02月06日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包