随笔分类 -  前端学习

学习 CSS 之用 CSS 3D 实现炫酷效果
摘要：一、前言 把大象关进冰箱需要几步？三步，把冰箱门打开，把大象关进去，把冰箱门关上。 用 CSS 实现 3D 效果需几步？三步，设置透视效果 perspective，改变元素载体为 preserve-3d，对元素进行 3D 转换操作。 perspective 属性决定了我们从什么地方查看元素，定义时的 阅读全文
posted @ 2020-03-18 14:44 onionono 阅读(1565) 评论(0) 推荐(0)
学习CSS之如何改变CSS伪元素的样式
摘要：一、CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果。 伪元素的用法如下： selector:pseudo-element {property:value;} CSS 类也可以和伪元素搭配使用 selector.class:pseudo-element {property:value;} 二 阅读全文
posted @ 2020-02-24 13:00 onionono 阅读(1967) 评论(0) 推荐(0)
学习CSS之用CSS实现时钟效果
摘要：一、机械时钟 1.最终效果 用 CSS 绘制的机械时钟效果如下： HTML 中代码结构为： <body> <div class="clock"> <ul class="min"></ul> <ul class="hour"></ul> <ul class="numbers"></ul> <ul cl 阅读全文
posted @ 2020-02-23 15:00 onionono 阅读(8590) 评论(0) 推荐(2)
学习CSS之用CSS绘制一些基本图形
摘要：一、三角形 如下图，通过设置 border 的大小和颜色可以形成四个三角形： 上图对应的代码为： /* 三角形 */ .triangle { width: 0; height: 0; border-top: 100px solid green; border-right: 100px solid r 阅读全文
posted @ 2020-02-15 09:10 onionono 阅读(472) 评论(1) 推荐(1)