各种css的小特效的分享

outdated

FF L5++ 里对喇叭的处理比较好,在不同词典有相同的实现 :grin: 就是一大段的代码看不懂。

欧路升级后cmm的牛9 online 里的喇叭就变成半扬的了,css画风一下就变了。
论坛仓库下的LAAD3里的喇叭也很特别,同版本的欧路,不同手机也有不同的实现。

robot那版的oald10就是base64写入的喇叭图片

outdated

喇叭样式还行,就是配色比较少见。

那个年代,做图形的抛光渐变能彰显实力。。。我越看越像手电筒。

现在看来很有年代感,反而走简约路。你要是忍不了,可以换掉。

把原先的img opacity设为0,再加个content 喇叭图标

unicode 有很多好玩的,:uk::cn::us::mag_right::mag::notes::musical_note::point_right::point_up_2::point_left:

听着有点复杂,还是忍了。
这是鸿蒙的效果,在安卓里就酱紫了
image

看着时代烙印的喇叭,还真有年代感的,可能不同时期的审美差异。

1 Like

image

这个喇叭也挺有个性的

等你改完看效果啦,目前的喇叭看着有点虚

image

image

剑桥官网的喇叭看着不错,css整体看着很有商务范儿

没办法,剑桥就这么古董,发音也一样,英伦味很浓

unicode glyph list

还有这个帖子蛮好看

谁有试过这里面的词典,不知道好用否

1 Like

6大, 这个方法挺好 刚刚自己改了几个效果不错, 想问下这个方法可以实现显示出来就让释义一直显示的效果吗?现在是鼠标移走之后中文释义也会跟着消失

六小兄弟一定是有办法 快快教我一下 :kissing_heart:

  1. css 没法自己做这个永久显示的开关
  2. 需要 js,配合 css

1. js 内容类似这样

window.onload = () => {
    let nodesNeedShow = document.querySelectorAll("em.example");
    for(let aNodeNeedShow of nodesNeedShow) {
        aNodeNeedShow.addEventListener('mouseover', (event) => {
            aNodeNeedShow.style.opacity = "1";
        })
    }
}

2. css 内容类似这样

em.example {
    opacity: 0;
}

效果图如下:

  1. hover 前:
  2. hover 进、hover出都是这图:

好的 多谢小六 这有点高难度了 看来从发帖到现在你进步不小啊

顺便问下兄弟截图的ode是什么版本 Tab显示很特别啊 自己改的吗

6兄 我又来问问题了 sunny1大这段代码我大概明白逻辑 其实跟你在12楼给的方法差不多 但是实际效果上他的代码可以实现点击屏幕边缘自动显示/隐藏全部中文释义,还可以单独点击某句显示释义的效果 基本上可以替代js

6兄方不方便给讲一下这个代码如何套用在其他词典上 我自己水平很低 试着改了其他词典的参数上去根本不起作用

1 Like

6兄 私信你了 有空看看

1 Like