html+css
关注
分享
扫一扫
html+css和html5+css3的细节上的一些处理办法
Southern Wind
前端开发
个人博客：https://nanchen042.github.io/docs/
稀土掘金： https://juejin.cn/user/1588130256005415/posts
展开
-
从零开始打造HTML5拼图游戏：一个Canvas实战项目
在开始动手之前，我想分享一下为什么选择HTML5 Canvas来开发拼图游戏。相比于传统的DOM操作，Canvas提供了更高效的图形渲染能力和更灵活的像素级控制。对于拼图这种需要处理不规则形状和复杂交互的游戏来说，Canvas无疑是最佳选择。性能优异：即使在移动设备上也能流畅运行视觉效果好：支持不规则拼图形状、平滑动画和精确的图像裁剪交互体验佳：磁性吸附、拖放操作和触摸支持让游戏体验更加友好代码结构清晰：便于理解和扩展。原创 2025-03-31 16:14:10 · 305 阅读 · 0 评论 -
用cursor接入mcp协议并体验Magic生成AI网站
在开始使用之前，我们要稍微理解一下什么是mcp协议。（模型上下文协议）MCP 是一种开放式协议，它规范了应用程序向 LLM 提供上下文的方式。把 MCP 想象成人工智能应用的 USB-C 接口。原创 2025-03-18 16:30:09 · 794 阅读 · 0 评论 -
关于使用CDN方式引入原子化js时出现闪屏问题解决方法
先看问题在使用原子化 CSS（如 、 或 ）时，可能会遇到页面刷新后所有样式类丢失，再加载时体验较差的问题。这是因为样式通过 JavaScript 动态加载渲染，页面初始时 JavaScript 尚未解析完成，导致样式无法获取。通过给 元素设置 ，等到 JavaScript 完成解析后再显示页面内容，可以解决这个问题。CSS 部分：JavaScript 部分：引入 JavaScript 文件：这样，页面在加载完成后才显示内容，避免用户看到样式丢失的过程，提升了用户体验。原创 2024-09-13 10:50:37 · 308 阅读 · 0 评论 -
原生js制作svg 图标生成动态 tab栏切换效果(结尾附代码)
先看效果：我想做一个 tab 栏比较美观的效果，当然切换的数据可以自己做一下，这里不演示，说一下特效如何制作。当我点击时要将空心变为实心的这么一个效果，所以准备两个五角星样式一个是空的一个是实心的 svg 图片结构大致是这样首先需要一个父元素可以定义一个标签然后就是需要一个数组里面存放文字，颜色，填充色以及描边的阴影，我这里用六个色调为一组，如果自己想设置什么颜色或者想要每个不同可以自行考虑更换2. 创建遍历元素，并添加到父级中。其中是用来做五角星发光的边框阴影接下来就是做竖着的线条的原创 2024-06-19 17:06:22 · 1169 阅读 · 0 评论 -
超级大转盘！(html+less+js)（结尾附代码）
有个会议需要用到转盘抽奖，有机会赢得不同奖品。html+less和 js实现先上效果：旋转动画的话其实就是中的 transform 属性，改变转盘旋转的速度以及动画结束时间JS 部分因为数据肯定是活的，所以我们这里要把数据单独拎出来圈里的图片可以自己查找替换定义变量把奖品放入这个函数中抽奖部分转盘转动角度完整代码：结尾当然中什么可以自己根据id控制中什么（我中不了奖就是有黑幕！）原创 2024-05-08 15:40:33 · 942 阅读 · 0 评论 -
HarmonyOS4.0系列——02、汉化插件、声明式开发范式ArkTS和类web开发范式
我们在每次退出编辑器后再次打开会直接进入项目文件中，这样在新建项目用起来很是不方便，所以这里跟着设置一下就好。这样下次进入就不会直接跳转到当时的文件项目中！→重启DevEco-Studio完成汉化。也就是所谓的前端开发方式。原创 2023-11-24 15:24:21 · 1009 阅读 · 0 评论 -
移动端横向滚动列表
移动端横向滚动列表简单版原创 2023-03-07 11:02:25 · 245 阅读 · 0 评论 -
vue3通过css对按钮替换主题颜色
最后通过v-bind给最外层的盒子添加需要替换的颜色。最后弄一个按钮来控制这个颜色的变化。定义一个对象用来存放颜色。写个方法用来存储对象。原创 2022-12-13 16:04:45 · 922 阅读 · 0 评论 -
制作移动端整页滚动动画
这里需要注意一点，如果你想在翻动页面进行点击的一些操作，那么就需要将pageSlider.js中的阻止默认行为给去掉，否则是无法进行点击事件的。这里是pageSlider.js修改后的文件，这个文件实在是不太好找，时间比较长了，这里复制粘贴即可。如果你进行翻页可能会发现你每次翻页的时候所有的页面的动画都会同时进行，那么可以操作。pageSlider.js(控制动画的js文件)的样式必须存在，后面跟你需要执行的动画名称，比如。类名前面的wow是每一个带动画的元素都要加的，animate.css(动画样式)原创 2022-12-09 12:30:52 · 1060 阅读 · 0 评论 -
js手风琴影响body背景图自适应屏幕高度
这里可以用js去监听他的高度然后根据他的高度来设置图片大小，但css设置效果会更好些也比较简单，简单看一下吧。一个长图，怎么根据菜单栏伸展自适应屏幕高度，不足屏幕高度时默认100vh，原创 2022-10-25 10:54:55 · 349 阅读 · 0 评论 -
Vue3——使用v-if或v-show来实现过渡的动画效果
想要通过v-if或者v-show来实现动画的衔接动作，也看了网上的一些例子，这里给总结一下。这里如果是想点击一次过渡过去再次点击一次过渡回来的话，是不需要给两个不同的。这种过渡效果很简单，只需要用if语句来判断动画出现顺序即可。标签设置两种动画，只需要用同一个动画即可。就不需要加**name=‘h1’**了。原创 2022-09-15 16:35:03 · 9176 阅读 · 0 评论 -
Vue3——动态input边框效果实现
因为这里使用的是Vant移动端写的，所以不好给自带的input框添加foucs样式，所以我这里就给他一个hover代替点击焦点样式，效果是一致的。原创 2022-09-13 16:13:03 · 1847 阅读 · 0 评论 -
使用canvas绘制时钟
是的，beginPath()是重新开始新路径，而把之前的路径都清空掉。arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。使用clip()函数将该区域（由rect()、arc()方法指定的绘图区域）设定为裁选区。使用Canvas的绘制函数比如，rect()、arc()之类的方法选择好绘图区域。原创 2022-09-09 12:03:49 · 544 阅读 · 0 评论 -
JS——经典案例
JS的经典案例原创 2022-09-09 11:41:45 · 1046 阅读 · 0 评论 -
负margin的使用
【代码】负margin的妙用。原创 2022-09-07 13:45:10 · 160 阅读 · 0 评论 -
Vue——初始化样式
代码】Vue——初始化样式。原创 2022-07-20 10:44:43 · 1400 阅读 · 0 评论 -
jQuery——Tab栏切换
简单tab栏切换实现效果如下： 完整代码：原创 2022-06-27 16:12:46 · 5775 阅读 · 0 评论 -
CSS——两端对齐
两端对齐原创 2022-06-14 16:13:40 · 1526 阅读 · 1 评论 -
CSS——用less绘制渐变动画
静态渐变/deep/ .dv-scroll-ranking-board .ranking-column .inside-column{ background-image: -webkit-linear-gradient(left, #1674D6, #2392E0 40%,#38C0F1 75%, #49E6FE 100%);}效果如下：可以直接用background-image对动画进行渐变用less做渐变动画因为less不能直接识别@keyframes所以需要通过自..原创 2022-02-12 20:01:36 · 1594 阅读 · 0 评论 -
CSS——0.5px像素以及0.1像素实现
<!DOCType html><html><head> <meta charset="utf-8"> <style> .hr { width: 300px; background-color: #000; } .scale-half { height: 1px; transform: scaleY(0.1); /* 延Y.原创 2022-01-19 09:23:58 · 852 阅读 · 0 评论 -
让css固定定位占据其位置
通常固定定位是不具备占据位置的，如果想实现上下不滚动让中间滚动，可以在固定定位中再嵌套一层盒子设置一个固定高度即可 <div class="had"> <header class="header"> <h5>个人中心</h5> </header>.had{ height: 45px; width: 100%;}.header { width: 100%; height: 45px原创 2022-01-03 19:03:35 · 6776 阅读 · 3 评论 -
你不一定知道的HTML+CSS 题01
1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?IE: trident 内核Firefox：gecko 内核Safari:webkit 内核Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核Chrome:Blink(基于 webkit)2、每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html&原创 2021-12-29 16:51:49 · 619 阅读 · 1 评论 -
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">..原创 2021-12-26 10:34:23 · 351 阅读 · 0 评论 -
CSS——正方体360°旋转动画 效果
对3D图形做动画效果原创 2021-12-26 10:24:28 · 1894 阅读 · 0 评论 -
CSS——面试题第一篇
目录1、有哪些选择符，优先级的计算公式是什么？行内样式和！important哪个优先级高？2、CSS 的盒模型由什么组成？3、哪些 css 属性可以继承？4、css 优先级算法如何计算？5、什么是外边距重叠？重叠的结果是什么？6、CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可 视范围内？7、html 常见兼容性问题？8、CSS 的盒子模型有哪两种？9、列出 display 的值，说明他们的作用。position 的值， relative 和 .原创 2021-12-24 13:55:03 · 781 阅读 · 0 评论 -
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"> ...原创 2021-10-05 14:52:06 · 618 阅读 · 0 评论 -
CSS——图片自适应宽高
宽度拉伸：把width设置成100%，height设置auto高度拉伸：把height设置成100%，width设置auto<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con原创 2021-09-28 09:25:12 · 7399 阅读 · 0 评论 -
css中如何在一行计算固定宽度和自适应宽度
可能会遇到这样一种问题：图片大小是固定死的，其他在这一行的元素可以随着浏览器变化而等比例缩放比如：我图片大小固定为72px，那么想让后面的宽度自适应屏幕大小。可以用此公式：width:-webkit-calc(100%-72px);width:-moz-calc(100%-72px);width:calc(100%-72px);如果换成小屏下不会影响后面的宽度变化：...原创 2021-09-19 10:07:57 · 476 阅读 · 0 评论 -
swiper——单页面多轮播插件冲突解决方案
多个swiper在同一页面显示异常问题原创 2022-06-10 15:13:49 · 1562 阅读 · 0 评论 -
Bootstrap——手机端手风琴效果实现
移动端手风琴效果原创 2022-06-09 09:43:10 · 1403 阅读 · 0 评论 -
移动端——swipe特效之图片时间轴
swipe移动端的时间轴原创 2022-06-07 10:51:33 · 1296 阅读 · 2 评论 -
JS——瀑布流无限加载以及动态生成a标签
JS瀑布流+无限滚动效果实现原创 2022-06-04 13:03:45 · 724 阅读 · 0 评论 -
解决手机端中overflow: auto引起的内容滑动卡顿问题
把overflow:auto换成设置兼容手机端的触摸事件 overflow: auto;-webkit-overflow-scrolling:touch;原创 2021-12-31 10:46:04 · 1253 阅读 · 0 评论 -
div盒子水平垂直居中以及表格的居中的方法
#admin { position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -200px; width: 400px; height: 300px; background: #fff;}1.必需知道该div的宽度和高度，2.然后设置位置为绝对位置，3.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，4.最后将该div分别左移.原创 2021-11-17 08:48:37 · 2808 阅读 · 0 评论 -
Vue——制作toDoList
效果如下：实现代码：HTML部分： <div id="todo" class="todo"> <div class="header"> <section> <!-- input部分 --> <label for="title">ToDoList</label> <inpu.原创 2021-10-29 16:55:27 · 628 阅读 · 0 评论 -
JavaScript——懒加载
懒加载顾名思义比较懒，不想全部加载出来，当用户什么时候想看我在加载后面的东西概括：懒加载其实就是延时加载，即当对象需要用到的时候再去加载。实现原理：首先你要有很多个第一张用来加载的图片，加载完毕之后显示后面所需的图片步骤实现：1.加载load图片2.判断哪些图片要加载3.隐形加载图片4.替换真图片CSS样式： <style> img { width: 400px; height: 3原创 2021-10-28 17:30:47 · 2536 阅读 · 0 评论 -
JavaScript——实现拖放效果
<!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>D.原创 2021-10-20 20:25:09 · 237 阅读 · 0 评论 -
JavaScript-模拟弹框
<!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>模.原创 2021-10-16 09:21:16 · 482 阅读 · 0 评论 -
JavaScript特效——让文字每秒钟进行变色
16种颜色随机变化每一秒钟变化一次给文字添加一个定时器让字体颜色随机切换方法：1、先给文字一个盒子2、然后用js获取这个盒子<div> 温度30°</div>var div = document.querySelector('div');3、其次准备一个数组里面用来存放颜色（这里例举16种颜色）： var color = ['#f00', '#000', 'yellow', 'blue', 'black', 'gold', 'orange', '..原创 2021-09-29 15:12:54 · 5584 阅读 · 0 评论