Web前端之家-无忧前端交流，专注Web前端开发，了解最新前端开发动态

如何使用 CSS3 盒子阴影复制元素？

2022年10月28日

今天我们分享内容：如何使用CSS3盒子阴影复制元素？其实这个问题不难，只要你掌握了CSS3的阴影功能，还是比较得心应手的，我们一起先看个DEMO。<!DOCTYPE html> <html> ...

CSS3 2D转换：分享常用的5种【translate()、rotate()、scale()、skew()、matrix()】实现方式

2021年12月24日

在平时的项目中，经常会对元素进行CSS2D转换，从而达到预期的效果。举一个很简单的例子：一个向右的箭头，我们在项目中很多地方会用到，并且箭头的方向或者大小可能不同，如果每个箭头都去弄一个图或者写一套样式，就很麻烦了。用上了2D转换后，就方便很多了，一套样式，只要进行相应的转换就轻松实现了。接下来让...

CSS3动画应用：分享一个用纯CSS打造的文本打字特效

2021年10月20日

今天我们分享一个小应用：用纯CSS打造的文本打字特效。不需要JS去控制，通过CSS3动画去控制，实现跟我们敲代码那样的酷炫效果，废话不多说，走起吧。打字机效果的工作方式：打字机动画将通过使用CSS steps()函数逐步将宽度从0更改为100%来显示我们的文本元素。闪烁动画将使“...

如何使用CSS3混合模式在图像上显示酷炫“Web前端之家”文字

2021年08月19日

关于图片上显示文字的方式，相信大家已经比较是熟悉了，有时候我们需要一些特殊的效果去提升用户体验。今天给大家分享一篇关于“图片上的文字特效”的文章。走起吧！！！！先来看张部分截图效果，我们以“Web前端之家”文字为例子咯：看到图片后，有没有感到惊叹，文字还可以这样做特效？没错，一切只需要用css图片属...

CSS3绘制图形应用：如何使用 CSS3 创建 Gmail 徽标

2021年08月19日

CSS3绘制图形应用：如何使用CSS3创建Gmail徽标。上代码吧。<!DOCTYPE HTML> <html> <head> &nb...

HTML5和CSS3应用：绘制小水缸，实现动画效果

2021年08月10日

今天继续分享一个用HTML5和CSS3实现的应用：绘制小水缸，实现动画效果。之前也分享过一些了，大家可以去了解。OK，我们往下走吧，先看下效果图：一口可爱的小水缸，带着笑脸，冒着泡。首先我们需要绘制图形。HTML<label for="toggle">T...

CSS3应用：画个东京奥运会五环图形效果

2021年07月29日

2020东京奥运会正在如火如荼进行着，希望中国队再接再厉力压日本队，稳住前二吧。今天给大家分享的是奥运会的5环图形，我们用如何用CSS3去花呢？先来看下最终效果图：首先我们规划HTML：<div class="container"> ...

CSS3动画：通过Animation实现简单的手指点击动画

2021年07月26日

好久没分享CSS3动画的知识点了，近期都在忙于后台前端开发项目，难道今天有点时间，分享下关于CSS3动画知识点，今天我们看一个小TIPS：通过Animation实现简单的手指点击动画。鼠标放上去会有个特效。HTML：<div class="wrapper">...

HTML5：CSS3画一个可爱动漫宠物

2021年07月12日

好久没发布关于HTML5和CSS3动画的文章了，近期一直折腾vue和react等项目。闲余之时，突然想分享一个HTML5应用：CSS3画一个可爱动漫宠物。先看下效果图：HTML代码：<label for="toggle">Toggle body&n...

CSS3动画：宠物躺着招手动画特效

2021年04月30日

今天来分享些CSS3动画的应用：宠物躺着招手动画特效。上次我也分享过类似的动画效果，没看过的可以先看看。CSS3动画：圆形脉冲动画先下我们今天要分享的宠物动画预览图：原理解析对于宠物动画，第一步我们需要先用CSS3画宠物的形状和涂色。这个是一个比较复杂的活，我们需要把宠物分很多小块去实现。比如：&l...

Web前端之家推荐：功能最全的CSS3渐变生成器

2021年04月19日

好久没弄前端工具了，上次弄前端工具还是很多个月前，估计都快遗忘了，回顾下：CSS三角形生成工具不知道大家是否用过此工具呢？今天我跟大家继续分享一款实用的前端工具：功能最全的CSS3渐变生成器。首先我们来看一张界面图：看到效果图后，相信大家就知道这个工具的大概用途了，其实就是用来根据PS里的渐变来生成...

CSS3动画：圆形脉冲动画

2021年02月08日

在平时项目中，脉冲动画经常会被用到，比如地图上标记某个地点，或者在页面上突显某个元素等等，都会用上，今天分享下一个简单的圆形脉冲动画的DEMO。这是一个涉及较少的动画，但仅显示了一些CSS即可完成的工作。首先，我们需要绕圈。首先添加一些HTML：<div class="pu...

CSS3酷炫动画：手把手教您使用纯CSS制作蜡烛动画

2021年02月07日

通过此动画，我们将使用一些基本的CSS绘图。然后，我们将使用CSS创建触发事件。最后，我们将模拟火焰（尽我们所能！）。注意：您将在下面看到我使用绝对定位和变换来定位HTML元素，这是使用CSS绘制时的好技巧。下面是我们要使用CSS绘制的内容：如果愿意，您可以跟着我。我已经建立了一个基础笔，它建立了一...

纯CSS3绘制游戏手柄并且涂色酷炫效果

2021年02月06日

今天继续玩玩CSS3的效果，默认和点击分别实现颜色变化功能。走起吧，直击分享主题：纯CSS3绘制游戏手柄并且涂色酷炫效果。有兴趣的朋友可以进来看看哟，先上个效果图再说咯。先用CSS绘制出手柄的设计图，然后在实现功能。默认和点击分...

分享一个纯CSS3实现的绘制动画效果：可爱宠物

2021年02月05日

今天在国外一个网站看到一个不错的CSS效果，一个纯CSS3实现的绘制动画效果，想弄出来这个效果，需要很大的耐心哟。先来看下效果图，如下：废话不多说，直接上代码。<!DOCTYPEhtml><htmllang=&qu...

CSS3动画：模拟canvas酷炫特效

2020年11月13日

CSS3动画：模拟canvas酷炫特效。<!DOCTYPE html><html lang="en"><head> <meta charset=&qu...

CSS3:处理文字溢出省略号代替的应用

2020年11月02日

我们处理处理数据的时候，经常会出现后台返回数据文字太多，导致排版乱了，有时候后台会直接改，但是有时候还是要前端去处理好些。如何弄呢？我们直接用text-overflow属性就可以了。基本语法text-overflow的使用需配合hight,over-flow:hidden;white-space:n...

处理CSS3 transform过渡抖动兼容问题

2020年10月28日

处理css3transform过渡抖动兼容问题。transform:scale();缩放在IE浏览器下会有抖动transform缩放在IE浏览器下会有抖动可以在缩放的同时添加一个旋转如：transform: scale(1.2);换成：transform: scale(1....

分享按钮点击CSS3特效：酷炫发散效果

2020年09月01日

按钮点击CSS3特效：鼠标点击按钮酷炫发散效果。这个效果很实用的，大家可以看下DEMO。效果图：DEMO代码走一波：<!DOCTYPE html><html lang="en"><head> ...

ie-CSS3.htc在html5中的使用方法

2020年07月20日

学习下ie-css3.htc在html5中的使用方法。css带来的便利是很容易感受的到的，但恶心的是它在ie下的不兼容，所以某位牛人现身写了个ie-css3.htc，允许你在ie下去使用css3的部分东西。ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件，不只是box-s...

CSS3 @media不起作用是什么原因？怎么解决？

2020年06月01日

css3@media不起作用是什么原因？怎么解决？不要慌呢，慢慢分析。首先确认是不是css本身的问题，而不是媒体查询没有生效。例如：div{display:flex;}/*那么div所有的display效果都将无法生效*/第一种错误：格式书写错误,and后面必须有空格例如下面代码：@media&n...

分享下CSS3里的2D变形方法

2020年05月21日

早安，各位，又是炎热的一天，深圳的天气真是变化无常，静下心来分享下css3里的2D变形方法。转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。移动translate(x,y...

CSS3里的linear-gradient()函数

2020年05月09日

linear-gradient()函数用于创建一个线性渐变的"图像"。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐...

Web前端开发：探讨CSS3中元素位移、旋转、倾斜、缩放等方式

2020年05月08日

在前端开发项目中经常会遇到用CSS3实现各种旋转等方式，然后去实现一些动画效果，所以这方面的知识点还是得熟练掌握。众所周知，转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。接...

如何使用js判断浏览器是否支持CSS3属性？

2020年04月21日

如何使用js判断浏览器是否支持css3属性？使用js脚本判断浏览器是否支持某一个CSS3属性：/** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return...

HTML5+CSS3:模拟太阳系行星运转动画

2020年02月09日

用html5+css模拟太阳系行星运转动画，废话不多说直接上DEMO，如下：<html><head> <style> &nb...

这些CSS3动画库，您是否都了解和应用过？

2019年12月25日

说到CSS3动画，现在项目中应用非常广，因为它能拉近跟用户的距离和增强粘合度等，使得我们的产品更加多元化；因此，作为一名Web前端技术人员，需要更多的去学习动画相关的知识。前端网页设计在过去十年中经历了一场革命。在上世纪90年代后期，我们大多数人仍在设计静态杂志版式。如今，我们正在构建具有数以千计的...

如何用JS去判断是否支持CSS3

2019年12月19日

css3的出现让浏览器的表现更加的丰富多彩，表现冲击最大的就是动画了，在日常书写动画的时候，很有必要去事先判断浏览器是否支持，尤其是在写CSS3动画库的时候。比如transition的animation-play-state，就只有部分浏览器支持。检测方法下面的方法可以使用脚本判断浏...

简单实例：用CSS3画椭圆

2019年11月12日

现在随着css3的发展，很多形状可以通过css3画出，本篇文章给大家带来的内容是关于如何快速简单的使用css3画出各种各样的椭圆。使用css3画出各种各样的椭圆的原理：我们需要使用css3中的border-radius属性，修改width值为200px，然后把border-radius改成100px...

CSS3动画里的@keyframe的定义和应用

2019年09月25日

@keyframes规则用于指定动画规则，定义一个CSS动画的一个周期的行为；可通过沿动画序列建立关键帧来指定动画序列循环期间的中间步骤。动画是使用可变的CSS样式创建的；在动画期间，CSS属性可以多次更改。定义动画，必须从@keyframes规则开始。@keyframe规则由关键字“@keyfra...

CSS3绘画可爱的小猫咪！！！

2019年09月22日

CSS3绘画可爱的小猫咪，鼠标滑动上去，可以有笑眯眯的效果哦<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">&...

CSS3模拟行走中的大象

2019年09月22日

CSS3模拟行走中的大象，一起来看下源码吧。<!doctype html><html lang="zh"><head><meta charset="UTF-8">&l...

用CSS3&JS做一个网站预览统计图的效果

2019年04月04日

用CSS3&JS做一个网站预览统计图的效果，默认是简单的数字，滑动上去出现详细数据列表。默认效果：滑动上去【4个滑动都可以】：来看下DEMO代码：<!DOCTYPE html><html><head><meta cha...

CSS3：给文字来点特效吧

2019年04月04日

用CSS3给文字来点特效，这个会经常用到，收藏了一些效果，分享给大家，来学习吧！如图：DEMO代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8">...

CSS3之3D魔方酷炫效果：鼠标随意拖拽

2019年04月02日

CSS3之3D魔方酷炫效果，鼠标随意拖拽，也可以点击。主要用的CSS3特效和JS来处理，废话不多说，先看下效果图：直接上DEMO代码：<!DOCTYPE html><html lang="en"><head>&l...

CSS3实现加载中(loading)等待按钮状态

2019年03月06日

试着用CSS3实现加载中(loading)等待按钮状态，一起来看下源码，学习哦。<!DOCTYPE html><html><head> <meta charset="...

如何用CSS3给文字添加渐变

2019年02月11日

大家都知道给一个box添加渐变背景很简单，但是如何用CSS3给文字添加渐变呢，可能有些童鞋就蒙了，用图？当然不是，如果是，那就没分享的必要了，一起来学习下。我们从零开始学习，一共分三步：第一步:绘制文本.text {text-decoration: none;displ...

用CSS3&JS实现在三维空间里图片3D旋转效果

2019年01月21日

用CSS3&JS实现在三维空间里图片3D旋转效果，效果太酷，所以有些浏览器不支持（只支持webkit内核的浏览器，火狐不支持倒影）的，只是给大家欣赏，学习下，说不定能用上呢。看下效果图：再来看下DEMO代码：<!doc...

用CSS3画几件漂亮的裙子

2019年01月14日

用CSS3画几件漂亮你的裙子，一起来学下咯。先看下效果图：一共三种模式，一起来看下源码吧。<!DOCTYPE html><html lang="en"><head><meta charset=&q...

一起来学习如何用CSS3实现菱形图形

2019年01月10日

一起来学习如何用CSS实现菱形图形，先看效果：直接上代码咯。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"...

CSS3：实现三维空间的叠加效果

2018年12月28日

晚上闲着没事，看到了一个不错的效果，用CSS3实现三维空间的叠加效果，分享出来给大家，一起学习下。先看下效果图：接下来，直接贴上代码：<!DOCTYPE html><html><head> <...

CSS3转动的三围正方体

2018年11月26日

CSS3转动的三围正方体。<!DOCTYPE html><html><head> <meta charset="UTF-8"> ...

尝试用CSS3实现无限循环的无缝滚动

2018年10月25日

有时候在页面的某个模块中，需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢（比如我们这个模块是向上滚动的）？克隆A一份完全一样的数据B放在原数据A的后面；使用setInterval向上滚动A的父级容器；当向上滚动的距离L正好的A的高度时(L==A.height())，L=...

分享一个用CSS3做的雨天雷电动画特效

2018年10月08日

10月的深圳还是那么DE热（30度+），十一长假，出去浪几天晒糊了，黑了一圈。假后的第一天上班，整个人迷糊迷糊的，也没事情干，分享点东西吧，现做的一个CSS3雨天雷电动画效果，还是“热”的，请拿走，不谢。思维每次做动画之前，我们都必须了解动画的帧数，脑子里有自己的思路，然后跟设计师沟通，提取一些动画...

了解下CSS3中的pointer-events属性

2018年09月13日

最近发现了一个叫pointer-events的css属性，是一个与javascript有关的属性，pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止Css里的Hover和Active状态的变化触发事件阻止Ja...

学习如何用CSS3画不规则图形

2018年07月24日

学习如何用CSS3画不规则图形，比如平行四边形导航条、梯形导航条等。一、平行四边导航条效果图：代码：<!DOCTYPE html><html lang="en"><head> &...

2018世界杯，用HTML5+CSS3来画个足球场

2018年06月28日

2018世界杯，用HTML5+CSS3来画个足球场。<!DOCTYPE html><html><head> <style> body,...

CSS3：行驶中的自行车，浪起来吧！

2018年06月04日

CSS3：行驶中的自行车，浪起来吧！<!DOCTYPE html><html lang="en"> <head> &nb...

CSS3：动起来的自行车

2018年05月22日

用CSS3描绘出动起来的自行车，大家可以学习下。<!DOCTYPE html><html><head> <meta charset="UTF-8"> &nb...

学习CSS3中的技巧之:not(:last-of-type)

2018年05月21日

数据列表的模块，经常会遇到最后一个元素不需要某某某属性，我们通常会写两行代码，通用属性一行，另外加一行CSS专门为最后一个元素去掉相关属性，其实这复杂了，学习:not(:last-of-type)后，发现一行搞定。直接上DEMO:<!DOCTYPE html><htm...

快捷导航

HTML

Javascript

前端工具

前端教程

前端API文档

2022年10月28日

作者:Terry | 分类:Html5 | 浏览:1698 | 评论:0

2021年12月24日

作者:Terry | 分类:Html5 | 浏览:3826 | 评论:0

2021年10月20日

作者:Terry | 分类:Html5 | 浏览:4238 | 评论:0

2021年08月19日

作者:Terry | 分类:Html5 | 浏览:4062 | 评论:0

2021年08月19日

作者:Terry | 分类:HTML/CSS | 浏览:3905 | 评论:0

2021年08月10日

作者:Terry | 分类:Html5 | 浏览:5338 | 评论:0

2021年07月29日

作者:Terry | 分类:Html5 | 浏览:3306 | 评论:0

2021年07月26日

作者:Terry | 分类:Html5 | 浏览:6097 | 评论:0

2021年07月12日

作者:Terry | 分类:Html5 | 浏览:3607 | 评论:0

2021年04月30日

作者:Terry | 分类:Html5 | 浏览:5293 | 评论:0

2021年04月19日

作者:Terry | 分类:开发工具 | 浏览:6142 | 评论:1

2021年02月08日

作者:Terry | 分类:Html5 | 浏览:5892 | 评论:0

2021年02月07日

作者:Terry | 分类:Html5 | 浏览:5045 | 评论:0

2021年02月06日

作者:Terry | 分类:Html5 | 浏览:3528 | 评论:0

2021年02月05日

作者:Terry | 分类:Html5 | 浏览:3639 | 评论:0

2020年11月13日

作者:Terry | 分类:HTML/CSS | 浏览:7521 | 评论:0

2020年11月02日

作者:andy001 | 分类:HTML/CSS | 浏览:5993 | 评论:0

2020年10月28日

作者:Terry | 分类:HTML/CSS | 浏览:15035 | 评论:0

2020年09月01日

作者:andy001 | 分类:Html5 | 浏览:6708 | 评论:0

2020年07月20日

作者:天空 | 分类:Js&JQuery | 浏览:6209 | 评论:0

2020年06月01日

作者:Terry | 分类:移动开发 | 浏览:20309 | 评论:0

2020年05月21日

作者:Terry | 分类:Html5 | 浏览:5435 | 评论:0

2020年05月09日

作者:andy001 | 分类:HTML/CSS | 浏览:9250 | 评论:0

2020年05月08日

作者:Terry | 分类:HTML | 浏览:7933 | 评论:0

2020年04月21日

作者:andy001 | 分类:Js&JQuery | 浏览:5648 | 评论:0

2020年02月09日

作者:andy001 | 分类:移动开发 | 浏览:9428 | 评论:0

2019年12月25日

作者:Terry | 分类:开发工具 | 浏览:9393 | 评论:0

2019年12月19日

作者:andy001 | 分类:Js&JQuery | 浏览:5544 | 评论:0

2019年11月12日

作者:andy001 | 分类:HTML/CSS | 浏览:11312 | 评论:0

2019年09月25日

作者:andy001 | 分类:HTML/CSS | 浏览:12843 | 评论:0

2019年09月22日

作者:andy001 | 分类:HTML/CSS | 浏览:8167 | 评论:0

2019年09月22日

作者:andy001 | 分类:HTML/CSS | 浏览:6756 | 评论:0

2019年04月04日

作者:andy001 | 分类:Js&JQuery | 浏览:9528 | 评论:0

2019年04月04日

作者:andy001 | 分类:HTML/CSS | 浏览:9300 | 评论:0

2019年04月02日

作者:yinqiong | 分类:Html5 | 浏览:18540 | 评论:0

2019年03月06日

作者:jiang | 分类:HTML/CSS | 浏览:30288 | 评论:0