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

news2024/11/19 16:26:38

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

🏡个人主页：starry陆离

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

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

  • 1.简介
  • 2.布局设计
  • 3.样式美化
    • 3.1body美化
    • 3.2container美化
    • 3.3card美化
    • 3.4content美化
    • 3.5加上动画
  • 4.结语

1.简介

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

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

css001

2.布局设计

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

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

image-20220909111228546

<!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>

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

image-20220909111430268

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;
}

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

image-20220909151922578

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

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)

image-20220909155553142

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;
}

image-20220909223609827

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);

}

image-20220909224727839

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);
}

image-20220909225513507

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.结语

到此为止一个简单的悬浮卡片就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得点赞支持哈。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/598.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

隔离技术之端口隔离

隔离技术之端口隔离

端口隔离技术 端口隔离主要应用在同一个vlan内&#xff0c;不同的用户之间不可互相访问 好处&#xff1a; 可以避免广播风暴&#xff0c;节约了vlan的资源&#xff0c;提高了用户之间的安全性 比如一个用户的电脑中病毒了&#xff0c;不会影响到其他用户 端口隔离是基于端口&…
阅读更多...
网络原理——No.2 传输层_TCP的连接管理(画图理解三次握手与四次挥手)

网络原理——No.2 传输层_TCP的连接管理(画图理解三次握手与四次挥手)

JavaEE传送门JavaEE 网络原理——传输层_UDP 网络原理——No.1 传输层_TCP的确认应答机制与超时重传 目录TCP的连接管理三次握手(建立连接)四次挥手(断开连接)TCP的连接管理 描述的就是 TCP 建立链接和断开链接的过程 TCP 的链接, 只是一个 “逻辑上的” “虚拟的连接” (只要…
阅读更多...
qt学习笔记4：QMainWindow 菜单栏、工具栏、状态栏、铆接部件、

qt学习笔记4：QMainWindow 菜单栏、工具栏、状态栏、铆接部件、

在创建基类的时候&#xff0c;有三大选择&#xff0c;一个是QWidge 空窗口&#xff0c; 另一个就是QMainWindow QMainWindow是一个为用户提供主窗口的类&#xff0c;包含一个菜单栏&#xff0c;多个工具栏&#xff0c;多个链接部件&#xff0c; 一个状态栏以及一个中心部件&…
阅读更多...
《数据结构》（六）八大排序（上）

《数据结构》（六）八大排序（上）

生活中大家从小到大处处可见排队&#xff0c;但是排队有哪些快速的方法你了解吗&#xff1f; 八大排序排序的基本概念插入排序直接插入排序基本思想代码直接插入排序总结希尔排序基本思想代码希尔排序总结选择排序直接选择排序基本思想&#xff1a;代码直接选择排序总结堆排序堆…
阅读更多...
大数据基础之java常用API一

大数据基础之java常用API一

常用API1. Object类2. String类String案例1. Object类 构造方法空参构造全参构造 Object类: 是所有类的基类,或者说公共父类,每个类都直接或者间接的继承自Object,所以该类中有的方法,其他类中都有 构造方法: public Object(); 所有类的构造方法中都会默认调用super() 会逐级调…
阅读更多...
C#里在子窗口与父窗口之间进行数据传送

C#里在子窗口与父窗口之间进行数据传送

在C#里经常需要在子窗口与父窗口之间进行数据传送，或者调用，虽然有很多方法可以实现，但是采用委托还是比较简单和直接的方式。 所以这次针对委托来演示一下怎么样实现这种功能。 下面先来创建一个带两窗口的例子，如下图所示： 接着来看一下，创建父窗口的代码： namespace…
阅读更多...
【C++笔试强训】第十一天

【C++笔试强训】第十一天

&#x1f387;C笔试强训 博客主页&#xff1a;一起去看日落吗分享博主的C刷题日常&#xff0c;大家一起学习博主的能力有限&#xff0c;出现错误希望大家不吝赐教分享给大家一句我很喜欢的话&#xff1a;夜色难免微凉&#xff0c;前方必有曙光 &#x1f31e;。 &#x1f4a6; &…
阅读更多...
vite基础知识-1

vite基础知识-1

为什么选择vite&#xff1f; 讲vite之前&#xff0c;我们先来了解一下webpack的原理。 webpack支持多种模块化&#xff08;浏览器端和服务端都可以运行&#xff09;。比如&#xff1a; // index.js const lodash require("lodash"); // commonjs规范 import React…
阅读更多...
win10 docker desktop 报 docker desktop stopped

win10 docker desktop 报 docker desktop stopped

win10电脑安装doker deskto遇到一些问题解决过程记录 报 docker desktop stopped 没过多会, docker desktop就自动退出了, 要以理解为闪退 网上查了一下原因, 虚拟化可能没设置 进入bios, 发现笔记本电脑没有这个设置 重启电脑后, 弹出消息 WSL 2 installation is incompl…
阅读更多...
通道分离与合并、彩色图转换为灰度图、二值化

通道分离与合并、彩色图转换为灰度图、二值化

文章目录图像基础重要的函数图像基本知识图像基础通道分离与合并彩色图转换为灰度图二值化图像的加减乘除图像基础 矩阵分辨率8位整型图像浮点数图像 现在简单介绍下二值化、灰度图以及真彩色和假彩色 图像的二值化&#xff0c;就是将图像上的像素点的灰度值设置为0或255&am…
阅读更多...
安装宝塔面板（详细教程）

安装宝塔面板（详细教程）

目录 安装宝塔面板 &#xff08;一&#xff09;前言 &#xff08;二&#xff09;准备工作 1、官网&#xff1a;宝塔面板下载&#xff0c;免费全能的服务器运维软件 &#xff08;三&#xff09;安装宝塔面板 1、进入官网&#xff0c;选择“安装脚本” 2、选择对应版本的安…
阅读更多...
C++游戏开发小笔记

C++游戏开发小笔记

1.入门小语法 1.1 命名空间 当想使用库文件的某个函数时&#xff0c;为了防止由于重名而引起的混乱调用&#xff0c;使用命名空间来区分同名函数。 字符串String也是标准命名空间的一个。如果没有using namespace std; 想用string 类型得 std:: string 1.2浮点数的存储…
阅读更多...
计算机视觉--flask部署 目标检测算法，并在局域网内远端访问

计算机视觉--flask部署 目标检测算法，并在局域网内远端访问

1.flask框架 Flask是一个轻量级的基于Python的web框架。static 文件夹来保存静态文件&#xff0c;templates 文件夹存放前端页面 安装&#xff1a; pip install Flask框架代码&#xff1a; from flask import * from flask import Flaskapp Flask(__name__) //获取实例app.…
阅读更多...
Web监听器：Listener

Web监听器：Listener

Listener简介常用监听接口监听在线用户信息的实现Model层Controller层OnlineUserListener的实现View层测试简介 监听器&#xff08;Listener&#xff09;&#xff0c;是一个实现特定接口的普通Java程序&#xff0c;用于监听Web应用中的对象或信息发生改变时&#xff0c;作出相应…
阅读更多...
大前端进阶

大前端进阶

目录 1.概述和前端工具vscode安装 1.下载安装VScode 2.中文界面配置 3.插件安装 4.设置字体大小 5.开启完整的Emmet语法支持 2.Nodejs 1.Nodejs介绍与安装 2.快速入门-Hello World 3.Node - 实现请求响应 4.Node-操作MYSQL数据库 3.Es6 1.ES6的概述 2.ES6的语法…
阅读更多...
Docker实战：使用Dockerfile部署第一个netcore程序

Docker实战：使用Dockerfile部署第一个netcore程序

目录 1、创建一个NetCore API项目 2、云服务部署 2.1 首先登录云服务器创建一个测试目录 2.2 新建dockerfile文件用来构建镜像。 2.3 构建镜像 2.4 运行镜像 目录 1、创建一个NetCore API项目 2、云服务部署 2.1 首先登录云服务器创建一个测试目录 2.2 新建dockerfil…
阅读更多...
Python3，10h行代码，制作艺术签名，从此走上人生巅峰。

Python3，10h行代码，制作艺术签名，从此走上人生巅峰。

制作艺术签名1、引言2、代码实战2.1 代码示例3、总结1、引言 小鱼&#xff1a;小屌丝&#xff0c;你在画啥呢&#xff1f; 小屌丝&#xff1a;… 我这在练习签名呢。 小鱼&#xff1a;这… 艺术签&#xff1f; 小屌丝&#xff1a;喔&#xff0c;鱼哥&#xff0c;你这真实博才多…
阅读更多...
CSDN云IDE怎样克隆代码

CSDN云IDE怎样克隆代码

文章目录1、怎样从GitHub导入项目&#xff1f;1.1、系统生成SSH-KEY2、克隆代码2.1、克隆代码方式一2.2、克隆代码方式二2.3、克隆代码方式三1、怎样从GitHub导入项目&#xff1f; 1.1、系统生成SSH-KEY 1、打开Terminal 2、查看是否存在现有的ssh密钥 $ ls -al ~/.ssh3、检…
阅读更多...
【LeetCode】【二叉树的最近公共祖先】

【LeetCode】【二叉树的最近公共祖先】

力扣 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以是它自…
阅读更多...
《JavaSE-第十四章》之文件(一)

《JavaSE-第十四章》之文件(一)

前言 在你立足处深挖下去,就会有泉水涌出!别管蒙昧者们叫嚷:“下边永远是地狱!” 博客主页&#xff1a;KC老衲爱尼姑的博客主页 博主的github&#xff0c;平常所写代码皆在于此 刷题求职神器 共勉&#xff1a;talk is cheap, show me the code 作者是爪哇岛的新手&#xff0c;水…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023