当前位置: 首页 > news >正文

只用 CSS 能玩出什么花样?

在前端开发领域,CSS 不仅仅是一种样式语言,它更像是一位多才多艺的艺术家,能够创造出令人惊叹的视觉效果。本文将带你探索 CSS 的无限可能,从基本形状到动态动画,从几何艺术到仿生设计,只用 CSS 就能玩出令人难以置信的花样。

基本形状的魔法

让我们从最基础的开始,利用 CSS 的 border-radiustransform 属性,我们可以创建各种基本形状。

圆形
<div class="circle"></div>
<style>
.circle {width: 100px;height: 100px;background-color: #f06;border-radius: 50%;
}
</style>

在这里插入图片描述

三角形
<div class="triangle"></div>
<style>
.triangle {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid #f06;
}
</style>

在这里插入图片描述

文字效果的创新

CSS 还可以用来创造独特的文字效果,如阴影、渐变和动画。

阴影文字
<h1 class="shadow-text">Hello World</h1>
<style>
.shadow-text {color: transparent;text-shadow: 0 0 5px #f06, 0 0 10px #f06, 0 0 15px #f06, 0 0 20px #f06;
}
</style>

在这里插入图片描述

渐变文字
<h1 class="gradient-text">Hello World</h1>
<style>
.gradient-text {background-image: linear-gradient(to right, #f06, #0ff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}
</style>

在这里插入图片描述

动态动画的魅力

CSS 动画和过渡效果为网页增添了生命力。

摆动动画
<div class="swing"></div>
<style>
.swing {width: 100px;height: 100px;background-color: #f06;animation: swing 2s infinite ease-in-out;
}@keyframes swing {0%, 100% { transform: rotate(0deg); }50% { transform: rotate(30deg); }
}
</style>

在这里插入图片描述

几何艺术的展现

通过 CSS Grid 或 Flexbox,可以构建复杂的几何图案。

简单的网格图案
<div class="grid-pattern"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<style>
.grid-pattern {display: grid;grid-template-columns: repeat(4, 1fr);gap: 5px;
}
.grid-pattern div {width: 50px;height: 50px;background-color: #f06;
}
</style>

在这里插入图片描述

仿生设计的尝试

CSS 甚至可以模拟自然界中的现象,如水波纹或植物生长。

水波纹效果
<div class="water-drop"><div class="ripple"></div>
</div>
<style>
.water-drop {position: relative;width: 200px;height: 200px;background-color: #00a;
}
.ripple {position: absolute;width: 100px;height: 100px;background-color: rgba(255, 255, 255, 0.5);border-radius: 50%;animation: ripple 1s infinite;
}@keyframes ripple {0% { transform: scale(1); opacity: 1; }100% { transform: scale(2); opacity: 0; }
}
</style>

在这里插入图片描述

总结一下

CSS 的潜力远远超出了日常布局和样式的范畴。通过巧妙运用其功能,我们不仅能够构建美观且功能性的网站,还能创造出令人赞叹的视觉艺术。从基本形状到复杂的动画,CSS 提供了无尽的可能性,等待着每一位前端开发者去探索和实现。

以上代码示例展示了 CSS 的部分能力,但真正的乐趣在于实验和创造。所以,拿起你的代码编辑器,开始探索 CSS 的无限可能性吧!

相关文章:

只用 CSS 能玩出什么花样?

在前端开发领域&#xff0c;CSS 不仅仅是一种样式语言&#xff0c;它更像是一位多才多艺的艺术家&#xff0c;能够创造出令人惊叹的视觉效果。本文将带你探索 CSS 的无限可能&#xff0c;从基本形状到动态动画&#xff0c;从几何艺术到仿生设计&#xff0c;只用 CSS 就能玩出令…...

Linux C++ 056-设计模式之迭代器模式

Linux C 056-设计模式之迭代器模式 本节关键字&#xff1a;Linux、C、设计模式、迭代器模式 相关库函数&#xff1a; 概念 迭代器模式&#xff08;Iterator Pattern&#xff09;是一种常用的设计模式。迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素&#xff0c;而…...

【Elasticsearch7.11】reindex问题

参考博文链接 问题&#xff1a;reindex 时出现如下问题 原因&#xff1a;数据量大&#xff0c;kibana的问题 解决方法&#xff1a; 将DSL命令转化成CURL命令在服务上执行 CURL命令 自动转化 curl -XPOST "http://IP:PORT/_reindex" -H Content-Type: application…...

nginx代理缓存

在服务器架构中&#xff0c;反向代理服务器除了能够起到反向代理的作用之外&#xff0c;还可以缓存一些资源&#xff0c;加速客户端访问&#xff0c;nginx的ngx_http_proxy_module模块不仅包含了反向代理的功能还包含了缓存功能。 1、定义代理缓存规则 参数详解&#xff1a; p…...

[React 进阶系列] useSyncExternalStore hook

[React 进阶系列] useSyncExternalStore hook 前情提要&#xff0c;包括 yup 的实现在这里&#xff1a;yup 基础使用以及 jest 测试 简单的提一下&#xff0c;需要实现的功能是&#xff1a; yup schema 需要访问外部的 storage外部的 storage 是可变的React 内部也需要访问同…...

Linux C++ 055-设计模式之状态模式

Linux C 055-设计模式之状态模式 本节关键字&#xff1a;Linux、C、设计模式、状态模式 相关库函数&#xff1a; 概念 状态模式&#xff08;State Pattern&#xff09;是设计模式的一种&#xff0c;属于行为模式。允许一个对象在其内部状态改变时改变它的行为。对象看起来似…...

景联文科技构建高质量心理学系知识图谱,助力大模型成为心理学科专家

心理大模型正处于快速发展阶段&#xff0c;在临床应用、教育、研究等多个领域展现出巨大潜力。 心理学系知识图谱能够丰富心理大模型的认知能力&#xff0c;使其在处理心理学相关问题时更加精确、可靠和有洞察力。这对于提高心理健康服务的质量和效率、促进科学研究以及优化教育…...

【数学建模】——数学规划模型

目录 一、线性规划&#xff08;Linear Programming&#xff09; 1.1 线性规划的基本概念 1.2 线性规划的图解法 模型建立&#xff1a; 二、整数规划&#xff08;Integer Programming&#xff09; 2.1 整数规划的基本概念 2.2 整数规划的求解方法 三、非线性规划&#x…...

卸载linux 磁盘的内容,磁盘占满

Linux清理磁盘 https://www.cnblogs.com/siyunianhua/p/17981758 当前文件夹下&#xff0c;数量 ls -l | grep "^-" | wc -l ls -lR | grep "^-" | wc -l 找超过100M的大文件 find / -type f -size 100M -exec ls -lh {} \; df -Th /var/lib/docker 查找…...

LeetCode-随机链表的复制

. - 力扣&#xff08;LeetCode&#xff09; 本题思路&#xff1a; 首先注意到随机链表含有random的指针&#xff0c;这个random指针指向是随机的&#xff1b;先一个一个节点的拷贝&#xff0c;并且把拷贝的节点放在拷贝对象的后面&#xff0c;再让拷贝节点的next指向原链表拷贝…...

axios 下载大文件时,展示下载进度的组件封装——js技能提升

之前面试的时候&#xff0c;有遇到一个问题&#xff1a;就是下载大文件的时候&#xff0c;如何得知下载进度&#xff0c;当时的回复是没有处理过。。。 现在想到了。axios中本身就有一个下载进度的方法&#xff0c;可以直接拿来使用。 下面记录一下处理步骤&#xff1a; 参考…...

Linux: network: device事件注册机制 chatGPT; notify

ChatGPT 在 Linux 内核中,有关网络设备(net-device)的事件注册机制,允许用户在网络设备的状态发生变化(例如设备被删除、添加或修改)时接收通知。这主要通过 netdev 事件通知机制实现。具体来说,内核提供了一组用于注册和处理网络设备事件的 API。 以下是一些关键组件…...

【ROS2】测试

为什么要进行自动化测试&#xff1f; 以下是我们应该进行自动化测试的许多重要原因之一&#xff1a; 您可以更快地对代码进行增量更新。ROS 有数百个包&#xff0c;具有许多相互依赖关系&#xff0c;因此很难预见一个小变化可能引起的问题。如果您的更改通过了单元测试&#xf…...

别卷模型,卷应用:从李彦宏的AI观点谈起

2024年7月4日&#xff0c;世界人工智能大会暨人工智能全球治理高级别会议在上海世博中心隆重召开。百度创始人、董事长兼首席执行官李彦宏在产业发展主论坛上的发言&#xff0c;引起了广泛关注。他提出&#xff1a;“大家不要卷模型&#xff0c;要卷应用&#xff01;”这一观点…...

数据库(Database,简称DB)介绍

数据库&#xff08;Database&#xff0c;简称DB&#xff09;是信息技术领域中一个至关重要的组成部分&#xff0c;它按照数据结构来组织、存储和管理数据。以下是对数据库的详细介绍&#xff1a; 一、定义与基本概念 定义&#xff1a;数据库是按照数据结构来组织、存储和管理…...

Redis五种常用数据类型详解及使用场景

Redis 5 种基本数据类型 Redis 共有 5 种基本数据类型&#xff1a;String&#xff08;字符串&#xff09;、List&#xff08;列表&#xff09;、Set&#xff08;集合&#xff09;、Hash&#xff08;散列&#xff09;、Zset&#xff08;有序集合&#xff09;。 这 5 种数据类型…...

Postman API测试覆盖率:全面评估指南

&#x1f4ca; Postman API测试覆盖率&#xff1a;全面评估指南 在API测试中&#xff0c;测试覆盖率是一个关键指标&#xff0c;它衡量了测试用例对代码的覆盖程度。Postman提供了多种工具和方法来评估API测试覆盖率&#xff0c;帮助开发者和测试人员确保API的质量和稳定性。本…...

C++--find

find 在[first,last)区间找第一个等于val的元素。 template<class InputIterator, class T> InputIterator find(InputIterator first,//起始迭代器 InputIterator last, //结束迭代器 const T& val); //需要查找的值 源码剖析 template<class InputI…...

JavaWeb入门程序解析(Spring官方骨架、配置起步依赖、SpringBoot父工程、内嵌Tomcat)

3.3 入门程序解析 关于web开发的基础知识&#xff0c;我们可以告一段落了。下面呢&#xff0c;我们在基于今天的核心技术点SpringBoot快速入门案例进行分析。 3.3.1 Spring官方骨架 之前我们创建的SpringBoot入门案例&#xff0c;是基于Spring官方提供的骨架实现的。 Sprin…...

mysql命令练习

创建数据表grade: CREATE TABLE grade( id INT NOT NULL&#xff0c; sex CHAR(1)&#xff0c; firstname VARCHAR(20) NOT NULL&#xff0c; lastname VARCHAR(20) NOT NULL&#xff0c; english FLOAT&#xff0c; math FLOAT, chinese FLOAT )&#xff1b; 向数据表grade中插…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...