关注
分享
北极光之夜。
生活下去,错误下去,堕落下去,为胜利而欢呼,从生命中重新创造生命!
展开
-
发光立方体效果 html+css
css简单创意特效~原创 2023-03-17 17:26:04 · 4416 阅读 · 1 评论 -
3D立体相册不过是冷锋蓝plus版 html+css
转念一想，好像很久很久没出css特效的文章了，特别是工作之后，更少了。偶然翻看电脑内存的时候，发现这个自己1年多以前写的特效，甚美，又勾起我一段尘封的回忆。。。我原来也发过3D立体相册特效的，对于基础理念可以看那篇，看完再回来看这篇plus版。实现并不难，如下（完整源码在最后）。......原创 2022-08-29 14:51:22 · 831 阅读 · 5 评论 -
超简单的魔幻霓虹灯文字特效 html+css
今天继续分享简单但有趣的CSS创意特效~这个效果很简单看一分钟就明白了~初学前端的小伙伴们拿来练手是很不错的~原创 2021-05-26 23:52:56 · 2309 阅读 · 14 评论 -
6分钟实现CSS炫光倒影按钮 html+css
话不多，先看效果： 回归老本行，继续分享简单有趣的CSS创意特效，放松放松心情~实现过程（完整源码在最后）：1 老样子，定义基本样式： *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'fangsong'; } body{ height: 100vh;原创 2021-05-26 01:18:53 · 1691 阅读 · 7 评论 -
CSS轮播图详解 html+css
效果（源码在最后）：这个CSS轮播图效果是比较常见的了，b站一搜就有很多，不过视频对一些关键步骤一敲而过，不好理解，既然如此，我们也做一个~ 并不难的，详解如下：实现（可一步一步实现）：1. 老样子定义基本全局样式，复制即可： *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 1原创 2021-05-16 21:43:33 · 7424 阅读 · 8 评论 -
3D分层图像悬停效果 html+css
一.（⊙-⊙）先看效果（完整源码在底部）：二. (￣◇￣)实现过程步骤：0.基本css样式（复制即可）* ： *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content:原创 2021-04-19 23:03:22 · 1728 阅读 · 8 评论 -
音波加载效果 html+css
先看效果╰(●◡●)╮（完整代码在底部）：这个是比较常见的一个简约效果，拿下~实现（可一步一步实现）：0.基本css样式（复制即可）* ：*{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justif原创 2021-04-13 23:59:36 · 1847 阅读 · 15 评论 -
环绕倒影加载特效 html+css
先看效果（完整代码在底部）：实现（可一步一步边看效果边编写）：※先初始化（直接复制）： *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; al原创 2021-04-09 00:18:01 · 3324 阅读 · 6 评论 -
血轮眼轮回眼特效 html+css
效果（完整代码在底部）：实现并不难，都是重复的代码比较多。实现（可跟着一步一步写）：1. 先定义基本标签：<!-- 血轮眼 --> <div class="zuo"> <!-- 眼睛最中间那个黑点 --> <div class="zuoZong"> <!-- 三勾玉所在的圈 --> <div class="zuoYu">原创 2021-03-27 12:54:12 · 14846 阅读 · 85 评论 -
蛇边界动画按钮 html+css
效果：制作过程：1. 定义标签，a标签是按钮，4个span就是按钮周围那四条行动的蓝边。：<a href="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343" class="night" target="blank"> <span></span> <span></span> <span></span>原创 2021-03-22 21:43:24 · 1468 阅读 · 4 评论 -
充电水波特效 html+css
效果（源码在最后）：这个效果跟水波加载动画 html+css是异曲同工之妙的。效果不难实现，但是这个‘偷天换日’的用法是值得学习的。实现：1. 定义标签，.container是底层盒子也就是电池外形，.water是其中的电量多少，.shadow是背后的阴影： <div class="container"> <div class="water"></div> <div class="shadow"></div>原创 2021-03-17 22:46:10 · 2090 阅读 · 17 评论 -
文字折叠特效 html+css
效果：实现：1. 定义标签： <h1>aurora</h1>2. 设置文字基本样式：h1{ text-transform: uppercase; letter-spacing: 3px; font-size: 15vw; transform: rotate(-10deg) skew(30deg); position: relative;原创 2021-03-07 00:41:10 · 3892 阅读 · 13 评论 -
小彩灯特效 html+css
效果：实现：1. 添加标签，可以看出一个 li 就是一个灯泡，可以多点，保证设置大小后整体能大过浏览器默认可视区宽度。 <ul class="container"> <li></li> <li></li> <li></li> <li></li> <li></li> <l原创 2021-03-06 16:15:51 · 3673 阅读 · 13 评论 -
简单实现瀑布流布局 html+css
效果：前言：这个效果几行 css 代码就能搞定，但是其有个缺点是图顺序是从上到下排列再从左到右。没能实现从左到右再从上到下顺序排列。这样不利于最新图片优先显示的原则。所以其只适用在一些简单场景，复杂的瀑布流布局还是得用 js 实现。实现：1. 定义标签，main是底层盒子，.item里放图片，这里用了12张图：<main> <div class="item"> <img src="https://picsum.photos/3原创 2021-02-25 18:08:43 · 2182 阅读 · 4 评论 -
炫彩流光文字 html+css
效果：实现：1. 定义标签，各自作用看后面解析： <main> <h1 class="txt">live on.</h1> <h1 class="txt2"></h1> <h1 class="txt3"></h1></main> 2. 给底层盒子 main 与 .txt 定义基本样式： main{ position: relative;原创 2021-02-17 22:22:16 · 13028 阅读 · 24 评论 -
三色边框旋转加载特效 html+css
效果：实现：1. 定义标签，.box是底层盒子，.circle里的3个span元素就是效果图里的3条颜色边框。h5就是文字。： <div class="box"> <div class="circle"> <span></span> <span></span> <span></span>原创 2021-02-12 00:06:58 · 2146 阅读 · 1 评论 -
文字闪烁特效 html+css
上效果先：先言：看过我文章可以知道，这东西似曾相识~ ╭(●｀∀´●)╯确实，这个和我另一篇文章“文字点闪特效”原理是差不多的实现：1.定义html标签：<h1> <span>佛</span> <span>主</span> <span>保</span> <span>佑</span> <span>，原创 2021-01-01 22:56:16 · 9789 阅读 · 12 评论 -
windows加载动画
先看效果：Windows加载动画应该是这样吧，不是也没事，懂原理之后这个运动曲线可以任意自己设置的~实现：1.定义标签： <div class="yongqi"> <div class="quan"> <div class="dian"></div> <div class="dian"></div> <div class="dian"></d原创 2020-12-29 23:08:21 · 2047 阅读 · 9 评论 -
文字点闪特效 html+css
上效果先：先言：这是在网上看到的效果，觉得挺有趣，所以我也弄了一个然后写篇文章记录。实现：1.定义html标签： <h1> <span>北</span> <span>极</span> <span>光</span> <span>之</span> <span>夜</span> <原创 2020-12-28 01:05:19 · 7045 阅读 · 16 评论 -
水波加载动画 html+css
先看效果：原理：这个效果在网上挺常见的，所以我也写篇文章记录记录。原理是比较简单的，大致上就是有一个背景色为蓝色的圆形；然后圆形上面有一个或两个有弧度的白色方形盒子在旋转，通过白色遮住蓝色形成像是波浪的视差。实现：1.定义两盒子，quan就是那个圆形，shui就是圆里蓝色的背景； <div class="quan"> <div class="shui"></div> </div>2.基本样式，这样大致上就是得到一个蓝色背景原创 2020-12-26 01:44:33 · 17634 阅读 · 37 评论 -
图片扫描仪特效 html+css
效果：这样，有抖动的：无抖动的：实现：1.定义一个盒子：<body> <div class="tu"></div></body>2.基本样式，长宽背景图等等~ .tu{ width: 500px; height: 300px; background-image: url(8.jpg); background-size: 100% aut原创 2020-12-23 01:05:27 · 4300 阅读 · 11 评论 -
2.5D立体字体 html+css
效果：看似2.5d立体，<(￣︶￣)> 其实是阴影的叠加~写完后你放大再放大看就一目了然了。实现：1.定义标签放字体： <div> <p>LIFE OF PI</p> </div>2.css实现效果： div{ font-size: 8em; font-weight: bold; color: rgb(255, 255, 255);原创 2020-12-21 22:29:11 · 2298 阅读 · 1 评论 -
百叶窗效果 html+css
效果：实现：1.定义父盒子，放入5张图片： <ul> <li><img src="1.jpg" alt=""><div>Night</div></li> <li><img src="2.jpg" alt=""><div>Night</div></li> <li><img src="4.jpg" alt="原创 2020-12-20 00:37:22 · 6764 阅读 · 11 评论 -
书本翻页效果 html+css
效果：有些细节没处理好 (“▔□▔)实现：定义标签，shu是书本，feng是封面，wen是文字内容。 <div class="shu"> <div class="feng"></div> <div class="wen"> <h3 style="padding-top: 50px;padding-left: 40px;">Life of Pi</h3>原创 2020-12-19 00:32:28 · 18053 阅读 · 29 评论 -
文字波浪特效 html+css
先看效果：clip-path描好效果会更好原理：就是两段文本重叠一起，底层的没颜色，上面层的有颜色，然后通过动画再通过clip-path属性截取上层的部分显示~实现：1.定义两个相同的文本：<body> <h1 class="diyi">Ice~Land</h1> <h1 class="dier">Ice~Land</h1></body>2.给他们样式： h1{原创 2020-12-16 21:23:09 · 1921 阅读 · 1 评论 -
文字聚光灯特效 html+css
先不说啥，上效果：前提：要用到一个clip-path属性，可以创建一个只有元素的部分区域可以显示的剪切区域。但是，这属性 兼容性不太好 ，还没有得到所有主流浏览器广泛支持（比如Firefox和IE）。实现：1.定义一盒标签放文字：<body> <h1>北极光之夜</h1></body>2.给文本设置颜色和大小： h1{ position: relative; color: #6b6868;原创 2020-12-14 15:35:53 · 2705 阅读 · 7 评论 -
炫彩流光按钮 html+css
话不多，先上效果：简介：用基础css做一个有一点炫酷的流光按钮，不止按钮，只要是盒子就行。具体步骤：1.先定义一个盒子当做按钮，如我就用a标签：<body> <a href="#" class="guang">button</a></body>2.先给a标签写基础的样式，比如长宽等等…： .guang{ position: relative; display: inline-block;原创 2020-12-14 13:40:24 · 12358 阅读 · 32 评论 -
3D立体相册 html+css
前言用css的transform属性做一个3D相册~~~值translate表示偏移；scale表示缩放；rotate就是转动。一、先看效果二、实现步骤1.我们知道一个正方体有6个面，所以定义一个父亲元素然后定义6个子元素作为6个面。每个面放一张图片。里面q1表示前面，h2表示后面，以此类推，就是首拼音。<div class="baba"> <div class="q1"> <img src="3d/1q.png"> </div&原创 2020-12-11 11:54:21 · 7479 阅读 · 25 评论 -
DNA旋转特效 html+css
效果：实现：1. 首先讲css的var()函数 * ；定义：随着sass，less预编译的流行，css也随即推出了变量定义var函数。var()函数，就如同sass和less等预编译软件一样，可以定义变量并且进行对应的使用。使用：var(custom-property-name, value)；custom-property-name 必需。自定义属性的名称，必需以 - - 开头。value 可选。备用值，在属性不存在的时候使用。例子：定义了- -size ：20pxbody {原创 2021-02-07 23:27:33 · 3104 阅读 · 12 评论 -
气泡浮动背景特效 html+css
先看效果：实现：添加标签底层盒子，再直接暴力添加10个气泡标签： <div class="kuang"> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div>原创 2021-02-04 17:23:52 · 11462 阅读 · 14 评论 -
简约计算器效果 html+css
效果：实现：定义标签, .result是显示计算结果框，.anniu里放数字和运算符按钮，.zero是清除按钮，它们都在表单域 form里：<form class="kuang" name="kuang" > <input type="text" class="result" name="result"> <div class="anniu"> <span onclick="kuang.resul原创 2021-02-01 17:52:54 · 1693 阅读 · 1 评论 -
赛博朋克风格按钮 html+css
先看效果：前言：这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯css），下面是详细过程。最后面有完整代码。实现：1. 首先定义一个div标签作为按钮，类名为 .anniu： <div class="anniu">Aurora Borealis night</div>2. .anniu 的css基本样式，长宽，字体大小等：.anniu,.anniu::after{ font-family: 'Do Hyeon'原创 2021-01-29 00:22:55 · 9492 阅读 · 10 评论 -
充电水滴融合特效 html+css
先看效果：前言：这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯css）实现：定义标签，有三个水滴盒子，一个圆圈盒子显示数字，一个最底层盒子： <div class="kuang"> <div class="droplet"></div> <div class="droplet"></div> <div class="droplet"></div&原创 2021-01-24 19:02:07 · 5296 阅读 · 24 评论 -
响应式卡片悬停效果 html+css
话不多，看效果先：卡片悬停，响应式卡片，简约效果。实现：1. 定义标签，.kapian为最底层盒子，然后两个子盒子一个放图片，一个放文本： <div class="kapian"> <div class="tu"> <img src="3.2.png"> </div> <div class="wenben"> <h2原创 2021-01-21 23:45:22 · 7258 阅读 · 12 评论 -
给网页添加动态视频背景 html+css
前言：普通图片：给网页添加背景图片 html+css动态：就是换成MP4格式作为网页背景。实现：定义html的video标签： <video src="xiamu.mp4" class="bjimg" autoplay loop muted></video>在url里写入自己视频地址就好~添加css样式就完成了： .bjimg { position: fixed; top: 0; left: 0; wi原创 2021-01-21 20:57:19 · 29904 阅读 · 32 评论