搜索到
117
篇与
的结果
-
有趣的css - 列表块加载动效 因为接口问题只能显示静态图片核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。html部分<div class="list-box70"> <div class="pic70"></div> <div class="list70"> <span class="span70"></span> <div class="span-div70"> <span class="span701"></span> <span class="span702"></span> </div> </div> </div>css 部分代码.list-box70{ width: 200px; height: 76px; position: relative; background-color: #f8f8f8; border-radius: 12px; padding: 16px; display: flex; box-sizing: border-box; } .pic70{ width: 44px; height: 44px; position: relative; background-color: #e4e4e4; border-radius: 4px; animation: eff70 1.8s linear infinite; } .list70{ position: relative; display: flex; flex-direction: column; margin-left: 10px; } .span70{ width: 114px; height: 20px; position: relative; border-radius: 4px; background-color: #e4e4e4; animation: eff70 2s linear infinite; } .span-div70{ position: relative; margin-top: 10px; display: flex; } .span701,.span702{ width: 65px; height: 14px; position: relative; border-radius: 4px; background-color: #e4e4e4; animation: eff70 2.2s linear infinite; } .span702{ width: 39px; margin-left: 10px; animation: eff70 2.4s linear infinite; } @keyframes eff70{ 0%{ opacity: 0.2; } 50%{ opacity: 1; } 100%{ opacity: 0.2; } }1、定义整体列表块通用样式，设置一个浅一点的背景色，设置 display: flex 布局。2、利用 flex 布局，分别写出列表块中的每个小的矩形，并且设置相关的样式颜色等。3、给列表块里的每个小的矩形设置 animation 动画，并且设置相关参数，每个动画时长递增 0.2s 。4、设置动画关键帧，定义变化 opacity 透明属性，让列表块中的小的矩形由浅到深循环变化，这样就形成了视觉上列表块内容在加载的效果。完整代码如下html 页面<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>列表块加载动效</title> </head> <body> <div class="app"> <div class="list-box70"> <div class="pic70"></div> <div class="list70"> <span class="span70"></span> <div class="span-div70"> <span class="span701"></span> <span class="span702"></span> </div> </div> </div> </div> </body> </html>css部分/** style.css **/ .app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .list-box70{ width: 200px; height: 76px; position: relative; background-color: #f8f8f8; border-radius: 12px; padding: 16px; display: flex; box-sizing: border-box; } .pic70{ width: 44px; height: 44px; position: relative; background-color: #e4e4e4; border-radius: 4px; animation: eff70 1.8s linear infinite; } .list70{ position: relative; display: flex; flex-direction: column; margin-left: 10px; } .span70{ width: 114px; height: 20px; position: relative; border-radius: 4px; background-color: #e4e4e4; animation: eff70 2s linear infinite; } .span-div70{ position: relative; margin-top: 10px; display: flex; } .span701,.span702{ width: 65px; height: 14px; position: relative; border-radius: 4px; background-color: #e4e4e4; animation: eff70 2.2s linear infinite; } .span702{ width: 39px; margin-left: 10px; animation: eff70 2.4s linear infinite; } @keyframes eff70{ 0%{ opacity: 0.2; } 50%{ opacity: 1; } 100%{ opacity: 0.2; } } -
实用CSS片段 弧形盒子（背景）<div class="topBox"></div> <style> /* 弧形背景 */ .topBox { width: 100%; position: relative; z-index: 1; overflow: hidden; padding: 60rpx 20rpx 20rpx; box-sizing: border-box; } .topBox::after { content: ""; width: 140%; height: 200px; position: absolute; left: -20%; top: 0; z-index: -1; border-radius: 0 0 50% 50%; background: #00aaff; } /* 弧形背景 */ </style>这个效果一般用于轮播背景或者个人中心背景。网页一键变灰body{ filter: grayscale(1); }一般用于特殊时期，网页变灰，只需要给body标签添加这行样式代码。一键换主题色body { filter: hue-rotate(45deg); }给body标签设置这个属性样式，改变角度看看效果吧。网页css波浪<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice"> <defs> <linearGradient id="bg"> <stop offset="0%" style="stop-color:rgba(130, 158, 249, 0.06)"></stop> <stop offset="50%" style="stop-color:rgba(76, 190, 255, 0.6)"></stop> <stop offset="100%" style="stop-color:rgba(115, 209, 72, 0.2)"></stop> </linearGradient> <path id="wave" fill="url(#bg)" d="M-363.852,502.589c0,0,236.988-41.997,505.475,0 s371.981,38.998,575.971,0s293.985-39.278,505.474,5.859s493.475,48.368,716.963-4.995v560.106H-363.852V502.589z" /> </defs> <g> <use xlink:href='#wave' opacity=".3"> <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="10s" calcMode="spline" values="270 230; -334 180; 270 230" keyTimes="0; .5; 1" keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" /> </use> <use xlink:href='#wave' opacity=".6"> <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="8s" calcMode="spline" values="-270 230;243 220;-270 230" keyTimes="0; .6; 1" keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" /> </use> <use xlink:href='#wave' opacty=".9"> <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="6s" calcMode="spline" values="0 230;-140 200;0 230" keyTimes="0; .4; 1" keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" /> </use> </g> </svg>svg { position: absolute; bottom: 0; left: 0; width: 100%; height:40%; box-sizing: border-box; display: block; background-color: #ffffff; }一般用于登录/注册页面的顶部或底部，实现一个波浪滚动效果。文字超出显示省略号p{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; }一般用于文本的超出隐藏显示省略号效果，应用很广泛。-webkit-line-clamp 属性为需要显示的行数，例子中为2行。设置字母大小写p {text-transform: uppercase} /* 所有字母变成大写字母*/ p {text-transform: lowercase} /* 所有字母变成小写字母*/ p {text-transform: capitalize} /* 首字母大写*/ p {font-variant: small-caps} /* 字体变成小型的大写字母*/设置placeholder样式input::-webkit-input-placeholder { color: red; }隐藏滚动条div::-webkit-scrollbar { display: none }禁止选中.texts{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }移动端软键盘右下角搜索文字<form action="#"> <input type="search" placeholder="请输入..." name="search" /> </form>
-
有趣的css - 上下线条左右滑动按钮 动态文字按钮，常适用于独立按钮入口，引导用户点击。核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。核心代码html 代码<button class="btn75">HOVER</button>按钮主体标签代码。css 部分代码.btn75{ padding: 10px 16px; font-size: 16px; font-weight: 700; color: #333; letter-spacing: 4px; border: none; outline-style: none; background-color: transparent; cursor: pointer; position: relative; transition: color 0.4s linear; } .btn75:before,.btn75:after{ content: ''; width: 0; height: 2px; background-color: #ff3a85; position: absolute; top: 0; left: 0; transition: width 0.4s linear; } .btn75:after{ top: auto; left: auto; bottom: 0; right: 0; } .btn75:hover:before,.btn75:hover:after{ width: 100%; } .btn75:hover{ color: #ff3985; text-shadow: 0 4px 10px rgba(238,99,150,0.4); }1、按钮标签添加基本样式，定义 outline-style: none ; ，取消按钮默认轮廓样式，定义按钮背景透明 background-color: transparent ; 。2、给按钮添加 transition 过渡属性，定义为 transition: color 0.4s linear ; ，让 color 字体颜色过渡显示。3、基于按钮标签，通过 :before 和 :after 伪元素选择器，创建两个默认宽度为 0 、高度为 2px 的矩形，通过 position 定位属性，分别让两个矩形定位到按钮的上下边框位置。4、给 :before 和 :after 两个伪元素矩形添加 transition 过渡属性，定义为 transition: width 0.4s linear ; ，让 width 宽度过渡显示。5、利用 :hover 选择器，给 :before 和 :after 两个伪元素矩形添加鼠标悬浮效果，当鼠标悬浮到其上方时，两个伪元素矩形宽度变为 100% ；同时给按钮添加鼠标悬浮效果，当鼠标悬浮到按钮上方时，按钮中的文字颜色过渡变化，且增加投影效果。完整代码如下html 页面<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>上下线条左右滑动按钮</title> </head> <body> <div class="app"> <button class="btn75">HOVER</button> </div> </body> </html>css.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .btn75{ padding: 10px 16px; font-size: 16px; font-weight: 700; color: #333; letter-spacing: 4px; border: none; outline-style: none; background-color: transparent; cursor: pointer; position: relative; transition: color 0.4s linear; } .btn75:before,.btn75:after{ content: ''; width: 0; height: 2px; background-color: #ff3a85; position: absolute; top: 0; left: 0; transition: width 0.4s linear; } .btn75:after{ top: auto; left: auto; bottom: 0; right: 0; } .btn75:hover:before,.btn75:hover:after{ width: 100%; } .btn75:hover{ color: #ff3985; text-shadow: 0 4px 10px rgba(238,99,150,0.4); }
-
揭秘验证码背后的动机：为何黑客不惜破解图形与滑块验证？ 在这个数字化时代，验证码作为一种常见的网络安全措施，被广泛应用于网站登录、注册、评论等场景，用以防止机器自动化操作。然而，你是否想过，为何有些黑客会不惜花费时间和精力去破解这些验证码，仅仅是为了点赞或发文？今天，我们就来揭秘验证码背后的动机，并通过一个代码demo演示，带你了解验证码破解的原理。一、验证码背后的动机恶意行为：一些黑客可能出于恶意，试图破坏网站的正常运行，通过破解验证码进行非法操作，如发布垃圾信息、进行刷单等。利益驱动：在某些情况下，破解验证码可能是为了获取经济利益。例如，一些网站会对点赞、评论等行为进行奖励，黑客可能通过破解验证码来自动化操作，从而获取更多奖励。技术挑战：对于一些技术高手来说，破解验证码本身也是一种技术挑战。他们可能出于对技术的热爱，试图破解各种验证码算法，以展示自己的技术实力。二、图形验证码破解原理及代码demo演示图形验证码通常是通过生成一张包含随机字符或图案的图片，要求用户输入正确的字符或选择正确的图案来通过验证。然而，这些验证码并非无懈可击，一些黑客会利用图像处理技术来破解它们。下面是一个简单的图形验证码破解的代码demo，使用Python语言和OpenCV库：ython import cv2 import pytesseract # 读取验证码图片 img = cv2.imread('captcha.png') # 使用Tesseract OCR库识别图片中的文字 text = pytesseract.image_to_string(img, lang='eng') # 输出识别结果 print("识别结果:", text)三、滑块验证码破解原理及防范措施滑块验证码是一种较为常见的验证码类型，要求用户按照指定的轨迹滑动滑块来完成验证。这种验证码相比图形验证码来说更加难以破解，但仍然存在一定的风险。滑块验证码的破解原理主要是通过模拟用户的滑动轨迹来通过验证。黑客可能会利用机器学习算法来学习和模拟用户的滑动行为，从而破解滑块验证码。为了防范滑块验证码被破解，网站可以采取以下措施：增加轨迹复杂度：设计更加复杂和随机的滑动轨迹，增加破解的难度。引入时间限制：设置滑块验证码的有效时间，防止黑客通过长时间尝试来破解。结合其他验证方式：将滑块验证码与其他验证方式（如短信验证、邮箱验证等）结合使用，提高安全性。
-
无需书写 CSS！只需关注HTML，即可快速构建美观的网站 一、Tailwind CSS 是干什么的？Tailwind CSS 是一个实用工具优先的 CSS 框架，它提供了一系列低级别的 CSS 类，这些类可以直接应用于 HTML 元素上。与传统的 CSS 框架（如 Bootstrap、Foundation）不同，Tailwind CSS 不提供预定义的组件，而是通过组合这些基础类来构建用户界面。其核心理念是通过小而单一职责的工具类来实现高度的可定制性和灵活性。二、Tailwind CSS 的好处快速开发：• Tailwind CSS 允许开发者通过使用预定义的工具类快速构建和调整界面元素，省去了编写和调试自定义 CSS 的繁琐过程。高度可定制：• 开发者可以通过配置文件（tailwind.config.js）轻松地定制颜色、字体、间距等设计系统，使得 Tailwind CSS 可以适应各种项目需求。响应式设计：• Tailwind CSS 内置了响应式设计支持，通过简单的类名前缀（如 sm:, md:, lg:, xl:）即可实现多设备兼容的布局。优化的文件大小：• Tailwind CSS 可以与 PurgeCSS 集成，自动移除未使用的 CSS 类，从而显著减少生成的 CSS 文件大小，提高页面加载速度。一致性和可维护性：• 使用 Tailwind CSS 的工具类可以确保项目中样式的一致性，减少样式冲突和覆盖问题，提升代码的可维护性。无锁定效应：• Tailwind CSS 不强制使用特定的组件样式或设计语言，开发者可以自由组合和自定义样式，不受框架预定义样式的限制。三、Tailwind CSS 的使用场景快速原型设计：• 通过使用 Tailwind CSS 的工具类，开发者可以迅速搭建原型页面，快速验证设计想法和用户需求。定制化设计需求：• 对于需要高度定制化的设计项目，Tailwind CSS 提供了灵活的工具，允许开发者创建独特的设计。大型应用开发：• 在大型应用中，Tailwind CSS 的模块化设计和高可定制性使得维护和扩展变得更加容易，确保代码的清晰和一致性。响应式布局：• Tailwind CSS 的响应式设计工具类可以帮助开发者轻松创建适配各种设备的布局，提高用户体验。四、如何使用 Tailwind CSS安装 Tailwind CSS要开始使用 Tailwind CSS，首先需要安装它。可以通过 npm 或 Yarn 进行安装：npm install tailwindcss安装完成后，初始化 Tailwind CSS 配置文件：npx tailwindcss init配置 Tailwind CSS在项目根目录下会生成一个 tailwind.config.js 文件，可以通过修改这个文件自定义 Tailwind CSS 的配置，例如添加自定义颜色、字体等。module.exports = { content: ['./src/**/*.{html,js}'], theme: { extend: { colors: { customColor: '#1c92d2', }, }, }, plugins: [], }使用 Tailwind CSS 类在你的 HTML 文件中，可以直接使用 Tailwind CSS 提供的类名来快速构建页面。例如：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/dist/output.css" rel="stylesheet"> <title>Tailwind CSS Example</title> </head> <body class="bg-gray-100 p-6"> <div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden"> <div class="px-6 py-4"> <h1 class="font-bold text-xl mb-2">Hello, Tailwind CSS!</h1> <p class="text-gray-700 text-base"> Tailwind CSS 是一个高度可定制的 CSS 框架。 </p> </div> <div class="px-6 py-4"> <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700"> Learn More </button> </div> </div> </body> </html>构建 Tailwind CSS在开发过程中，可以使用以下命令来生成 Tailwind CSS 文件：npx tailwindcss build src/styles.css -o dist/output.css优化生产环境在生产环境中，使用 PurgeCSS 来移除未使用的 CSS 类，从而优化文件大小：module.exports = { purge: ['./src/**/*.{html,js}', './public/index.html'], // 其他配置 }
CC BY-NC-ND