css
文章平均质量分 76
pipixx
这个作者很懒,什么都没留下…
展开
-
前端用vue实现一个滚动数字时钟
前端用vue实现一个滚动数字时钟如果想直接用可以复制代码当作vue组件。实际上是六个纵向的数列,每列的数字从下往上滚动,秒数滚动到头就向左“进一位”,每一列到头都会向左“进一位”。到24:00:00时全部从0开始。获取当前时间后,把值赋给每一位数字,然后就按上面的流程每秒滚动一次,来模拟时钟。由于js的计时不够精确,运行时间长可能错几秒。代码如上,难点是turnOther函数,它是个递归函数,用来实现“进位”。原创 2022-11-08 20:41:47 · 4515 阅读 · 1 评论 -
css动画 实现一个svg图标 镂空充电动画
css3 实现的镂空图标充电动画效果原创 2022-07-25 16:24:22 · 444 阅读 · 0 评论 -
实现一个svg和图片完全重叠的类似地图效果
如图所示,建筑是一张png图片,闪烁的遮罩是svg元素.svg使用绝对定位,实现了任意缩放状态下,svg遮罩和png图片不错位,从而实现一个简单的可以交互的类似地图功能.vue代码如下:<template> <div class="container"> <img src="../../assets/map.png" alt=""> <svg v-if="maskShow" class="svgMask" version="1.1".原创 2021-09-09 16:29:48 · 1263 阅读 · 0 评论 -
css实现一个自适应多边形带有内阴影的边框
效果预览如图所示,整个边框的折线是用clip-path实现的,使用box-shadow做阴影的话右上角及右下角的阴影是会被裁剪掉的,尝试了一些常规办法都实现不了,每次到这种时候,心里一定要暗示自己:css的奇技淫巧都是"障眼法"…解决方案就是在右下角和右上角再分别绘制一个把方块补齐的多边形,给多边形加drop-shadow属性添加外阴影.这样就只有阴影部分被边框的clip-path裁剪进来,实现上述效果.代码如下,是一个vue组件,能够自适应不同的内容<template> <原创 2021-08-17 18:25:52 · 1236 阅读 · 2 评论 -
动画的方式理解css中perspective属性
属性的定义解释中的关键点就是"透视"效果,学过美术的都知道,透视意味着画面看起来更有空间感,更立体.这个属性的作用也是如此.直接在w3school上模拟一下就会非常直观网页链接演示动画按照上面的代码在网页上稍加更改,就能看到效果了.以下是值为150看起来比较正常,明显的透视效果,简单来说就是远大近小以下是值为1000看不出透视效果了,因为1000意味着方块离你特别远,虽然有透视效果,但很不明显了.以下是值为70有一种方块被甩到脸上的感觉…就是因为它离你太近,所以透视效果原创 2021-07-26 10:35:27 · 548 阅读 · 0 评论