css实现鼠标悬浮字体流光背景模糊效果
原文地址:→看过来
写在前面
有的时候感觉写点小玩意儿挺开心的,还能实践很多的小知识点,所以这次学着写了个有趣的鼠标悬浮模糊效果,只使用了css额。
效果图
源码地址→传送门
预览地址→传送门
小知识点
filter: blur(npx);
这个过滤器用来将图片模糊,但是兼容性不太好,n代表模糊度,值越大越模糊。
background-clip: text;
background-clip
是用于背景图片的裁剪,决定背景从哪里开始显示。当设置为text
时,即可将背景设置在字体上。
text-fill-color
这个属性为字体颜色填充,在这里设置成transparent
,然后在自己填充一个颜色渐变的字体颜色。
linear-gradient
线性渐变,这里为文字添加一个渐变色,为了实现流光渐变的效果,需要将背景宽度设置为200%,且linear-gradient
的0%和100%颜色一样,便于前后衔接上,具体如下:
background-image: -webkit-linear-gradient(left, red, yellow 25%, red 50%, yellow 75%, red 100%);
background-size: 200% 100%;
在设置好背景色之后为字体添加动画,使文字产生流光效果。
鼠标悬浮显示和隐藏
现将元素的透明度设为0,当鼠标悬浮时执行渐变透明度变为1。
边框向两边伸展的效果
在实际中我们只能设置边框的宽度,而不能改变边框的长度,所以此处不能直接用border的属性。而是通过追加2个元素,并改变其大小来实现本元素的边框向两边伸展的效果。分别设置这两个元素的上下边框及左右边框。
原理图(实现为所设边框,虚线为不设置边宽):
追加元素的实现
追加元素宽或高为0,当鼠标移动到box上时,宽或高渐变到100%,即可。
#content:before {
content: " ";
position: absolute;
left: 50%;
top: 0;
width: 0;
height: 100%;
border: 3px solid #fff;
border-left: none;
border-right: none;
transition: all 0.8s;
box-sizing: border-box;
}
#box:hover #content:before {
width: 100%;
left: 0;
}
左和右边框同理实现。
小结
以前感觉好多属性用不上,这下用上了好多个,以后继续写写写~
css实现鼠标悬浮字体流光背景模糊效果的更多相关文章
- css实现鼠标悬浮后的提示效果
一.概述 很多时候网站中需要在鼠标划过小图标时,悬浮出提示性的文字.比如下图: 鼠标悬浮后的效果 这种效果可以使用css中的伪类hover来实现.但有时候搞不清两个元素的嵌套关系.使用了hover却没 ...
- Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618373 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 伪类: <!DOC ...
- CSS基础 和 font字体、背景属性连写 与 清除浮动方法
1.伪类 1. :link 2. :visited 3. :hover(重要) 4. :active 5. :focus(input标签获取光标焦点) 2.伪元素 1.:first-letter 2. ...
- CSS之鼠标经过字体光标形状的改变
CSS中的cursor属性是规定要显示的光标的类型(形状). 参阅JavaScript正则表达式 default 默认光标(通常是一个箭头) auto 默认.浏览器设置的光标. crosshair 光 ...
- css 实现鼠标滑过流光效果
来划我啊 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- CSS实现鼠标悬浮无限向下级展示的简单代码
*{ margin:; padding:; } ul,li{ list-style: none; } .ui-slide-box{ width: 300px; } .ui-slide-item{ wi ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
- CSS快速入门-鼠标悬浮(hover伪类)
一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
随机推荐
- [原]vue实现全选,反选
用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中 ...
- 笔记,spring4+ehcache2配置文件
最近工作中遇到个功能需要整合ehcache,由于spring版本用的是最新的4.2.4,而在ehcache官网找到的集成配置文档是spring3.1的,因此配了几次都不成功,在历经一番波折后终于成功集 ...
- Github 开源:高效好用的对象间属性拷贝工具:升讯威 Mapper( Sheng.Mapper)
Github 地址:https://github.com/iccb1013/Sheng.Mapper 对象属性值映射/拷贝工具.不需要创建映射规则,不要求对象类型一致,适用于简单直接的拷贝操作,可以全 ...
- 对jsp的初步了解及规范问题(二)
前言 今天的例子是用jsp制作简单的“艾宾浩斯记忆曲线的学习计划表”. 重点不是算法,重点是学习jsp中的一个重要的思想,作为展现层,jsp中不应该出现业务逻辑代码. 当中<%%>代码也会 ...
- [转] DDD领域驱动设计(三) 之 理论知识收集汇总
最近一直在学习领域驱动设计(DDD)的理论知识,从网上搜集了一些个人认为比较有价值的东西,贴出来和大家分享一下: 我一直觉得不要盲目相信权威,比如不能一谈起领域驱动设计,就一定认为国外的那个Eric ...
- [1] Report Fusioncharts
图形报表之fusioncharts
- 如何用phpcms将静态网页生成动态网页?
在前两篇随笔中已经简单介绍了phpcms,那么现在让我们来看一下如何用phpcms将静态网页生成动态网页? 1.在templates文件夹下新建模板文件夹ceshi(名字可以自己随笔起) 2.在ces ...
- spring boot + mybatis + druid
因为在用到spring boot + mybatis的项目时候,经常发生访问接口卡,服务器项目用了几天就很卡的甚至不能访问的情况,而我们的项目和数据库都是好了,考虑到可能时数据库连接的问题,所以我打算 ...
- POJ 1459-Power Network(网络流-最大流-ISAP)C++
Power Network 时间限制: 1 Sec 内存限制: 128 MB 题目描述 A power network consists of nodes (power stations, cons ...
- 基于Mac制作iPhone铃声教程,iTunes定制铃声
前言: 网上太多制作方法了,不管是借助第三方软件还是基于iTunes的,不过这些方法都太旧了,有时看起来 ,界面的变化或其他原因,导致很不爽. 正好记录下我最近使用的一种方法: 正文: 一.下载你需要 ...