随笔分类 -  css

css实现筛子3d旋转动画
摘要：##代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css实现筛子动画</title> </head> <body> <div class="wrapper"> <div class="box1"> < 阅读全文
posted @ 2020-09-24 10:17 爱喝可乐的靓仔 阅读(575) 评论(0) 推荐(3)
css利用flex布局画骰子的六个面
摘要：主要是利用flex的一些特性来写的，掌握好flex基础，写出筛子的几个页面不是问题。 推荐去我写的一个博客中有flex的小练习 线上练习flex布局 html <body> <div class="shaizi"> <div class="top"> <div class="box1 box"> < 阅读全文
posted @ 2020-09-24 09:55 爱喝可乐的靓仔 阅读(1685) 评论(0) 推荐(3)
css知识点
摘要：##1.清除浮动的方法 方法一：给父级div定义 高度 原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。 优点：代码简洁 缺点：高度被固定死了，是适合内容固定不变的模块。 方法二：使用空元素，如<div class="clear"></div> (.clear{ 阅读全文
posted @ 2020-09-16 11:14 爱喝可乐的靓仔 阅读(152) 评论(0) 推荐(1)
8个惊人的HTML按钮悬停hover效果
摘要：##一.发送效果 ###HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> </div> ###css #send-btn{ display: flex; align-items: center; justify-conte 阅读全文
posted @ 2020-09-15 10:42 爱喝可乐的靓仔 阅读(6183) 评论(0) 推荐(4)
常用的css样式
摘要：##1.设置input 的placeholder的字体样式 input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red; } input::-moz-placeholder { /* Firefox 19+ */ c 阅读全文
posted @ 2020-09-11 14:53 爱喝可乐的靓仔 阅读(134) 评论(0) 推荐(1)
纯CSS绘制三角形
摘要：纯CSS绘制三角形（各种角度）,前阵子做的设计图里面有用到三角形，以前自学的时候漏掉了，暂且放这儿看看吧~通过改变border宽度 可以得到各种不同形状的三角形 ##html部分 //选择对应朝向的三角形的样式 赋值给clsaa即可 <div class="trian"> <div class="赋 阅读全文
posted @ 2020-08-31 15:54 爱喝可乐的靓仔 阅读(167) 评论(0) 推荐(1)
纯css实现盒子3d旋转效果
摘要：纯css实现盒子 3D 旋转效果 平时看到动画下意识就觉得很难，出于畏惧心理老是不敢去碰，就像看到一个漂亮女生不敢上去搭讪，不过嘛， 再难得东西都是禁不住你死缠烂打的（追姑娘同理 哈哈哈。。）所以现在就从头理理，这个3d效果究竟是怎么实现的。 预览效果 基础知识 首先，css里关于 3D 最基础的东 阅读全文
posted @ 2020-08-28 09:40 爱喝可乐的靓仔 阅读(2609) 评论(0) 推荐(3)