作者：绿香源酥脆冬枣 | 来源：互联网 | 2023-09-03 13:05
animation动画&＃xff1a;
可以设置多个节点来控制一个或 一组动画&＃xff0c;动画可以实现更多变化&＃xff0c;更多控制&＃xff0c;连续自动播放等效果。动画的使用分两步&＃xff1a;1、定义动画 2、调用动画&＃xff08;调用必须写调用名称和持续时间)&＃xff0c;其属性&＃xff1a;
<style>&＃64;keyframes animation_width {0% {width: 10px;}50% {width: 200px;}100% {width: 10px;}}div {width: 100px;height: 100px;background: yellow;animation-name: animation_width;animation-duration: 2s;}style><body><div>div>body>
Animate.css动画插件&＃xff1a;
Animate.css插件是一款丰富的css动画插件&＃xff0c;里面提供很多css动画&＃xff0c;相关教程请查阅官网&＃xff1a;https://animate.style
浏览器私有前缀&＃xff1a;
老版本浏览器解析CSS3代码会有兼容性问题&＃xff0c;此时在某些属性前面添加浏览器私有前缀可以解决此问题。
<style>div {width: 100px;height: 100px;background-color: #555555;border-radius: 20px;-webkit-border-radius: 20px;-ms-border-radius: 20px;-moz-border-radius: 20px;-o-border-radius: 20px;}style>
text-shadow文字阴影&＃xff1a;
text-shadow&＃xff1a;给文字添加阴影效果&＃xff0c;第一个参数表示水平方向阴影移动的距离&＃xff0c;第二个参数值表示垂直方向阴影移动的距离&＃xff0c;第三个参数表示阴影模糊程度&＃xff0c;第四个参数表示阴影的颜色&＃xff0c;其属性值&＃xff1a;
<style>p {text-shadow: 5px 5px 2px yellow;}style>
CSS参考手册&＃xff1a;
推荐css88这个网站来快速查询css相关知识&＃xff0c;其官方网站&＃xff1a;http://css.doyoe.com
提示&＃xff1a;本文图片等素材来源于网络&＃xff0c;若有侵权&＃xff0c;请发邮件至邮箱&＃xff1a;810665436&＃64;qq.com联系笔者 删除。
笔者&＃xff1a;苦海
京公网安备 11010802041100号