这132个特效，是我历时10个多月在油管一个一个跟着敲出来的，为了加强记忆，每个练习，我都录制了视频，在这里分享出来给大家。大家可能又会调侃了，你是工作不饱和吧，有时间做这些。其实，我目前工作还是挺饱和的，都是挤出来的。我们是9点上班，我基本7点半就到公司自学了，这样我就有一个半小时的时间来做这些了。
2025年06月20日
这132个特效，是我历时10个多月在油管一个一个跟着敲出来的，为了加强记忆，每个练习，我都录制了视频，在这里分享出来给大家。大家可能又会调侃了，你是工作不饱和吧，有时间做这些。其实，我目前工作还是挺饱和的，都是挤出来的。我们是9点上班，我基本7点半就到公司自学了，这样我就有一个半小时的时间来做这些了。
2025年06月20日
基于css3新属性transform，实现3d立方体的旋转
通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示
实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性
从而通过改变transform：rotate属性值来达到3d立方体旋转的效果
HTML代码块：
2025年06月20日
CSS简介
CSS (Cascading Style Sheets) 层叠样式表。
CSS能做些什么？
1.使用CSS样式可以有效地对页面进行布局。
2.使用CSS样式可以对页面字体、颜色、背景和其他效果实现精确描述，同时对它们的修改和控制变得更加快捷。
3.可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的代码，那么整个站点的所有页面都会随之发生变动。
4.CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等
2025年06月20日
不论是设计还前端开发，设计和制作个特效按钮，对于他们来说，是习以为常的事情，下面是一组使用CSS3制作的炫酷鼠标滑过按钮动画特效。这30种鼠标滑过按钮的动画特效分别使用CSS3 transition和transform属性来制作按钮边框，文本动画以及流光动画效果，各种效果都非常有创意。
演示地址：
http://www.htmleaf.com/Demo/201510282718.html
使用方法
2025年06月20日
<html>
<head>
<meta charset="UTF-8">
<title>用 css 实现字符串截断</title>
<style>
div {
width: 300px;
overflow: hidden;
/*规定当内容溢出元素框时发生的事情*/
white-space: nowrap;
/*设置如何处理元素内的空白。规定在文本中不进行换行*/
text-overflow: ellipsis;
/*规定当文本溢出包含元素时发生的事情*/
}
div:hover{
cursor:pointer;
}
div:hover:before{
content:attr(title);
background:#d9444a;
color:#fff;
padding:.8em 1em;
position:absolute;
left:100%;
top:-70%;
margin-left:14px;
white-spack:pre;
}
div:hover:after{
content:" ";
position:absolute;
left:80%;
width:0;
height:0;
border-right:8px solid #d9444a;
border-top:8px solid transpatrnt;
border-bottom:8px solid transparent;
}
</style>
</head>
<body>
<div title="轻轻松松制作div+css截取字符段在规定长度，超出部分用...代替！">轻轻松松制作div+css截取字符段在规定长度，超出部分用...代替！</div>
</body>
</html>
2025年06月20日
效果图：
html：
<!--进度条-->
<div class="progress-wrap">
<div class="progress-inner">
<div class="progress-nums"></div>
</div>
<span>60%</span>
</div>2025年06月20日
https://juejin.cn/post/7159105009232117774
2025年06月20日
CSS伪类选择器是前端开发中不可或缺的强大工具，它们允许我们根据元素的状态、位置或用户行为动态地应用样式。本文将全面介绍常用的伪类选择器，并通过代码示例展示其实际应用场景。