前端之HTML和CSS基础
关注
分享
扫一扫
文章平均质量分 54
主要记录前端代码编写过程中遇到的关键点
进阶路
好柿发生
展开
-
(7)开机动画2D版，开机动画3D版
1、开机动画2D版 效果图： 注意点： 尽量不要操作body元素，可以设置一个div来继承body的宽高，以此模拟body transform只对块级元素生效，span为内联元素，若要移动span的位置通过定位来实现 源代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/c原创 2022-05-23 19:58:05 · 262 阅读 · 0 评论 -
(6)三棱柱3D实现、多棱柱3D实现
效果图： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box1{ width: 400px; height: 400px; border.原创 2022-05-21 15:06:54 · 710 阅读 · 0 评论 -
(5)立方体3D实现
backface-visibility：属性用来设置 是否显示元素的背面，默认是显示的。原创 2022-05-20 14:28:54 · 202 阅读 · 0 评论 -
(4)时钟实现
效果图： 注意点： 一般情况下，css样式都是通过link引入的，所以此时我们要创建我们自己的style标签 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .ci原创 2022-05-18 17:20:43 · 152 阅读 · 0 评论 -
(3)扇形导航实现
css+js实现扇形导航图 过渡和2D变形transform原创 2022-05-17 13:20:08 · 233 阅读 · 0 评论 -
(2)polo360页面实现
目录结构： polo.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css原创 2022-04-30 17:55:47 · 1064 阅读 · 0 评论 -
(1)垂直外边距重叠问题与解决方案、父子元素高度塌陷问题与解决方案
多种方式解决垂直外边距重叠与父子元素高度塌陷问题原创 2022-04-25 19:27:13 · 708 阅读 · 0 评论