>>我要做特工系列 之 CSS 3_animation_向右滑出后下滑并停止
新手入门还没有正式发点啥东西，都是在装潢博客这个家了，到现在为止还是没有装修好。。熟悉了这边的发布规范之后会持续在这里记录，给自己留下学习的脚印~
这正式的第一篇随笔写个使用css3的动画效果。
总感觉电影里特工那种酷炫的应用界面很舒服，开始尝试用css3做一个，所以这是系列篇，名字就叫做 '我要做特工' 。之前没怎么深入过css3，就从这里开始吧，毕竟指望别人提供近似项目化的需求还给时间学习的机会不是很现实，自己动手丰衣足食嘛~
先看一下效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3</title>
<style>
div{
width:10px;
height:2px;
background:red;
} div:hover{/*这里绑定一个选择器，把cssSplit绑定到div:hover*/
/*animation:cssSplit 5s infinite；*/
/*animation-direction:alternate；*//*播放后反向播放一遍*/
animation:cssSplit 5s alternate;
animation-fill-mode:forwards;/*播放后停止在最后一帧*/
}
@keyframes cssSplit /* Firefox -moz-没加，csshack自己做呗*/
{
0% {background:red;width:10px;height:2px;}
10% {background:yellow;width:500px;height:2px;}
30% {background:yellow;width:500px;height:200px;}
100% {background:yellow;width:500px;height:200px;}
}
</style>
</head>
<body> <div></div> <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
</body>
</html>
Ps:布局和着色应该还会重新规制吧。。发一下试试，错位的感觉很强烈啊。。
-----
Ps:果然是着色还是得一次成功啊，不会自己重新绘制。。插个代码改了三次格式也是没谁了。。。
>>我要做特工系列 之 CSS 3_animation_向右滑出后下滑并停止的更多相关文章
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- CSS选择器从右向左的匹配规则
CSS选择器从右向左的匹配规则 下面这个栗子,CSS选择器它是如何工作的? .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则,可能的理解是从左向右匹配:先找到 ...
- 顽石系列：CSS实现垂直居中的五种方法
顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...
- 【03】emmet系列之CSS语法
[01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 单位: 有几个常用值别 ...
- 每日一译系列-模块化css怎么玩(译文)
原文链接:How Css Modules Work 原文作者是Preact的作者 这是一篇关于如何使用Css Modules的快速介绍,使用到的工具是Webpack吊炸的css-loader 首先,我 ...
- css3笔记系列-3.css中的各种选择器详解，不看后悔系列
点击上方蓝色字体,关注我 最详细的css3选择器解析 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...
- js判断手指的上滑，下滑，左滑，右滑，事件监听
原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY: 2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEn ...
- jquery左划出现删除按钮，右滑隐藏
jquery左侧划出显示删除按钮,右滑动隐藏删除按钮 <!doctype html> <html> <head> <meta charset="ut ...
- Taro UI开发小程序实现左滑喜欢右滑不喜欢效果
前言:年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到 ...
随机推荐
- SpringBoot Junit测试Controller
原文链接:https://blog.csdn.net/xiaolyuh123/article/details/73281522 import java.util.List; import org.sp ...
- iOS10 新特性-新功能，以及ReplayKit库
iOS的10.0 本文总结了iOS的10,运行于目前推出iOS设备推出的主要开发者相关的功能. iOS版10引入了新的方法来增加您的应用程序通过帮助系统参与在适当的时候建议你的应用程序给用户.如果你在 ...
- 记一次IIS应用程序域崩溃的原因
在日常工作中,每次新的功能上线前,我们会搭建一个测试环境提供给客户测试使用,确定无误后才会更新到正式环境上.这一次也不例外,在约定好时间地点,客户进行集中化测试的过程中,反应网站系统打不开,报500错 ...
- P1114 “非常男女”计划
题意:给你一个01串,求满足0和1总数相等的最大字串 $n\ \le\ 10^5$ 1.$O(n^3)$枚举起点终点,统计判断是否成立 2.$O(n^2)$先$O(n)$时间计算01个数的前缀和, ...
- 关于NSFetchedResultsController的一些用法
如何在iPhone等设备持久保存数据,需要用到Core Data,它能帮你快速而有效率的完成数据储存,Core Data 编程经常用到 NSFetchedResultsController这个类,刚开 ...
- 打谷机 BZOJ 1603 模拟
Farmer John有一个过时的打谷机(收割小麦),它需要带子来带动.发动机驱动轮1总是顺时针旋转的,用来带动转轮2,转轮2来带动转轮3,等等.一共有n(2<=n<=1000)个转轮(n ...
- kuangbin专题十六 KMP&&扩展KMP POJ2752 Seek the Name, Seek the Fame
The little cat is so famous, that many couples tramp over hill and dale to Byteland, and asked the l ...
- springmvc htmlEscape标签的作用
有些东西自己不知道就想要弄明白 唉 做项目 看人家项目中用到啦 不会 不知道 就百度啦 整理了一下 方便自己记忆 一.SpringMVC 表单元素标签 如下: <form:textarea ...
- ie7,ie8 js中变量名和页面元素ID重名，报错
js变量名和一个div的id重名,报错.不知所以然...做个标记
- poj1064 Cable master(二分)
Cable master 求电缆的最大长度(二分法) Description Inhabitants of the Wonderland have decided to hold a region ...