![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS特效
文章平均质量分 80
wait......
这个作者很懒,什么都没留下…
展开
-
CSS之利用transition做一个图标转换的动画
效果如下:这个很简单,直接上代码,如果对字体图标不熟悉的同学可以看这篇文章:(45条消息) CSS之如何从icomoon引入及使用字体图标_qwerty053的博客-CSDN博客<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <原创 2021-10-16 23:53:38 · 478 阅读 · 0 评论 -
CSS特效(五):导航高亮的设置
今天满课的孩子,偷个懒,做个超级简单的导航高亮,效果如下:这个特效让我学到了一个新知识,就是nth-child(),一个超棒的解释如下:(38条消息) CSS3 :nth-child(n)使用注意_IT技术宅-北方的刀郎-CSDN博客所以这个特效中最主要的就是理解nth-child(),然后为其设置hover之后某一元素的变化,即如下代码:li:nth-child(1):hover ~ #nav,学到了!代码如下:<!DOCTYPE html><html lang="en"&原创 2021-10-06 23:19:45 · 2280 阅读 · 0 评论 -
CSS特效(四):按钮Hover边框动画特效
今天做出的动画效果如下:这个效果的做法其实很简单,只需要对stroke-dasharray和stroke-dashoffset加以灵活应用,就可以做出来啦~首先准备一个超大的div盒子,使其高度和宽度都为视图高度和视图宽度,然后在其中放入一个div盒子作为最终按钮形成边框的盒子,在其中放入svg和div,分别用来绘制边框和写入文字,记得在svg中放入rect绘制一个矩形。框架建好后,就为其设置CSS样式:首先设置矩形的fill属性为transparent,选择一个喜欢的颜色当作stroke边框颜色原创 2021-10-05 11:32:46 · 2449 阅读 · 0 评论 -
CSS特效(三):制作文本绘制及渐变特效
这次要做出的特效如下:让我们一起来看看怎么做吧~首先需要在div盒子中装入svg,然后在svg中添加text标签,为其中的文字设计fill属性为transparent,别忘了为stroke设置颜色;然后便需要用到stroke-dasharray以及stroke-dashoffset,这儿有链接来讲解:(35条消息) SVG中stroke-dasharray及stroke-dashoffset属性_justforuse的博客-CSDN博客_stroke-dashoffset做好这些之后,你的图案上原创 2021-10-04 09:41:53 · 605 阅读 · 0 评论 -
CSS特效(二):利用html和css制作毛玻璃特效和按钮动画效果
最终的效果图片:毛玻璃效果:在style标签中,在form表单的before中利用filter的blur属性以及box-shadow的值设置,就可以做出form表单后面的毛玻璃效果背景,还要记得设置form表单的display为flex布局,position为relative,form表单后的毛玻璃特效的position为absolute,所谓”子绝父相“。按钮动画效果:利用的是button的before和after,设置display为block,设置其filter属性blur的值,获得静态的模糊效原创 2021-09-30 23:24:45 · 2671 阅读 · 0 评论 -
CSS特效(一):制作盒子荧光特效
今天记录我的第一篇CSDN博客,开始我的前端之旅~荧光特效,最主要是利用hover以及box-shadow来制作,学习的过程中遇到了之前没有使用过的flex布局、filter、transform以及z-index,记录一下介绍这些属性的位置:transform:CSS 2D 转换 (w3school.com.cn)filter:(29条消息) CSS中filter属性的使用_weixin_33910759的博客-CSDN博客zindex:(29条消息) CSS 中的z-index属性_Min的博客-原创 2021-09-24 22:29:01 · 1926 阅读 · 0 评论