一、鼠标滑入文字逐个渐入效果图： 鼠标滑入文字逐个渐入
鼠标滑入按钮时，按钮中原本的文字从下方滑走，同时在原位置上，按钮文字单个挨个浮现。（原本文字和后面单个浮现的文本内容可不一致，可根据需要进行调整）。实现思路：用div模拟button按钮，并将按钮文本单个单个的放在其子元素span中，用于后面的单个显示。而鼠标没有触发时的静止状态文本则由div按钮的伪类::before来承担。在静态
转载
2024-04-19 14:44:34
203阅读
1.CSS技术介绍 CSS是用于增强控制网页样式并允许将样式信息与网页信息分离的一种标志性语言. 选择器:浏览器根据"选择器"决定受CSS样式影响的HTML元素(标签) 属性:是你要改变的样式名,并且每个属性都有一个值,属性和值用冒号分开,由花括号包围,这样就组成了一个完整的样式声明,例如:p{color:blue}多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开,然后最后一条声明最后
转载
2024-09-23 15:33:36
55阅读
一、效过图展示： 已经是比较久之前学习的文字效果了。但是还是很实用很有趣的。利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果，因此可以替换掉之前使用过的一些繁琐的图片。到目前为止Safari、FireFox、Chrome和Opera等主流浏览器都支持该功能。text-shadow属性可以给页面上的文字添加阴影效果，基本语法如下:text-shadow
转载
2024-04-12 22:15:18
366阅读
一个很炫酷的发光按钮特效，鼠标悬停时，按钮呈现旋转动画发光的效果，这样的动画效果可以显著提升用户体验和视觉吸引力。本文将解析如何实现这个按钮特效
原创
精选
2024-08-19 09:35:08
393阅读
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>02</title> box-sizing: b...
原创
2023-02-14 09:01:29
445阅读
cssbody { background-color: #262626}.demo { padding: 2em 0; transform: translate3d(0, 0, 0);}.navbar { width: 150px; height: 150px; line-height: 150px;
原创
2022-03-01 10:32:00
946阅读
如图所示这是一个纯本文时钟效果，和传统的时钟不一样，没有表盘，也没有完整到每一分钟的数字表示当前时刻。
在这个时钟中，当前时间通过文本显示，显示的文本时间误差为+/- 4分钟，以明亮的颜色突出显示当前时间，而其余字母则较暗。
实际上这是一个实现很复杂的时钟，因为只使用CSS实现，JS只需要获取初始化的时间，如果页面是使用服务端选择则不需要这个初始化的JS。
以下是本次实现的主要几点：
整体文本
原创
2023-11-21 08:33:00
196阅读
cssbody { background-color: #262626}.demo { padding: 2em 0; transform: translate3d(0, 0, 0);}.navbar { width: 150px; height: 150px; line-height: 150px; border-radius: 50%; background: #fff; margin: 70px auto; p.
原创
2021-08-07 09:54:17
1011阅读
http://www.haojii.com/2010/01/cool-css-button-1/
转载
2022-10-23 19:27:23
260阅读
点赞
博客园在别的 博主看到一个样式, 里面有一段这样的 正方体旋转的 动态图 吸引了我. 找博主要了代码, 贴出来 与大家共享. 鼠标放上去会展开 一大一小两个正方体, 鼠标悬浮上去, 外面的正方体会展开 . 上代码 : 点我下载
原创
2022-01-08 17:04:20
325阅读
# 如何实现 HTML5 和 CSS 酷炫图标：新手指南
## 引言
在前端开发中，使用酷炫的图标能够提升网站的视觉效果和用户体验。本文将带您逐步了解如何使用 HTML5 和 CSS 创建酷炫的图标。通过这篇文章，您将掌握从理念到实现的整个流程。
## 流程概览
以下是实现酷炫图标的步骤，表格清晰地展示了每个阶段：
| 步骤 | 描述
原创
2024-09-25 03:31:56
130阅读
1.evanyou 效果-彩带的实现，效果如下注：这个主要用的是 Canvas 画布实现的，点击背景绘制新的图形，代码如下： /*Html代码:*/
<canvas id="evanyou" width="1920" height="934"></canvas>
/*CSS代码:*/
<style type="text/css">
#ev
转载
2024-01-26 09:05:21
204阅读
源起公司项目用到一个进度条动画，需要自己绘制从0加载到100的情况，而且效果需要很酷炫。最后是采用了lottie动画+一部分自定义View来实现，拆分了出来。过后，觉得其实自己实现这样的一个效果也不难，便开始了以下的尝试。先看下效果分析1.分析下：最外层是一个由小圆点顺时针旋转的圆、第二层是直接一个圆、第三层有两层：内层是由矩形逆时针旋转的圆，外层是一个圆环、最后是文字展示。2.实现思路是这样：分
转载
2023-06-27 13:42:22
551阅读
PPT动画应用的好，可以做出电影级动态特效，islide将通过分享粒子动画制作教程，教会大家打造炫酷的PPT开场动画。 islidePPT素材 下面直接进入制作教程：第一步：插入一张星空背景图并调整图片大小，使其充满整个幻灯片页面;第二步：选中该图片，点击【动画】工具栏，找到并点击【放大/缩小】动画;第三步：在动画工具栏右侧，将动画参数设置为开始【与上一动画同时】，持续时间为15秒;第四步：点
转载
2023-09-05 10:25:45
253阅读
在HTML中大家都知道有很多字体效果吧，来我们今天来看这10种字体的效果HTML+CSS+JQuery你好！这是我写的第一篇博客，结合了之前所学的知识做了一个好玩又有趣的字体特效结合所学我们对HTML+CSS+JQuery进行了一个巩固，使用CSS和JQuery实现了平铺，旋转，浮现，坠落的一种效果，接下来看下步骤： 第一步：我们需要先把主页写好，主页是什么呢?主页就是你的HTML页面，每个p标签
转载
2023-07-10 20:33:36
416阅读
Android5.0+推出的新控件感觉特别酷，最近想模仿大神做个看图App出来，所以先把这些新控件用熟悉了。
新控件的介绍、使用等等网上相应的文章已经特别多了，题主也没那能力去写篇详解出来，本篇随笔记录的主要是题主学习这些新控件时遇见的一些困惑以及在搞了半天后的一丝理解，或许也有新手也会碰到跟我一样的困惑，相互学习哈，如果有哪个地方理解错了，还望告知。效果首先看下效果，本篇也就是只记录以下两张动图
转载
2023-09-26 17:49:15
197阅读
