各种css的小特效的分享

词典及语言学习交流
28

outdated

29

specialty
specialty1437×768 159 KB

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

30

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

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

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

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

31

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

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

1 Like
32

image

这个喇叭也挺有个性的

33

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

image

35

image

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

37

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

38

unicode glyph list

还有这个帖子蛮好看

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

1 Like
40

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

42

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

43
  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 前：
    image
    image804×668 191 KB
  2. hover 进、hover出都是这图：
    image
    image804×668 204 KB
44

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

45

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

47

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

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

1 Like
49

6兄 私信你了 有空看看

1 Like