css 灰黑模式切换效果实现
原创 2023-03-24 10:24:39
46阅读
总是能看见非常多广告或者站点都是使用整屏滚动的效果,一直看着都心痒痒,想自己也实现一个。近期刚学习到css3的动画效果,所以尝试使用css3做了一个整屏切换。 页面结构 实现思路与大众方法相似。如图 每一个section就是一页内容。它的大小充满了屏幕(红色区域)。一个container由多个section构成,我们通过改变container的位置,来达到页面切换的效
转载 2017-07-18 10:39:00
325阅读
2评论
(目录) 实现效果 使用css和js实现一个tab切换效果 原理解析 如上图 红色框框代表盒子,总宽度记作 totalWidth 绿色框框代表每一项,宽度记作itemWidth 深蓝色框框代表的是下划线,宽度记作activeWitdh 那么我们可以得到线的左边距是每一项的左边距加上一个值 这个值是每一项的宽度减去线的宽度的结果再除以二 即 // index是当前点击的item索引,从0
原创 2023-09-17 09:53:43
1542阅读
那么我们可以得到线的左边距是每一项的左边距加上一个值。这个值是每一项的宽度减去线的宽度的结果再除以二。使用css和js实现一个tab切换效果。// 计算下划线位置。
原创 2023-10-03 08:50:28
1873阅读
点击切换css文件实现更换主题的功能<link type="text/css" rel="stylesheet" media="all" href="../theme1.css" id="theme_css" />document.getElementById('buttonID').addEventListener('click', function(){ documen...
原创 2023-03-04 07:52:50
411阅读
实现 transition tab切换 动态滑动效果,可以使用以下步骤:在 HTML 中创建 tab 标签,使用 CSS 设置样式和位置。使用 JavaScript 监听 tab 标签的点击事件,当标签被点击时,切换到相应的内容。使用 CSS 中的 transition 属性和 transform 属性来实现动态滑动效果。以下是一个示例代码:HTML:<div class="tabs"&g
原创 2023-07-07 09:58:21
4549阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>tab切换</...
原创 2023-09-02 10:25:27
74阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>tab切换</ti
原创 11月前
131阅读
css代码实现页面变灰的效果
原创 2023-07-16 07:43:36
2206阅读
代码效果: 基本思路: 1.设置元素的高度为0(指针的高度从border-bottom开始计算) 2.设置指针的宽度 3.设置border-bottom(指针的高度由该属性的宽度决定,颜色有该元素的背景色决定) 4.设置border-left,border-right 由于width = content+padding+border,现在padding为0, 所以整
原创 2012-08-31 11:01:58
1365阅读
CSS实现图形效果 CSS实现正方形、长方形、圆形、半圆、椭圆、三角形、平行四边形、菱形、梯形、六角星、五角星
原创 2022-05-27 23:59:00
179阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-">
原创 2020-03-16 21:03:00
178阅读
 
css
转载 2021-04-28 10:37:32
836阅读
2评论
实现对号效果,一种思路是利用现成的符号,直接在网上搜索到 √,插入页面。另一种思路是本文要介绍的用 CSS 实现,思路是: 给块级元素设置宽度和高度 设置元素相邻的两个 border 旋转元素HTML<div class="check-style-unequal-width"></div>解析 此处
转载 2021-08-05 15:27:24
1142阅读
首先是构思 我们使用<input type="checkbox">标签来实现这个效果。checkbox的选中、未选中的特性,刚好对应开关的打开、关闭on:打开 off:关闭 <label for="ck2"> <input type="checkbox" id="ck2"> <span>未选中,则关
css
转载 2020-11-25 13:37:00
275阅读
2评论
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
原创 2020-03-16 21:03:00
345阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
原创 2020-03-16 09:27:27
1027阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
原创 2020-03-16 09:24:06
152阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
原创 2020-03-16 09:24:06
92阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
原创 2020-03-16 09:27:27
820阅读
  • 1
  • 2
  • 3
  • 4
  • 5