关键字:CSS
  • web前端入门到实战:CSS3 简单的砸金蛋样式
    实现样式: 1、鼠标移入后,鼠标样式图标变为“锤子”。 2、用户砸金蛋,锤子简单的扬起效果。 3、砸碎金蛋,显示内容。 分析实现步骤: 1、在html中插入一颗金蛋 找一张静态图片或带一点效果的动态图,直接放入img标签即可。 2、鼠标移入 ...
  • 【Jetty 用法总结】如何使用 WebAppContext 提供静态资源
    文章首发于公众号【大数据学徒】,感兴趣请搜索 dashujuxuetu 或者文末扫码关注。 如题所述,本文介绍如何通过 Jetty 的 WebAppContext 类来提供 html 等静态资源。 内容提要: 环境说明 初始化项目 静态资 ...
  • 前端特效的似是而非
    让用户看起来是这样,而非实现起来一定是这样。 写特效时经常被逻辑思维所牵绊,A元素B元素分的太清了,反而麻烦。 最近在网上找了一些自己喜欢例子。 1. effect.gif html结构 ...
  • web前端入门到实战:CSS实现圆形进度条
    示例图 结构 首先一个父级div设置相对定位,内部含有四个半圆div和一个用于遮罩的小圆div 实现步骤 先写出基本html结构 <div clas ...
  • web前端入门到实战:3步实现小程序第一次打开提示“添加到我的小程序”
    本文例子也以Taro代码为示例,如果你用小程序语言、uni-app等框架也不用担心,因为原理是一样的。 一、理解设计原理 问题的关键在于“如何判断第一次打开”,有两种方法: 1、打开页面后本地存一个flag到session; 2、和服务器交 ...
  • web前端入门到实战:纯CSS画动态彩虹
    效果 效果图如下 实现思路 使用box-shadow画赤橙黄绿蓝靛紫7个弧形,拼接在一起 after伪元素写投影样式 彩虹和投影都有动画 dom结构 用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写彩虹的样式。 <div c ...
  • web前端入门到实战:纯CSS写一个动态太阳的天气图标
    效果 效果图如下 实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写太阳的一条光 ...
  • web前端入门到实战:纯CSS制作电闪雷鸣的天气图标
    效果 效果图如下 实现思路 使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构 用两个嵌套的div容器就可以了,父容器来控制图标显示 ...
  • web前端入门到实战:html,css制作九宫格
    绘制九宫格 要求:九宫格垂直居中于页面,只能使用ul和li标签,添加背景边框 代码 九宫格 要求: 1:不能修改标签,仅通过 css 实现效果 ...
  • web前端入门到实战:HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法
    元素浮动定义 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 如果浮动非替换元素,则要指定一个明确的宽度;否 ...

暂无数据