关键字:CSS
  • 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 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 如果浮动非替换元素,则要指定一个明确的宽度;否 ...
  • web前端学习之《html5与css3权威指南》怎么样?
    HTML5与CSS3权威指南非常不错,它是目前市场上最权威的HTML5与CSS3实战教程,详细的讲述了html 5和css3的所有新功能和新特性,技术新颖,实战性能,再配以精彩的案例讲解,能够帮助用户快速掌握HTML5与CSS3编程技巧。 ...
  • 旋转木马轮播图
    效果 介绍 支持pc、移动端 pc左右箭头控制 移动端左右滑动 兼容性 ie >= 10 其他主流浏览器都支持 使用文档: <link rel="stylesheet" href="../css/3dSwiper ...
  • css3 让width随方向变化
    GIF.gif 利用这种特性可以做出下面这个动画 GIF.gif 源码 <meta name=" ...

暂无数据