随笔分类 -  css类

一些常用到的css
鼠标经过图片，图片翻转显示另一张图片
摘要：当鼠标移入外层的div盒子子时,图片会翻转180度,并且显示图片的背面(即第二张图片)。 效果如下： 代码： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <style> .CIC 阅读全文
posted @ 2020-07-10 16:39 老和尚106 阅读(1593) 评论(0) 推荐(0)
css鼠标hover时，背景色动态效果
摘要：在鼠标hover时，让button的背景色从上到下出现。 效果： Html: <a href="###" class="join">加入我们，看到自己更多可能</a> Css: a.join{display: inline-block;height: 60px;line-height: 58px;f 阅读全文
posted @ 2020-05-27 15:22 老和尚106 阅读(1286) 评论(0) 推荐(0)
6种css3鼠标滑过图片动画效果
摘要：6种css3鼠标滑过图片动画效果 效果： Html代码： <html> <head> <meta charset="utf-8" /> <title>6种css3鼠标滑过动画效果</title> <style type="text/css"> /*****全局样式*****/ * { padding 阅读全文
posted @ 2020-05-27 10:48 老和尚106 阅读(1129) 评论(0) 推荐(0)
利用flex布局超简单实现瀑布流排版
摘要：利用flex布局超简单实现瀑布流排版 效果： Html代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial 阅读全文
posted @ 2020-05-27 10:03 老和尚106 阅读(10410) 评论(1) 推荐(0)
css 自定义checkbox多选复选框样式
摘要：今天在做项目的时候有需要用到多选框，并且因为ui的关系，需要稍微美化一下多选框，所以找到了实现方法，挺实用的，不需要脚本就能实现。 我这个是用背景图片的原理实现的，如果不喜欢这个样式，直接更换背景图就可以了 效果： Html： <input type="checkbox"/> <input type 阅读全文
posted @ 2020-05-27 09:38 老和尚106 阅读(1027) 评论(0) 推荐(0)
CSS控制文字，单行/多好超出部分显示省略号...
摘要：有时为了避免文本文字内容超出一定宽度后溢出，我们想要溢出的部分不显示但用省略号.....显示，这个时候我们可以使用CSS text-overflow文本溢出省略号属性样式实现。 单行文本的溢出显示省略号: overflow: hidden; text-overflow:ellipsis; white 阅读全文
posted @ 2020-05-26 17:54 老和尚106 阅读(327) 评论(0) 推荐(0)