前端笔记

  • CSS制作留言聊天框中的冒泡尖角效果 纯色+边框技巧教程
    css技巧
    聊天框冒泡样式

    CSS制作留言聊天框中的冒泡尖角效果 纯色+边框技巧教程

    前言在前端切图过程中遇到一个制作聊天对话框中的箭头效果,如下图。在我还是一个CSS小白的时候,我都是用一个图片来制作这个冒泡效果的,显得很low,很没气质。教程效果演示以上2种效果是我们常见的样式。原理图样式一:这种比较简单,说一下步骤:1、我们写一个div,写出尺寸和圆角,并且设置position属性。2、用伪类::be
    稿件作者 CMS博客 2020-04-30 16:06 前端笔记
  • 用CSS做一个流光溢彩的文字特效
    CSS技巧
    流光溢彩文字

    用CSS做一个流光溢彩的文字特效

    前言之前看到一个网站的文字特效,觉得很酷,先看图:我这个静态截图看不出滚动效果,也懒的截GIF啦。我们动手来实现一下效果。实现代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"> 
    稿件作者 CMS博客 2020-04-15 16:11 前端笔记
  • CSS实现OSX风格的三个圆点
    CSS技巧
    三个圆点的技巧

    CSS实现OSX风格的三个圆点

    先看图,左上角OSX风格的圆点按照我之前的习惯,我会在div中放入一个span用作钩子,如下HTML结构:<divclass="box"><spanclass="dot"></span>正文内容</div>然后写入如下CSS:.box{position:relative;padding:40px20px20px;}.box
    稿件作者 CMS博客 2020-04-14 15:13 前端笔记