css动画和媒体查询(css使用定义动画)
animation实现动画主要由两个部分组成
通过类似Flash动画的关键帧来声明一个动画
在
animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
设置关键帧
@keyframes animationname{ 0%{ color:red; } 50%{ color:red; } 100%{ color:red; } } 复制代码关于keyframes浏览器兼容问题
写兼容的时候浏览器前缀放在@keyframes中间 如: @-webkit-keyframes,@-moz-keyframes
动画的属性
通常写出一个animation属性软件会自动生成很多属性
div { animation: name duration timing-function delay iteration-count direction fill-mode; /* name:名称 duration:持续时间 timing-function:函数 delay:延迟多久开始 iteration-count:播放次数(默认是1) infinite无限制 direction: 播放的方向 normal循环向前 alternate播放为偶数此则向前播放 fill-mode: 设置CSS动画在执行之前和之后如何将样式应用于其目标 */ } 复制代码媒体查询
not: not是用来排除掉某些特定的设备的,比如 @media not print（非打印设备）。only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。all: 所有设备，这个应该经常看到。
@media screen and (max-width: 480px) { /*当窗口小于400px时,背景颜色变成红色*/ body { background-color: red; } }
作者：小潘2233
链接：https://juejin.cn/post/7037528199634354212
伪原创工具 SEO网站优化 https://www.237it.com/