前端CSS
关注
分享
扫一扫
文章平均质量分 58
小白6402
这个作者很懒，什么都没留下…
展开
-
纯css实现翻书效果
前言：在做一些自己网站的时候，如何封装自己的作品链接，如果直接放，感觉太冰冷，所以需要包装啊，用一本本书，封装自己的作品链接，优雅而不失礼，当然你也可以做一些表白的女朋友的效果，打开书籍，看到的是她。emm,话不多说先看效果图：这是页面加载出来的效果图。这是打开书本后的效果，看你自己改哦你也可以这样：源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-11-25 17:29:16 · 2096 阅读 · 2 评论 -
Less简单学习总结
1.概览Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。2.安装 npm install less -g检测less是否成功，使原创 2021-11-02 10:00:59 · 181 阅读 · 2 评论 -
H5中实现拖拽技术
1.在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。拖动事件：dragstart、drag、dragend放置事件：dragenter、dragover、drop拖拽事件流：当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发dragstart->drag->dragenter->dragover->drop->dragend2.在拖拽事件中，我们可以通过DataTransfer来实现数据交互，通过even原创 2021-09-14 15:24:16 · 8565 阅读 · 1 评论 -
Canvas绘制时钟
效果图：源码<!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"> <tit原创 2021-09-14 11:24:42 · 67 阅读 · 0 评论 -
Html 实现手风琴效果
html简单实现手风琴效果这是加载页面的效果这是鼠标悬停的效果鼠标悬停哪一张图片也会相对应的展开（下面是代码，图片自己找几张放上去，路劲修改成自己的就可以了）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam原创 2021-09-10 16:43:58 · 6626 阅读 · 1 评论 -
js简单实现精美轮播图效果
精美轮播效果效果图展示：是不是觉得还是挺好看的。1.首先建一个文档简单的html文档2.引入下面的style样式 body{ background-color: rgb(119,115, 110); } ul{ width: 800px; height: 200px; position:absolute; padding: 0px;原创 2021-09-10 16:20:36 · 1044 阅读 · 2 评论 -
前端一张连续的静态长图鼠标移入移除显示动态效果。
前言：看了腾讯云有静态的一张长图，动画的那种移入移出的效果。我们的项目也想做这种效果。主管叫我看了下怎么实现的，叫我模仿一下实现。我也试了一下。先看效果图吧然后我写的原生代码是这样的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <原创 2021-12-11 21:45:52 · 840 阅读 · 0 评论 -
flex布局详细教程
flex布局详细介绍转载 2022-06-02 17:13:52 · 4288 阅读 · 0 评论 -
CSS常用的一些属性
本人从GitHub整理的一些说比较常用重要的CSS属性哈，它写的比较多，我就把一些比较复杂，不怎么用到的删掉了，留下那些相对于我来说比较常用的。原创 2022-06-16 10:34:52 · 738 阅读 · 0 评论 -
CSS模块化解决命名冲突---css module
CSS作用域是全局的，项目越来越大，人越来越多，命名慢慢成为了问题,难免会出现命名重复的问题，于是也诞生了相应的模块化解决方案。目前有这几类：BEM即为块级元素修饰字符（Block Element Modifier），以 .block__element–modifier 形式命名，即 .模块名__元素名–修饰符名 三个部分，用双下划线 __ 来明确区分模块名和元素名，用双横线 – 来明确区分元素名和修饰符名。这种命名主要还是人为去遵守命名约束Atomic CSS是原子化的CSS，就是将单一的属性封装一个原创 2022-06-30 17:08:00 · 1947 阅读 · 1 评论