css ltimg gt只适应,css3动画,CSS3实战小技巧--使用CSS变量实现波浪动画

css3动画，CSS3实用技巧——利用CSS变量实现波浪动画。今日头条新闻(www.leadip.com)为您带来相关内容的详细介绍。

CSS3实用技巧——用CSS变量实现波浪动画

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

声明css变量时，在变量名前添加两个连词(-)。变量名区分大小写，并且-ft-size和-ft-size是两个不同的变量。变量值可以是纯数字，也可以是单位

-英尺-尺寸:30；-Ft-尺寸:30pxvar()函数用于读取变量。var()函数也可以使用第二个参数来表示变量的默认值。如果变量不存在，将使用默认值。第二个参数不处理内部逗号或空，它被视为参数的一部分

font-size: var( - size，30px)；如果变量值是字符串，它可以与其他字符串拼接

-尺寸:24px字体大小:var(-size)；如果变量值是数值，则不能直接与数值单位一起使用。您必须使用calc()函数来连接它们

如果变量值是数值，则不能直接与数值单位一起使用。您必须使用calc()函数来连接它们

-尺寸:30；font-size:calc(var(-size)* 1px)；变量中有局部变量和全局变量

。txt1 {/*声明一个纯值为*/-size: 30的局部变量；font-size:calc(var(-size)* 1px)；}.txt2 {/*声明一个局部变量，单位*/-大小:24px字体大小:var(-size)；}您可以使用@supports命令检查浏览器是否与css变量兼容

const isSupported = window。CSS &&窗口。支持&&窗口。CSS . supports(& # 39；-a & # 39；,0);If(isSupported) {/*这是支持css变量的操作*/}else {/*这是不支持css变量的操作*/}JavaScript操作css变量的方式*/}

//设置变量document . queryselector(& # 39；p & # 39. style . set property(& # 39；-重量& # 39；,'bold & # 39);//读取变量document . queryselector(& # 39；p & # 39. style . getpropertyvalue(& # 39；-重量& # 39；);//删除变量document . queryselector(& # 39；p & # 39. style . remove property(& # 39；-重量& # 39；);实战代码

Title

总结& lt！DOCTYPE html&gt。& lthtml lang = & # 34恩& # 34；& gt& lthead&gt。& ltmeta charset = & # 34UTF-8 & # 34；& gt& lt标题&gt。标题&lt。/title&gt。& ltstyle&gt。正文{背景色:# 1a7156高度:100vh显示:flex对齐-项目:居中；证明内容:中心；} img { width:45px；动画:hjAnimate 1s轻松进出无限；动画-延迟:calc(var(-I)* 0.1s)；} @关键帧hjAnimate { 0% { transform:translateY(0)；} 20% { transform:translateY(-50px)；} 40%，100% { transform:translateY(0)；} } & lt/style&gt。& lt/head&gt。& ltbody&gt。& ltdiv&gt。& ltimg src = & # 34huaji.png & # 34style = & # 34-我:1 & # 34；& gt& ltimg src = & # 34huaji.png & # 34style = & # 34-我:2 & # 34；& gt& ltimg src = & # 34huaji.png & # 34style = & # 34-我:3 & # 34；& gt& ltimg src = & # 34huaji.png & # 34style = & # 34-我:4英镑。& gt& ltimg src = & # 34huaji.png & # 34style = & # 34-我:5英镑。& gt& ltimg src = & # 34huaji.png & # 34style = & # 34-我:6英镑。& gt& lt/div&gt。& lt/body&gt。& lt/html&gt。摘要

学以致用，每天积累一点，每天开心一点。

作者:技术小米版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。

总结:以上内容是对css3动画和css3实用技巧的详细介绍——利用css变量实现波浪动画。文章内容部分转载自网络，希望能帮助大家了解CSS3动画，提供参考价值。