您正在使用IPV4(44.192.247.184)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       悟空收录网      

【腾讯云】云服务器等爆品抢先购,低至4.2元/月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2023年 元宵节 4
2023年 情人节 13
2024年 元 旦 334
2024年 春 节 374
 
您现在的位置:首页 >> 脚本程序 >> 内容
本类新增
本类热门文章
css实现文字充电效果的示例代码
内容摘要: 实现充电效果在HTML部分使用乱数假文自动生成随机文本h1Loremipsumdolorsitametconsecteturadipisicingelit./h1然后加入body选择器,用Flexbox的方法将内容上下左右居中,设定背景颜色为黑色body{display:flex;justify-content:center;align-items:cent......
实现充电效果

在HTML部分使用乱数假文自动生成随机文本

<h1>Loremipsumdolorsitametconsecteturadipisicingelit.</h1>

然后加入body选择器,用Flexbox的方法将内容上下左右居中,设定背景颜色为黑色

body{

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

background-color:#000;

}

然后加入h1选择器,文字先设为白色,宽度设为50%,将字距收窄一点,使用letter-spacing设为-3px

h1{

color:#fff;

width:50%

margin:0auto;

font-family:Helvetica;

font-size:60px;

letter-spacing:-3px;

}

要做到充电的效果关乎到两个颜色,白色和绿色,这里使用linear-gradient()去达到

h1选择器加入background-image(渐层颜色是套用background-image而不是background-color),使用linear-gradient(),先设定白色50%,然后绿色50%

h1{

background-image:linear-gradient(#fff50%,#4cd26550%);

}

然后加上background-clip:text,以文字作为遮罩,再将文字设为透明色color:transparent

h1选择器定义一个CSS变量--progress:0,在0的时候文字是全白色,1的时候是全绿色,然后将两个50%的值替换成calc()计算,将--progress改为0.5看看效果

--progress:0.5;

background-image:linear-gradient(#fffcalc(100%-calc(var(--progress)*100%)),#4cd265calc(100%-calc(var(--progress)*100%)));

但是就这样效果就有点寡,在充满电的时候将文字放大一些,放大使用transform:scale(1.3),充电的完成度完全由--progress控制,当--progress小于1的时候scale()设为1,等于1的时候scale()设为1.3,但是css没有if判断式可以用

这里使用一个新的css函式clamp(),这个函式接收三个值,第一个值最小值,我们填1,第三个值最大值,我们填3,而第二个值,如果少于1的话结果就是1,如果大于1.3结果就是1.3,如果在1和1.3之间的话,结果就是第二个值设定值

假设每次充电都加0.01,即100充满电,通过calc(),var(--progress)-0.99再乘一个比较大的值,--progress在0.99或以下的时候scale()为1,--progress为1时scale()为1.3,再加入一个动画的过渡

transform:scale(clamp(1,calc((var(--progress)-0.99)*200),1.3));

transition:.3stransformease-out;

最后,就是处理触发动画的部分了,定义一个变量progress,然后定义一个run函数,里面判断如果progress少于1的话progress加0.01,为了确保计算的精度准确,先用toFixed(2)转换为两个小数位再用parseFloat()转换为数字,然后通过setProperty()将progress设定到css变量中,再加一个setTimeout(),每隔20毫秒就执行一次run函数

letprogress=0

functionrun(){

if(progress<1){

progress=parseFloat((progress+0.01).toFixed(2))

document.querySelector('h1').style.setProperty('--progress',progress)

console.log(progress);

setTimeout(run,20);

}

}

run()

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:CSS样式覆盖的操作代码 下一篇:随鼠标上下滚动的jquery代码
发布日期:2023/1/6
手机扫二维码直达本页
发布时间:18:58:09
点  击:44
录  入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.3.5.220928(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2023