2021-01-17

最新推荐文章于 2024-07-19 18:46:52 发布
最新推荐文章于 2024-07-19 18:46:52 发布
阅读量107 收藏
点赞数
分类专栏： 日常思考与总结 前端网页效果 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51141502/article/details/112727552
版权

CSS设计之个人开发试验的小demo

前情提要：CSS学习手册与规划路线全览；

一、按钮：

注意：要去除（或防止）点击按钮时出现默认的黑色边框样式（难看的），可以有一招：直接设置所有按钮的样式 outline为none；
在这里插入图片描述
在这里插入图片描述

1. 普通按钮：加鼠标光标移上来时光芒划过的效果 基本结构HTML：
资源链接：我的资源管理；

<div class="btnDiv">
	<div class="buttonDiv">
		<span>
			点击确认
		</span>
		
	</div>
</div>

在这里插入图片描述
2. 挺好看的 2D平面效果的普通按钮：
在这里插入图片描述

CSS样式：

.btn {
   padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
	color: #fff;
	outline: none;
	/*红色背景色颜色*/
    background-color: rgb(217, 83, 80);
    border-color: rgb(217, 83, 80);
    /*蓝色背景颜色
	background-color: rgb(51, 122, 185);
    border-color: rgb(51, 122, 185);	
	*/
	/*橙色背景颜色
	background-color: rgb(240, 173, 78);
    border-color: rgb(240, 173, 78);	
	*/
	 
	/*绿色背景颜色
	background-color: rgb(92, 184, 92);
    border-color: rgb(92, 184, 92);	
	*/
	/*浅蓝色背景颜色
	background-color: rgb(90, 190, 220);
    border-color: rgb(90, 190, 220);
	*/
	
}

HTML结构：

<button class="btn">click me</button>

二、进度条样式设置：

1. 各种色彩的进度条（div标签设置的）：
在这里插入图片描述
（1）基本HTML结构+CSS样式设置：

① 这个HTML文件的相关样式CSS可以单独封装在一个CSS文件中，
② 只要在运用进度条的HTML文件里面写入相应的HTML标签+这个CSS文件
就可以了！！！

<!doctype html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>进度条样式设置</title> 
	<style>
		/*父盒子div（外层div的样式设置）*/
		.colorful-div {
			width: 200px;
			height: 15px;
			overflow: hidden;
			border-radius: 7px;
			padding; 0;
			box-sizing: border-box;
			border: 1px solid orange;
			
		}
		/*内层div盒子的通用样式设置*/
		.colorful-div > div {
			width: 0%;
			height: 100%;
			background-size: 40px 40px;
    		margin: 0;
			border-radius: 7px;
			transition: all 0.3s;
		}
		<!--
		橙色进度条，给内层div子盒子添加类名orange的样式设置
		记住：background-color 比如 orange不能少，
		因为background-image 是transparent 透明色，
		到时候万一加载时就看不到颜色了
		-->
		.orange {
			background: orange linear-gradient(
				45deg,
				rgba(255,255,255,.15) 25%,
				transparent 25%,
				transparent 50%,
				rgba(255,255,255,.15) 50%,
				rgba(255,255,255,.15) 75%,
				transparent 75%
				
			);
		}
		.green {
			background: rgb(92, 190, 90) linear-gradient(
				45deg,
				rgba(255,255,255,.15) 25%,
				transparent 25%,
				transparent 50%,
				rgba(255,255,255,.15) 50%,
				rgba(255,255,255,.15) 75%,
				transparent 75%,
				transparent
			);
    		
		}
		.blue {
			background: rgb(91, 192, 242) linear-gradient(
				45deg,
				rgba(255,255,255,.15) 25%,
				transparent 25%,
				transparent 50%,
				rgba(255,255,255,.15) 50%,
				rgba(255,255,255,.15) 75%,
				transparent 75%,transparent
			);
		}
		.red {
			background: rgb(217, 83, 79) linear-gradient(
				45deg,
				rgba(255,255,255,.15) 25%,
				transparent 25%,
				transparent 50%,
				rgba(255,255,255,.15) 50%,
				rgba(255,255,255,.15) 75%,
				transparent 75%,
				transparent
			);
    	}
		.purple {
			background: rgb(97, 83, 197) linear-gradient(
				45deg,
				rgba(255,255,255,.15) 25%,
				transparent 25%,
				transparent 50%,
				rgba(255,255,255,.15) 50%,
				rgba(255,255,255,.15) 75%,
				transparent 75%,
				transparent
			);
    	}
	</style>
    </head>
	<body>
		<!--橙色进度条，给内层div子盒子添加类名orange-->
		<div class="colorful-div">
			<div class="orange"></div>
		</div>
		<!--蓝色进度条，给内层div子盒子添加类名blue-->
		<div class="colorful-div">
			<div class="blue"></div>
		</div>
		<!--绿色进度条，给内层div子盒子添加类名green-->
		<div class="colorful-div">
			<div class="green"></div>
		</div>
		<!--红色进度条，给内层div子盒子添加类名red-->
		<div class="colorful-div">
			<div class="red"></div>
		</div>
		<!--紫色进度条，给内层div子盒子添加类名purple-->
		<div class="colorful-div">
			<div class="purple"></div>
		</div>
		<!--
		其他颜色的进度条，可以根据自己的实际需求添加CSS样式，
		同时设置相关的方便记忆，见名知意类名class即可
		-->
	</body>
</html>

（2）JavaScript控制内层div子盒子宽度（水平方向的长度）width来实现progress加载中的进度条效果：

<!--
这里的JavaScript控制只是自己玩一下，随便操作数据模拟一下看看效果，
具体的动态效果还得自己根据实际需求来实现
-->
<script>
	window.addEventListener("DOMContentLoaded", function() {
		let colorfulDivs 
		= 
		document.getElementsByClassName("colorful-div");
		let colorfulDivsLen = colorfulDivs.length;
		for(let i = 0; i < colorfulDivsLen; i++) {
			
			progress(colorfulDivs[i].children[0]);
		}
		function progress(obj) {
			try {
				if(obj.set) {
					clearIterval(obj.set);
				}
				obj.zero = 0;
				obj.set = setInterval(function() {
					obj.style.width = (++obj.zero) + "%";
					console.table(obj.nowWidth, obj.style.width);
					if(obj.zero >= 100) {
						clearInterval(obj.set);
						
					}
				}, 100);
				
			} catch(err) {
				alert(err.message);
			}
		}
		
	});
	
</script>

三、二级菜单

1. CSS之旋转出现的li列表的炫酷二级菜单：文件链接；
另外还需要引入的样式初始化文件链接；

在这里插入图片描述

四、网页内容加载动画loading效果：

1. 变大变小的动画（HTML字符实体+CSS动画animation+font-size变化）：
在这里插入图片描述

（1）效果一：（CSS文件链接 - - 效果一）
① HTML结构：

	<script type="text/javascript">
		window.addEventListener("beforeunload", function() {
			document.getElementsByClassName("loading1")[0].style.display = "block";
		});
		window.addEventListener("load", function() {
			document.getElementsByClassName("loading1")[0].remove();
			/*
			整个网页加载好后（包括图片等），
			就移除这个动画元素，
			应该可以减少DOM树的分支
			*/
		});
	</script>
</head>
<body>
	<!--
	这个网页加载动画元素的div要放在body下面的第一个子元素的位置，
	因为是要在加载后面的所有元素之前运行动画的
	-->
	<div class="loading1">
		<div class="loading01">
			<div>加载中，稍等……<br />loading……</div>
			<div>
				<span>&#9946;</span>
			</div>
		</div>
	</div>
	……其他元素
</body>

（2）效果二： （CSS文件 - - 效果二）
① HTML结构：

	<script type="text/javascript">
		window.addEventListener("beforeunload", function() {
			document.getElementsByClassName("loading1")[0].style.display = "block";
		});
		window.addEventListener("load", function() {
			document.getElementsByClassName("loading1")[0].remove();
			/*整个网页加载好后（包括图片等），就移除这个动画元素，应该可以减少DOM树的分支*/
		});
	</script>
</head>
<body>
	<!--这个网页加载动画元素的div要放在body下面的第一个子元素的位置，因为是要在加载后面的所有元素之前运行动画的-->
	<div class="loading1">
		<div class="loading01">
			<div>加载中，稍等……<br />loading……</div>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
	……其他元素
</body>
English Bruce lin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
C89-C17 C 语言标准参考手册 2021-01-22 最新版本
01-22
这份"2021-01-22 最新版本"的"C89-C17 C 语言标准参考手册"涵盖了从C89（即ISO/IEC 9899:1990）到C17（即ISO/IEC 9899:2018）的所有主要版本，是理解C语言演进和规范的权威资料。下面，我们将详细探讨这些版本中的...
MulanRevive#bounty#2021-01-17-重现木兰编程语言的基本 try……catch 语法1
07-25
木兰代码量 3307 -> 3349运行环境，实现与测试大部为木兰代码：582木兰测试用例，包括部分实用小程序（如井字棋）：2725 -> 2767 (报错信息
信奥中的数学学习路线图-2021-01-08（B）.pdf
09-05
"信奥中的数学学习路线图-2021-01-08（B）.pdf" 本文档提供了一个系统的数学学习路线图，涵盖了从小学到高中、大学甚至研究生阶段的数学学习内容。该路线图分为八个部分，分别是数论、组合数学、图论、矩阵、博弈论...
tampermonkey-backup-chrome-2021-11-27T01-27-17-766Z.zip
11-27
配置过的油猴插件
Screenshot_2021-12-13-19-12-28-441_com.sm.tiktoktool.jpg
12-14
Screenshot_2021-12-13-19-12-28-441_com.sm.tiktoktool.jpg
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 1003
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
最新！CSSCI（2023-2024）期刊目录公布！
2301_76900678的博客
07-19 239
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1310
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 146
网页隐藏版一行小说阅读器
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 697
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
相对定位语法：css+xpath基础语法使用-定位页面元素
m0_69119792的博客
07-16 734
介绍css和xpath，设置相对定位的基础使用
css 屏幕四周报警提示
AS_JOPO的专栏
07-16 318
屏幕四周出现律动的红色边框，产生报警提示的效果。
如何利用 CSS 动画和过渡效果来增强用户交互体验？
xy520521的博客
07-16 142
动态交互效果：通过结合CSS动画和JavaScript，可以实现动态的交互效果。通过定义关键帧，在不同的时间点改变元素的样式，可以创建各种复杂的动画效果。过渡延迟与持续时间：通过调整CSS过渡的延迟和持续时间，可以实现不同的交互效果。延迟可以用来创建一定的悬停效果，持续时间可以用来控制过渡的速度。渐变过渡：使用CSS过渡属性，比如transition，来实现元素的平滑过渡效果。淡入淡出效果：使用CSS的opacity属性来实现元素的淡入淡出效果。可以通过改变元素的透明度来实现平滑的淡入淡出过渡效果。
编织文字的魔法：探索WebKit的CSS文本效果
最新发布
2401_85341950的博客
07-19 223
WebKit，作为众多浏览器的核心引擎，支持一系列CSS文本效果，使开发者能够创造出引人注目的文本样式。本文将深入探讨WebKit对CSS文本效果的支持，并提供详细的解释和代码示例。请注意，本文提供了一个关于WebKit CSS文本效果的概述，包括代码示例和关键概念的解释。通过本文的介绍，你应该对WebKit的CSS文本效果有了基本的了解。通过本文，我们希望能够帮助开发者更好地利用WebKit的CSS文本效果，创造出更加丰富和吸引人的Web页面。通过媒体查询，可以为不同屏幕尺寸的设备应用不同的文本效果。
tailwindcss——vscode好用的插件
weixin_45705239的博客
07-19 370
tailwindcss极大的减少了css的书写，提升了开发效率。这个插件也特别好用。
CSS技巧专栏：一日一例 9 -纯CSS实现按钮边框依次填充特效
uu0216的博客
07-19 700
在这个按钮的样式表里没有写border，而是利用box-shadow内阴影属性弄模拟了边框。其实使用border也是可以实现同样效果的，只是要稍微调整一下before 和 after 层的位置。 接着再写用来响应鼠标悬停动画的边框，还是老办法，利用它的 before 和 after 两个伪元素。
创造视觉奇迹：WebKit的CSS内容生成特性解析
2401_85812026的博客
07-19 376
WebKit，作为众多流行浏览器的内核，如Safari，支持丰富的CSS内容生成特性，使得开发者能够以更简洁、更灵活的方式创建和管理网页内容。请注意，本文提供了一个关于WebKit CSS内容生成特性的概述，包括代码示例和关键概念的解释。CSS内容生成特性允许开发者通过CSS而非HTML来插入内容，这在动态内容生成、样式化和数据展示等方面提供了极大的便利。通过本文，我们希望能够帮助开发者更好地利用WebKit的CSS内容生成特性，构建更加丰富和动态的Web应用。伪元素，插入生成的内容。
如何使用css实现手风琴效果
zayyo的博客
07-15 238
我们希望实现的效果是当鼠标移上时，出现一个类似手风琴展开的效果，折叠时，类似手风琴收缩的效果，类似于“accordion-body”的高度平滑的从0过度到100。最近在公司做需求遇到一个很有趣很常见的需求也是实现一个类似手风琴的css效果，当鼠标移动上时，展开，扩展高度，当鼠标移开手，收缩，高度为0。虽然这样有效，但其实这不是一个特别好的方法：因为很多时候内容的具体高度是不固定的。定义了一个固定值，当实际内容的高度比容器的高度高时就会产生溢出。：这样，我们的网格项目就能从 0 过渡到它的 “内容” 高度。
CSS3 transform rotate（旋转）锯齿/元素抖动模糊的解决办法
m0_56164131的博客
07-16 278
这些方法可能会因浏览器和具体情况而异，因此可能需要进行一些实验以找到最适合您项目的解决方案。如果元素包含背景图像，可以尝试使用高分辨率图像，并在旋转时使用。
已知data = [ ('2021-01-01 08:00', 15), ('2021-01-01 12:00', 18), ('2021-01-01 16:00', 20), ('2021-01-02 08:00', 14), ('2021-01-02 12:00', 17), ('2021-01-02 16:00', 19) ]请写出代码对data实现指数平滑
07-12
指数平滑是一种常用的时间序列预测方法，可以对数据进行平滑处理，以便更好地捕捉趋势和模式。在Python中，可以使用pandas库来实现指数平滑。下面是一个示例代码，演示如何对给定的data进行指数平滑： ```python import pandas as pd # 将data转换为DataFrame，并将时间戳列设置为索引 df = pd.DataFrame(data, columns=['时间戳', '数据']) df['时间戳'] = pd.to_datetime(df['时间戳']) df.set_index('时间戳', inplace=True) # 对数据进行指数平滑 alpha = 0.5 # 平滑系数，可以根据需求调整 df['指数平滑'] = df['数据'].ewm(alpha=alpha, adjust=False).mean() print(df) ``` 运行以上代码，将得到如下输出： ``` 数据 指数平滑 时间戳 2021-01-01 08:00:00 15 15.000000 2021-01-01 12:00:00 18 16.500000 2021-01-01 16:00:00 20 18.250000 2021-01-02 08:00:00 14 16.125000 2021-01-02 12:00:00 17 16.562500 2021-01-02 16:00:00 19 17.781250 ``` 在上述代码中，我们使用`pd.DataFrame`将data转换为DataFrame，并将时间戳列设置为索引。然后，使用`ewm`函数对数据列进行指数平滑，其中`alpha`参数表示平滑系数，可以根据需求进行调整。最后，将指数平滑结果存储在新的列`指数平滑`中，并打印输出整个DataFrame。 请注意，以上代码仅为示例，实际应用中可能需要根据具体需求进行调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值