css3
专业前端小白
这个作者很懒,什么都没留下…
展开
-
css实现波浪进度条动画
效果图代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> *{ margin: 0; padding: 0; box-sizing: border-box;.原创 2021-09-18 13:47:59 · 993 阅读 · 0 评论 -
div+css实现圆形loading动画,渐变拖尾动画
先来上个效果图:思路:使用渐变背景色来实现渐变拖尾,再使用两个圆形div来实现圆弧,拖尾最前端的圆形是用的一个圆形定位到固定位置实现的。全部代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0".原创 2021-02-26 17:29:20 · 1968 阅读 · 0 评论 -
纯div+css实现翻书loading
效果图:话不多说,直接上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css3实现翻书效果</title> <link href="reset.css" rel="stylesheet" type="text/css"> <style> *{原创 2020-09-03 17:48:23 · 448 阅读 · 0 评论 -
CSS3 :nth-child() 选择器
规定属于其父元素的第三个子元素的每个 p 的背景色:<h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p> css3为:p:nth-原创 2018-07-18 12:15:48 · 176 阅读 · 0 评论 -
div+css制作菱形
受益于以为大神的启发,使用border的方式制作菱形图案 <div style="float:left;border-width:25px;border-color:#727171 #9fa0a0 #9fa0a0 #727171;border-style:solid"></div> <div style="float:left;...原创 2019-05-14 16:20:22 · 4420 阅读 · 0 评论