初探keyframes-animation

atinosun 发布于2019-08-01 15:59 / 1460人阅读

摘要：被称为关键帧，类似于中的关键帧。当然之前要对有一丢丢了解的最好。浏览器支持情况给出这样慕课上的简单鼠标悬浮时有弹动效果自己有调整一下变形与动画鼠标放在我身上鼠标放在我身上中关于的效果与代码

keyframes被称为关键帧，类似于flash中的关键帧。在Css3中主要以@keyframes坐开头，后面接着是动画名称+{}，“{}“中就是不同时间段的样式规则了。当然之前要对transition有一丢丢了解的最好。语法例如：

@keyframes changecolor{

0%{background:red;}

100{background:blue;}

}

@keyframes中的规则可以是多个百分比，在0%~100%之间，在每个百分比的花括号内写自己需要的样式，从而达到在不断变化的效果。当然，也可以用关键词from，to代替，0%对应from,100%对应to,也就是”从“一个效果”到“另一效果，这个还是比较好理解的。

浏览器支持情况W3C给出这样：

慕课上的简单demo:鼠标悬浮时有弹动效果（自己有调整一下）

style.css:

@keyframes wobble { 

 0% { margin-left: 100px; background:green; } 

 40% { margin-left:150px; background:orange; } 

 60% { margin-left: 75px; background: blue; } 

 100% { margin-left: 100px; background: red; }

 } 

div { margin-left: 100px; width: 100px; height: 100px; background:red; color: #fff; } 

div:hover{ animation: wobble 5s ease .1s; }

index.html:

    
    
     
    
    变形与动画
    
     
    
    鼠标放在我身上

鼠标放在我身上
W3C中关于keyframes的效果与代码：

http://www.w3school.com.cn/ti...

GPU云服务器云服务器初探webrtc webrtc技术初探初探腾讯云存储网关 SQL存储过程初探

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50244.html

初探keyframes-animation

摘要：被称为关键帧，类似于中的关键帧。当然之前要对有一丢丢了解的最好。浏览器支持情况给出这样慕课上的简单鼠标悬浮时有弹动效果自己有调整一下变形与动画鼠标放在我身上鼠标放在我身上中关于的效果与代码 keyframes被称为关键帧，类似于flash中的关键帧。在Css3中主要以@keyframes坐开头，后面接着是动画名称+{}，{}中就是不同时间段的样式规则了。当然之前要对transition...

AZmake 2019-08-30 15:45 评论0 收藏0
web安全初探

摘要：安全初探攻击攻击全称跨站脚本攻击，是为不和层叠样式表的缩写混淆，故将跨站脚本攻击缩写为，是一种在应用中的计算机安全漏洞，它允许恶意用户将代码植入到提供给其它用户使用的页面中。 web安全初探 XSS攻击 XSS攻击全称跨站脚本攻击，是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种在web应用中的计算机安全...

Y3G 2019-08-23 15:56 评论0 收藏0
web安全初探

摘要：安全初探攻击攻击全称跨站脚本攻击，是为不和层叠样式表的缩写混淆，故将跨站脚本攻击缩写为，是一种在应用中的计算机安全漏洞，它允许恶意用户将代码植入到提供给其它用户使用的页面中。 web安全初探 XSS攻击 XSS攻击全称跨站脚本攻击，是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种在web应用中的计算机安全...

xuhong 2019-08-02 14:30 评论0 收藏0
PHP socket初探 --- 含着泪也要磕完libevent（三）

摘要：无数个专业送给啦啦啦啦，开始码注意，将监听设置为非阻塞模式这里值得注意，我们声明两个数组用来保存事件和连接欢迎来到聊天室发言注意遵守当地法律法规使用全局的和非阻塞模式下，注意的写法会稍微特殊一些。原文地址：https://t.ti-node.com/thread/... 这段时间相比大家也看到了，本人离职了，一是在家偷懒实在懒得动手，二是好不容易想写点儿时间全部砸到数据结构和算法那里...

suxier 2019-07-01 10:56 评论0 收藏0
初探 Swoole -- 用 Swoole 启动一个 hello world

摘要：目录初探用启动一个内存的妙用终于可以啦初级应用实现用户注册登录撰写中展望的局限性分析及我个人的期待撰写中还记得我们第一个程序吗把他保存到访问就可以输出很多人就是这两行代码引入了的大门我们用来做一个看出了吧不依赖框架等机目录初探 Swoole -- 用 Swoole 启动一个 hello world 内存的妙用 -- PHP终于可以 vs JAVA啦初级应用 -- 实现用户注册登...

APICloud 2019-06-27 14:10 评论0 收藏0