![](https://img-blog.csdnimg.cn/202103091943361.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 60
关于CSS知识的文章
I'm Mr.C
此时睡觉,你将做梦;此刻努力,你将圆梦。
展开
-
CSS实现元素翻转效果
翻转效果建议IOS系统、安卓系统、window系统都要进行实机测试,免得线上环境出现兼容问题。1、定义一个父元素,父元素中两个子元素,两个子元素分别是背面与正面,2、定义一个父元素,父元素中两个子元素,两个子元素分别是背面与正面,元素翻转的效果能让用户有良好的体验感。CSS实现元素翻转的效果有两种思路。原创 2023-02-04 11:56:05 · 4698 阅读 · 0 评论 -
flex布局的align-items与align-content
该文章主要描述的是align-content,并且与align-items的区别原创 2022-10-09 00:00:23 · 1400 阅读 · 0 评论 -
CSS3的filter属性
CSS——filter属性1、元素模糊2、元素亮度3、元素投影4、元素的灰色程度5、元素对比度6、元素颜色7、元素反转颜色8、元素透明程度9、元素饱和度10、元素的褐色 1、元素模糊 filter:blur(像素值) 像素值越高,元素越模糊 img{ filter:blur(10px); } /*HTML:*/ <img src="./1.jpg"></img> 效果: 2、元素亮度 filter:brightness(百分比); 100%是正常亮度,百分比越小,元素亮度原创 2021-09-05 18:26:53 · 746 阅读 · 0 评论 -
CSS效果——实现loading加载特效
CSS效果——实现loading加载特效 效果图: <!--制作一个圆--> <div class="circle"></div> <!--按钮——用于触发加载效果--> <input type="button" value="点击" onclick="submit()"> .circle{ width: 150px; height: 80px; border-radius: 100px 100px 0 0;原创 2021-06-25 22:18:56 · 359 阅读 · 0 评论 -
CSS弹性盒模型——display:flex
弹性盒模型 弹性盒模型也叫flex布局原创 2021-03-15 12:10:58 · 257 阅读 · 1 评论 -
CSS的@media——媒体查询
CSS的@media与@media screen可以运用到网页自适应中。 @media与@media screen的区别 @media与@media screen在效果上是没区别的。但实际上是在于设备上的区别,@media screen中的CSS样式在打印机设备是无效的,而@media的CSS样式是可以运用在打印机设备的。 Demo教程: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF原创 2021-02-26 14:45:04 · 347 阅读 · 0 评论 -
@keyframes规则——基础实现动画效果
CSS3创建动画 @keyframes规则的使用 @keyframes 自定义动画名称{规则} 例如: @keyframes custom_animation_name{from {font-size: 50px;}to {font-size: 300px;}} from是指动画开始的CSS样式,to是指动画结束的CSS样式。 from动画开始时字体大小为50px,动画结束时字体大小为300px。这就形成了一个动画的效果,字体由小变大的一个规则。 规则定义好后就该绑定标签 需要动原创 2020-07-18 01:33:16 · 959 阅读 · 0 评论