随笔分类 -  CSS

一些css中常见
实现转动的时钟
摘要：HTML： <div class="clock"> <div class="outer-clock-face"> <div class="marking marking-one"></div> <div class="marking marking-two"></div> <div class="m 阅读全文
posted @ 2021-08-03 14:00 zaijinyang 阅读(131) 评论(0) 推荐(0)
CSS绘制标签导航栏
摘要：html: <div class="bruce flex-ct-x"> <div class="tab-navbar"> <input type="radio" name="tabs" id="tab1" hidden checked> <input type="radio" name="tabs" 阅读全文
posted @ 2020-01-15 14:54 zaijinyang 阅读(509) 评论(0) 推荐(0)
CSS绘制三维立方体
摘要：html： <div class="bruce flex-ct-x"> <div class="td-cube"> <ul> <li class="front">1</li> <li class="back">2</li> <li class="top">3</li> <li class="bott 阅读全文
posted @ 2020-01-15 14:51 zaijinyang 阅读(601) 评论(0) 推荐(0)
CSS绘制状态悬浮球
摘要：html： <div class="bruce flex-ct-x"> <div class="state-ball warning"> <div class="wave"></div> </div> </div> css： .state-ball { overflow: hidden; posit 阅读全文
posted @ 2020-01-15 14:49 zaijinyang 阅读(908) 评论(0) 推荐(0)
CSS绘制气泡背景墙
摘要：<div class="bruce"> <ul class="bubble-bgwall"> <li>Love</li> <li>Love</li> <li>Love</li> <li>Love</li> <li>Love</li> <li>Love</li> <li>Love</li> <li>L 阅读全文
posted @ 2020-01-15 14:45 zaijinyang 阅读(647) 评论(0) 推荐(0)
CSS实现一个粒子动效的按钮
摘要：html： <button class="button">Button</button> css： .button { display: inline-block; padding: 1em 2em; background-color: #ff0081; color: #fff; border-ra 阅读全文
posted @ 2020-01-10 15:39 zaijinyang 阅读(479) 评论(0) 推荐(1)
CSSTab栏下划线跟随效果
摘要：神奇的 ~ 选择符 对于当前 hover 的 li ，其对应伪元素的下划线的定位是 left: 100%，而对于 li:hover ~ li::before，它们的定位是 left: 0。 ul li { float: left; width: 20%; height: 60px; line-hei 阅读全文
posted @ 2019-12-20 11:28 zaijinyang 阅读(2587) 评论(0) 推荐(0)
div水平垂直居中
摘要：第一种： 使用绝对定位，确定div的宽高，margin分别为div宽高的一半负值（父级相对定位） 代码： div { width: 400px; height: 400px; background: blue; position: absolute; left: 50%; top: 50%; mar 阅读全文
posted @ 2019-12-03 16:06 zaijinyang 阅读(193) 评论(0) 推荐(0)