![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
_小郑有点困了
我的月亮永悬不落。
展开
-
使用css3实现雪碧图帧动画
使用css3实现雪碧图帧动画背景:次需求是在html界面实现,纯原生,没有像vue生命周期那些东西。场景:一个单纯的图片背景,想要在上面加个动图。一瞬间脑子里想到两个方案:一:最省前端功夫的:ui压缩一个gif图出来二:需要前端写点代码的:把ui提供的多张图片,利用css3动画,进行动画切换,达到动图的效果情况一:出现动图有白边的问题,就不太好看,而且ui已经尽力了。。。效果图:情况二:使用css3动画属性,也发现了不适用的问题:效果图:截图不能展示问题,就是即使图片已经压缩的原创 2021-11-19 16:55:29 · 3429 阅读 · 0 评论 -
稀土掘金个人头像无限旋转
稀土掘金个人头像无限旋转无意间浏览到稀土掘金,发现个人头像,鼠标悬停上去,会无限的旋转,而且越来越快,挺有意思,是怎么做的呢,难道是js?发现不是,是css大哥实现的。正常状态开始旋转越来越快就截不到图了,看不出效果。代码如下.animateImg:hover { transform: rotate(666turn); transition: all 59s cubic-bezier(.34,0,.84,1) 1s; }...原创 2021-07-15 17:59:02 · 357 阅读 · 0 评论 -
css3数字滚动特效
一个格子:效果:代码:props:['value'],data(){ return { pretime: undefined, numbers:[0,0,0,0,0,0], numLenth:0, }}, created () { setTimeout(()=>{ this.number = this.value },500) },<template> <div class="chartNum">原创 2021-01-15 13:56:33 · 2708 阅读 · 1 评论 -
css3电池效果
css3电池效果,页面加载,从左到右增长到传入的值。效果:分析:黑色的小间隔是自己画的,保证页面伸缩的时候样式不会异样,间隔是循环定位上去的,让间隔的层级最高,然后彩色的小块是循环产生的,宽度固定,撑满整个盒子,一共10个,然后,右边有一个灰色盒子,用100%-要显示的值,就是他的长度,把他定位到右边,最初给他100%,然后在生命周期中500毫秒让他缩到(100%-要显示的值)这个宽度,就可以看到动画增长的效果了;这里直接transition过度也可以实现效果了代码:<template&原创 2021-01-15 13:49:15 · 1024 阅读 · 0 评论 -
css3波纹先后滚动的特效
先看图:这个位置,两张图片一前一后,从左到右不停的滚动,形成一种类似于波浪的动态效果做法:两个盒子用背景图片,盒子宽度200%,背景图片宽度50%,背景图片横向重复,然后动画移动即可。关键点:盒子宽度200%,图片50%,以及时间代码:<template> <div class="overBox"> <div class="wave waveTop" style="background-image: url('/static/img/image/波浪4.原创 2021-01-15 13:33:25 · 204 阅读 · 0 评论 -
css动画从左到右滚动的光点
先看效果:这个小点是从左往右运动的,也非常简单,一开始绝对定位到x方向看不到,然后在生命周期函数里面定时器500毫秒,行内样式改变left的值,运动到有点看不到的位置。当然后需要有个transition才能看到动画效果代码: <!-- 亮点 --><span class="lightDot" ref="lightDot" :style="{left:leftPlace,transition:`left ${time}s ease-in-out`}"></span>原创 2021-01-15 13:27:21 · 1692 阅读 · 0 评论 -
教你用CSS3做一个旋转的宇宙星球
教你用CSS3做一个旋转的宇宙星球可能略有瑕疵,无非就是先画一个圆圈,把小球定位到上面,然后再让圆圈旋转即可直接上效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &nbs...原创 2020-02-07 08:53:12 · 2053 阅读 · 0 评论 -
教你用CSS3画一个跳动的3D小球
教你用CSS3画一个跳动的3D小球两个盒子,一个做小球,一个做阴影,阴影就是椭圆形,小球呢就价格径向的内阴影凸显立体。效果:htmlcss。原创 2020-02-06 20:22:03 · 1570 阅读 · 0 评论 -
教你用CSS3画一个透视、旋转的正方体
教你用CSS3画一个透视、旋转的正方体正方体六个面,无非就是,将每个面进行translateZ提升/降低边长的一半,然后再进行rotate X/rotate Y (n*90deg)的旋转即可。html部分css部分12效果如下12...原创 2020-02-05 16:49:32 · 590 阅读 · 0 评论