分享几款炫酷的css字体效果

更新日期: 2023-01-10阅读: 238标签: 特效

平时网页上的字体需要重点展示的时候,加粗加大来显示,怎么看都不够档次,直接把产品的质量拉下来了,下面就为大家分享几款纯css实现的高大上的字体效果,帮助提高作品质量。


效果一

fly63-web

代码

<div class="box_1">
<span class="text" data-text="fly63前端">fly63前端</span>
<span class="gradient"></span>
<span class="spotlight"></span>
</div>
<style>
.box_1 {
position: relative;
overflow: hidden;
filter: brightness(200%);
background: #000;
padding: 20px 0;
text-align: center;
}
.box_1 .text {
background-color: black;
color: white;
font-size: 80px;
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
position: relative;
user-select: none;
}
.box_1 .text::before {
content: attr(data-text);
position: absolute;
color: white;
filter: blur(0.02em);
mix-blend-mode: difference;
}
.box_1 .gradient {
position: absolute;
background: linear-gradient(45deg, red, gold, lightgreen, gold, red);
top: 0;
left: 0;
right: 0;
bottom: 0;
mix-blend-mode: multiply;
}
.box_1 .spotlight {
position: absolute;
top: -100%;
left: -100%;
right: 0;
bottom: 0;
background: radial-gradient(circle,white,transparent 25%) center / 25% 25%,
radial-gradient(circle,white,black 25%) center / 12.5% 12.5%;
animation: light 5s linear infinite;
mix-blend-mode: color-dodge;
}
@keyframes light {
to {
transform: translate(50%, 50%);
}
}
</style>


效果二

fly63前端

代码:

<div class="box_2">
<p>fly63前端</p>
</div>
<style>
.box_2 {
position: relative;
overflow: hidden;
background: #000;
padding: 20px 0;
height: 100px;
text-align: center;
}
.box_2 p {
color: hsla(0, 0%, 0%, .9);
font: normal 80px Varela Round, sans-serif;
letter-spacing: 5px;
text-align: center;
text-transform: uppercase;
animation: move linear 2000ms infinite;
}
@keyframes move {
0% {
text-shadow:
4px -4px 0 hsla(0, 100%, 50%, 1),
3px -3px 0 hsla(0, 100%, 50%, 1),
2px -2px 0 hsla(0, 100%, 50%, 1),
1px -1px 0 hsla(0, 100%, 50%, 1),
-4px 4px 0 hsla(180, 100%, 50%, 1),
-3px 3px 0 hsla(180, 100%, 50%, 1),
-2px 2px 0 hsla(180, 100%, 50%, 1),
-1px 1px 0 hsla(180, 100%, 50%, 1);
}
25% {
text-shadow:
-4px -4px 0 hsla(180, 100%, 50%, 1),
-3px -3px 0 hsla(180, 100%, 50%, 1),
-2px -2px 0 hsla(180, 100%, 50%, 1),
-1px -1px 0 hsla(180, 100%, 50%, 1),
4px 4px 0 hsla(0, 100%, 50%, 1),
3px 3px 0 hsla(0, 100%, 50%, 1),
2px 2px 0 hsla(0, 100%, 50%, 1),
1px 1px 0 hsla(0, 100%, 50%, 1);
}
50% {
text-shadow:
-4px 4px 0 hsla(0, 100%, 50%, 1),
-3px 3px 0 hsla(0, 100%, 50%, 1),
-2px 2px 0 hsla(0, 100%, 50%, 1),
-1px 1px 0 hsla(0, 100%, 50%, 1),
4px -4px 0 hsla(180, 100%, 50%, 1),
3px -3px 0 hsla(180, 100%, 50%, 1),
2px -2px 0 hsla(180, 100%, 50%, 1),
1px -1px 0 hsla(180, 100%, 50%, 1);
}
75% {
text-shadow:
4px 4px 0 hsla(180, 100%, 50%, 1),
3px 3px 0 hsla(180, 100%, 50%, 1),
2px 2px 0 hsla(180, 100%, 50%, 1),
1px 1px 0 hsla(180, 100%, 50%, 1),
-4px -4px 0 hsla(0, 100%, 50%, 1),
-3px -3px 0 hsla(0, 100%, 50%, 1),
-2px -2px 0 hsla(0, 100%, 50%, 1),
-1px -1px 0 hsla(0, 100%, 50%, 1);
}
100% {
text-shadow:
4px -4px 0 hsla(0, 100%, 50%, 1),
3px -3px 0 hsla(0, 100%, 50%, 1),
2px -2px 0 hsla(0, 100%, 50%, 1),
1px -1px 0 hsla(0, 100%, 50%, 1),
-4px 4px 0 hsla(180, 100%, 50%, 1),
-3px 3px 0 hsla(180, 100%, 50%, 1),
-2px 2px 0 hsla(180, 100%, 50%, 1),
-1px 1px 0 hsla(180, 100%, 50%, 1);
}
}
</style>


效果三

你已经不是小朋友了,就算撑不住也不能哭呀!

代码:

<div class="box_3">
<p>你已经不是小朋友了,就算撑不住也不能哭呀!</p>
</div>
<style>
.box_3{
background: #fff;
text-align: center;
padding: 10px 0;
}
.box_3 p {
font-size: 30px;
font-weight: bold;
background: rgb(155,93,229);
background: linear-gradient(150deg, rgba(155,93,229,1) 0%, rgba(241,91,181,1) 20%, rgba(254,228,64,1) 40%, rgba(0,187,249,1) 60%, rgba(0,245,212,1) 80%);
background-size: 20% 20%;
background-color: #840b2a;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient 5s linear infinite;
}
@keyframes gradient {
0% {
background-position: 0% 0%;
}
50% {
background-position: 50% 50%;
}
100% {
background-position: 100% 100%;
}
}
</style>


效果四

توسعه پیشینه وب

代码:

<div class="box_4">
<p>توسعه پیشینه وب</p>
</div>
<style>
.box_4{
background: #f1f2f3;
text-align: center;
padding: 30px 0;
}
.box_4 p {
font-size: 60px;
font-weight: bold;
background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
background-size: cover;
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
}
</style>


链接: https://www.fly63.com/article/detial/12309

也许vue+css3做交互特效更简单

关于vue+css3开发的特效,以及和javascript+css3的对比,就说到这里了,希望这三个小实例,能帮到大家了解下应该怎么使用vue+css3开发特效的。

纯 CSS 创作出平滑的层叠海浪特效

这里的波浪只是侧面的,利用几个平面一部分弧旋转得到。定义 dom,容器中包含一行文本和3条做海浪特效的 <span>,设置容器,文字样式,制作海浪动画效果

VUE路由转场特效,WebAPP的前进与后退

定义两个 CSS 过度动画,前进与后退: slide-right-enter 和 slide-left-enter,给路由配置meta信息,设置各个路由的级别: index,监控路由跳转,比对 meta 信息级别,如果从大跳转到小说明是返回,从小跳转到大则是前进

js实现图片放大镜特效

在平时网上商城购物时,我们能够通过放大镜效果来使我们看图片能够更加的清楚,今天我就来给大家分享一下我学习的放大镜特效

基于 HTML5 Canvas 实现的文字动画特效

文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读

只需三步,实时多边形折射

在本教程中,您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃。渲染3D对象时,无论使用某种3D软件还是使用WebGL进行实时显示,始终都必须为其分配材料以使其可见并具有所需的外观。

纯CSS3仿网易云孤独星球特效

今天收听网易云音乐时看到孤独星球的特效,于是就顺手搬到这里了。孤独星球特效本身没有什么难点,但如果要加入音轨控制星球运动频率就有点麻烦了

原生JS实现旋转木马轮播图特效

当用户点击左右箭头时,让数组进行相应变化(如果点击右箭头,就删除数组最后那个元素,把它添加到最前边;如果点击左箭头,就删除数组最前边那个元素,把它添加到最后边),改变完数组再调用一下move()函数(让图片轮播)

纯css3实现二维码扫描特效

第一步,实现网格背景:第二部实现扫码线以及渐变背景特效,四角特效就是四个宽高相等的正方形,分别设置边框即可。设置扫描动画

canvas+js实现数字雨特效【字符下落特效】

用dropLine这个列表来记录绘制过程,dropLine[i]的意义是表示在第i列,第dropLine[i]行绘制!filltext()是canvas中的方法,这里的三个参数分别对应:内容,横坐标,纵坐标。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!