专业编程基础技术教程

网站首页 > 基础教程 正文

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

ccvgpt 2024-11-16 17:36:01 基础教程 11 ℃

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


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

CSS3实战小技巧--使用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>

总结

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

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

Tags：

猜你喜欢

最近发表
标签列表