问答社区 更多 >
关键词搜索结果：
如何使用 CSS3 盒子阴影复制元素？
2022年10月28日
今天我们分享内容：如何使用CSS3盒子阴影复制元素？其实这个问题不难，只要你掌握了CSS3的阴影功能，还是比较得心应手的，我们一起先看个DEMO。<!DOCTYPE html> <html> ...
作者:Terry | 分类:Html5 | 浏览:3441 | 评论:0
CSS3 2D转换：分享常用的5种【translate()、rotate()、scale()、skew()、matrix()】实现方式
2021年12月24日
在平时的项目中，经常会对元素进行CSS2D转换，从而达到预期的效果。举一个很简单的例子：一个向右的箭头，我们在项目中很多地方会用到，并且箭头的方向或者大小可能不同，如果每个箭头都去弄一个图或者写一套样式，就很麻烦了。用上了2D转换后，就方便很多了，一套样式，只要进行相应的转换就轻松实现了。接下来让...
作者:Terry | 分类:Html5 | 浏览:4806 | 评论:0
CSS3动画应用：分享一个用纯CSS打造的文本打字特效
2021年10月20日
今天我们分享一个小应用：用纯CSS打造的文本打字特效。不需要JS去控制，通过CSS3动画去控制，实现跟我们敲代码那样的酷炫效果，废话不多说，走起吧。打字机效果的工作方式：打字机动画将通过使用CSS steps()函数逐步将宽度从0更改为100%来显示我们的文本元素。闪烁动画将使“...
作者:Terry | 分类:Html5 | 浏览:5418 | 评论:0
如何使用CSS3混合模式在图像上显示酷炫“Web前端之家”文字
2021年08月19日
关于图片上显示文字的方式，相信大家已经比较是熟悉了，有时候我们需要一些特殊的效果去提升用户体验。今天给大家分享一篇关于“图片上的文字特效”的文章。走起吧！！！！先来看张部分截图效果，我们以“Web前端之家”文字为例子咯：看到图片后，有没有感到惊叹，文字还可以这样做特效？没错，一切只需要用css图片属...
作者:Terry | 分类:Html5 | 浏览:5313 | 评论:0
CSS3绘制图形应用：如何使用 CSS3 创建 Gmail 徽标
2021年08月19日
CSS3绘制图形应用：如何使用CSS3创建Gmail徽标。上代码吧。<!DOCTYPE HTML> <html> <head> &nb...
作者:Terry | 分类:HTML/CSS | 浏览:6539 | 评论:0
HTML5和CSS3应用：绘制小水缸，实现动画效果
2021年08月10日
今天继续分享一个用HTML5和CSS3实现的应用：绘制小水缸，实现动画效果。之前也分享过一些了，大家可以去了解。OK，我们往下走吧，先看下效果图：一口可爱的小水缸，带着笑脸，冒着泡。首先我们需要绘制图形。HTML<label for="toggle">T...
作者:Terry | 分类:Html5 | 浏览:6573 | 评论:0
CSS3应用：画个东京奥运会五环图形效果
2021年07月29日
2020东京奥运会正在如火如荼进行着，希望中国队再接再厉力压日本队，稳住前二吧。今天给大家分享的是奥运会的5环图形，我们用如何用CSS3去花呢？先来看下最终效果图：首先我们规划HTML：<div class="container"> ...
作者:Terry | 分类:Html5 | 浏览:3995 | 评论:0
CSS3动画：通过Animation实现简单的手指点击动画
2021年07月26日
好久没分享CSS3动画的知识点了，近期都在忙于后台前端开发项目，难道今天有点时间，分享下关于CSS3动画知识点，今天我们看一个小TIPS：通过Animation实现简单的手指点击动画。鼠标放上去会有个特效。HTML：<div class="wrapper">...
作者:Terry | 分类:Html5 | 浏览:7264 | 评论:0
HTML5：CSS3画一个可爱动漫宠物
2021年07月12日
好久没发布关于HTML5和CSS3动画的文章了，近期一直折腾vue和react等项目。闲余之时，突然想分享一个HTML5应用：CSS3画一个可爱动漫宠物。先看下效果图：HTML代码：<label for="toggle">Toggle body&n...
作者:Terry | 分类:Html5 | 浏览:4551 | 评论:0
CSS3动画：宠物躺着招手动画特效
2021年04月30日
今天来分享些CSS3动画的应用：宠物躺着招手动画特效。上次我也分享过类似的动画效果，没看过的可以先看看。CSS3动画：圆形脉冲动画先下我们今天要分享的宠物动画预览图：原理解析对于宠物动画，第一步我们需要先用CSS3画宠物的形状和涂色。这个是一个比较复杂的活，我们需要把宠物分很多小块去实现。比如：&l...
作者:Terry | 分类:Html5 | 浏览:6346 | 评论:0
Web前端之家推荐：功能最全的CSS3渐变生成器
2021年04月19日
好久没弄前端工具了，上次弄前端工具还是很多个月前，估计都快遗忘了，回顾下：CSS三角形生成工具不知道大家是否用过此工具呢？今天我跟大家继续分享一款实用的前端工具：功能最全的CSS3渐变生成器。首先我们来看一张界面图：看到效果图后，相信大家就知道这个工具的大概用途了，其实就是用来根据PS里的渐变来生成...
作者:Terry | 分类:开发工具 | 浏览:7687 | 评论:1
CSS3动画：圆形脉冲动画
2021年02月08日
在平时项目中，脉冲动画经常会被用到，比如地图上标记某个地点，或者在页面上突显某个元素等等，都会用上，今天分享下一个简单的圆形脉冲动画的DEMO。这是一个涉及较少的动画，但仅显示了一些CSS即可完成的工作。首先，我们需要绕圈。首先添加一些HTML：<div class="pu...
作者:Terry | 分类:Html5 | 浏览:7141 | 评论:0
CSS3酷炫动画：手把手教您使用纯CSS制作蜡烛动画
2021年02月07日
通过此动画，我们将使用一些基本的CSS绘图。然后，我们将使用CSS创建触发事件。最后，我们将模拟火焰（尽我们所能！）。注意：您将在下面看到我使用绝对定位和变换来定位HTML元素，这是使用CSS绘制时的好技巧。下面是我们要使用CSS绘制的内容：如果愿意，您可以跟着我。我已经建立了一个基础笔，它建立了一...
作者:Terry | 分类:Html5 | 浏览:5928 | 评论:0
纯CSS3绘制游戏手柄并且涂色酷炫效果
2021年02月06日
今天继续玩玩CSS3的效果，默认和点击分别实现颜色变化功能。走起吧，直击分享主题：纯CSS3绘制游戏手柄并且涂色酷炫效果。有兴趣的朋友可以进来看看哟，先上个效果图再说咯。先用CSS绘制出手柄的设计图，然后在实现功能。默认和点击分...
作者:Terry | 分类:Html5 | 浏览:4256 | 评论:0
分享一个纯CSS3实现的绘制动画效果：可爱宠物
2021年02月05日
今天在国外一个网站看到一个不错的CSS效果，一个纯CSS3实现的绘制动画效果，想弄出来这个效果，需要很大的耐心哟。先来看下效果图，如下：废话不多说，直接上代码。<!DOCTYPEhtml><htmllang=&qu...
作者:Terry | 分类:Html5 | 浏览:4345 | 评论:0
CSS3动画：模拟canvas酷炫特效
2020年11月13日
CSS3动画：模拟canvas酷炫特效。<!DOCTYPE html><html lang="en"><head> <meta charset=&qu...
作者:Terry | 分类:HTML/CSS | 浏览:10039 | 评论:0
CSS3:处理文字溢出省略号代替的应用
2020年11月02日
我们处理处理数据的时候，经常会出现后台返回数据文字太多，导致排版乱了，有时候后台会直接改，但是有时候还是要前端去处理好些。如何弄呢？我们直接用text-overflow属性就可以了。基本语法text-overflow的使用需配合hight,over-flow:hidden;white-space:n...
作者:andy001 | 分类:HTML/CSS | 浏览:6678 | 评论:0
处理CSS3 transform过渡抖动兼容问题
2020年10月28日
处理css3transform过渡抖动兼容问题。transform:scale();缩放在IE浏览器下会有抖动transform缩放在IE浏览器下会有抖动可以在缩放的同时添加一个旋转如：transform: scale(1.2);换成：transform: scale(1....
作者:Terry | 分类:HTML/CSS | 浏览:16637 | 评论:0
分享按钮点击CSS3特效：酷炫发散效果
2020年09月01日
按钮点击CSS3特效：鼠标点击按钮酷炫发散效果。这个效果很实用的，大家可以看下DEMO。效果图：DEMO代码走一波：<!DOCTYPE html><html lang="en"><head> ...
作者:andy001 | 分类:Html5 | 浏览:7518 | 评论:0
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...
作者:天空 | 分类:Js&JQuery | 浏览:7128 | 评论:0
CSS3 @media不起作用是什么原因？怎么解决？
2020年06月01日
css3@media不起作用是什么原因？怎么解决？不要慌呢，慢慢分析。首先确认是不是css本身的问题，而不是媒体查询没有生效。例如：div{display:flex;}/*那么div所有的display效果都将无法生效*/第一种错误：格式书写错误,and后面必须有空格例如下面代码：@media&n...
作者:Terry | 分类:移动开发 | 浏览:23728 | 评论:0
分享下CSS3里的2D变形方法
2020年05月21日
早安，各位，又是炎热的一天，深圳的天气真是变化无常，静下心来分享下css3里的2D变形方法。转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。移动translate(x,y...
作者:Terry | 分类:Html5 | 浏览:6042 | 评论:0
CSS3里的linear-gradient()函数
2020年05月09日
linear-gradient()函数用于创建一个线性渐变的"图像"。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐...
作者:andy001 | 分类:HTML/CSS | 浏览:9962 | 评论:0
Web前端开发：探讨CSS3中元素位移、旋转、倾斜、缩放等方式
2020年05月08日
在前端开发项目中经常会遇到用CSS3实现各种旋转等方式，然后去实现一些动画效果，所以这方面的知识点还是得熟练掌握。众所周知，转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。接...
作者:Terry | 分类:HTML | 浏览:9033 | 评论:0
如何使用js判断浏览器是否支持CSS3属性？
2020年04月21日
如何使用js判断浏览器是否支持css3属性？使用js脚本判断浏览器是否支持某一个CSS3属性：/** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return...