当前位置:首页 > 教育 >

css3小技巧(css3最佳使用方法)

来源:原点资讯(m.360kss.com)时间:2024-05-18 15:17:39作者:YD166手机阅读>>

css3小技巧,css3最佳使用方法(1)

CSS3实战小技巧--使用CSS变量实现波浪动画

css3小技巧,css3最佳使用方法(2)

2017年3月,微软宣布 Edge 浏览器将支持 CSS 变量,这个重要的 CSS 新功能,所有主要浏览器已经都支持了

声明css变量的时候,变量名前面要加两根连词线(--)。变量名大小写敏感, --ft-size和 --Ft-size 是两个不同变量。变量的值既可以是纯数字,也可以有单位

--ft-size: 30; --Ft-size: 30px;

var()函数用于读取变量。var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。第二个参数不处理内部的逗号或空格,都视作参数的一部分

font-size: var(--size,30px);

如果变量值是一个字符串,可以与其他字符串拼接

--size: 24px; font-size: var(--size);

如果变量值是数值,不能与数值单位直接连用。必须使用calc()函数,将它们连接

如果变量值是数值,不能与数值单位直接连用。必须使用calc()函数,将它们连接

--size: 30; font-size: calc(var(--size) * 1px);

变量存在局部变量与全局变量

.txt1 { /* 声明一个纯数值的局部变量 */ --size: 30; font-size: calc(var(--size) * 1px); } .txt2 { /* 声明一个有单位的局部变量 */ --size: 24px; font-size: var(--size); }

可以使用@supports命令检测浏览器是否兼容css变量

const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a',0); if(isSupported) { /* 这里面是支持css变量的操作 */ }else { /* 这里面是不支持css变量的操作 */ }

JavaScript操作css变量的写法

//设置变量 document.querySelector('p').style.setProperty('--weight','bold'); //读取变量 document.querySelector('p').style.getPropertyValue('--weight'); //删除变量 document.querySelector('p').style.removeProperty('--weight');实战代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background-color: #1a7156; height: 100vh; display: flex; align-items: center; justify-content: center; } img { width: 45px; animation: hjAnimate 1s ease-in-out infinite; animation-delay: calc(var(--i) * 0.1s); } @keyframes hjAnimate { 0% { transform: translateY(0); } 20% { transform: translateY(-50px); } 40%,100% { transform: translateY(0); } } </style> </head> <body> <div> <img src="huaji.png" style="--i:1"> <img src="huaji.png" style="--i:2"> <img src="huaji.png" style="--i:3"> <img src="huaji.png" style="--i:4"> <img src="huaji.png" style="--i:5"> <img src="huaji.png" style="--i:6"> </div> </body> </html>总结

学以致用,每日累积一点点,每天快乐一点点。

作者:技术大黍
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

,

栏目热文

css3新手教学(css3基础笔记全套)

css3新手教学(css3基础笔记全套)

PHP是世界上最好的语言,这是一个老梗。有不少学习PHP的程序员后来去做了前端开发,毕竟近些年前端开发还是蛮吃香的。学习...

2024-05-18 15:24:18查看全文 >>

css3基本语法(css3中文使用手册)

css3基本语法(css3中文使用手册)

text-shadowtext-shadow支持文字阴影功能,简单利用CSS3属性增加文字的质感而不须使用任何图片语法:...

2024-05-18 15:12:49查看全文 >>

css3入门到精通系列(css3初学者入门视频)

css3入门到精通系列(css3初学者入门视频)

了解 Vue 应用应用实例每个Vue应用都是通过 createApp 函数创建一个新的应用实例. import { cr...

2024-05-18 15:07:01查看全文 >>

css3基本入门(css3基础知识详解)

css3基本入门(css3基础知识详解)

点击右上方红色按钮关注“web秀”,让你真正秀起来前言说起CSS3动画,就必须说说 transform,translat...

2024-05-18 15:06:37查看全文 >>

css图片居中(css图片如何上下居中)

css图片居中(css图片如何上下居中)

CSS 是前端里面的基础之一,也是非常重要的一部分,它往往决定了你所做出来的网页页面是否美观。在设计网页页面的过程中,总...

2024-05-18 15:05:32查看全文 >>

css3教程网站(css3基础知识)

css3教程网站(css3基础知识)

何谓HSLHSL色彩模式:就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改...

2024-05-18 15:07:27查看全文 >>

爆炒五香虾尾正宗做法(家常爆炒虾尾的做法大全)

爆炒五香虾尾正宗做法(家常爆炒虾尾的做法大全)

大家好,我是大叔爱生活美食,每天分享几道好吃的家常菜美食,和你一起交流和学习,昨天外面买了点虾尾,给孩子们补补,做一道爆...

2024-05-18 15:27:08查看全文 >>

爆炒五香虾尾的家常做法(麻辣爆炒虾尾家常做法)

爆炒五香虾尾的家常做法(麻辣爆炒虾尾家常做法)

大家好,我是大叔爱生活美食,每天分享几道好吃的家常菜美食,和你一起交流和学习,最近几天下雪,外面都是白茫茫的一片,真的是...

2024-05-18 15:06:07查看全文 >>

高考英语万能词组汇总(高考英语词组重点归纳)

高考英语万能词组汇总(高考英语词组重点归纳)

1. 一周两次 twice a week2. 两倍那么多:twice as many as ,twice bigger ...

2024-05-18 15:21:14查看全文 >>

文档排行