新手入门还没有正式发点啥东西，都是在装潢博客这个家了，到现在为止还是没有装修好。。熟悉了这边的发布规范之后会持续在这里记录，给自己留下学习的脚印~

这正式的第一篇随笔写个使用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_向右滑出后下滑并停止的更多相关文章

  1. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  2. CSS选择器从右向左的匹配规则

    CSS选择器从右向左的匹配规则 下面这个栗子,CSS选择器它是如何工作的? .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则,可能的理解是从左向右匹配:先找到 ...

  3. 顽石系列：CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  4. 【03】emmet系列之CSS语法

    [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写   单位: 有几个常用值别 ...

  5. 每日一译系列-模块化css怎么玩(译文)

    原文链接:How Css Modules Work 原文作者是Preact的作者 这是一篇关于如何使用Css Modules的快速介绍,使用到的工具是Webpack吊炸的css-loader 首先,我 ...

  6. css3笔记系列-3.css中的各种选择器详解，不看后悔系列

    点击上方蓝色字体,关注我 最详细的css3选择器解析 ​ 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...

  7. js判断手指的上滑，下滑，左滑，右滑，事件监听

    原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY: 2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEn ...

  8. jquery左划出现删除按钮，右滑隐藏

    jquery左侧划出显示删除按钮,右滑动隐藏删除按钮 <!doctype html> <html> <head> <meta charset="ut ...

  9. Taro UI开发小程序实现左滑喜欢右滑不喜欢效果

    前言:年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到 ...

随机推荐

  1. 树状数组 P3605 [USACO17JAN]Promotion Counting晋升者计数

    P3605 [USACO17JAN]Promotion Counting晋升者计数 题目描述 奶牛们又一次试图创建一家创业公司,还是没有从过去的经验中吸取教训--牛是可怕的管理者! 为了方便,把奶牛从 ...

  2. typeof 和 instanceof

    typeof 和 instanceof 都是用来判断类型的函数 typeof 对于原始类型来说,除了 null 都可以显示正确的类型 typeof 1 // 'number' typeof '1' / ...

  3. Windows自动化---模拟鼠标键盘

    1.PyUserInput(不推荐) python2可以使用PyUserInput库:(不推荐) 支持最基础的鼠标,键盘操作,可以剪贴. 安装的时候:pip install PyUserInput 需 ...

  4. kindedtor的基本使用

    首先需要进入官网下载kineditor相关文件: 然后写代码: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  5. js 点击页面出现烟花 心形

    css :1 body{width:1000px; height:500px;} input{ margin:100px; width:250px; height: 50px } 3 .Firewor ...

  6. 什么是Uboot

    U-Boot的全称是Universal Boot Loader,遵循GPL条款的开放源码项目. U-Boot的作用是系统引导. U-Boot目前不仅仅支持嵌入式Linux系统的引导(对Linux的支持 ...

  7. Java缓存类loadingCache

    <dependency> <groupId>com.google.guava</groupId> <artifactId>guava</artif ...

  8. newCachedThreadPool无上限线程池使用

    1. newCachedThreadPool无上限线程池,   动态根据代码添加线程,   如果线程空闲60秒没有被使用,会自动关闭 package ThreadTest; import java.u ...

  9. Linux学习grep,sed,awk工具的使用

    1.grep:根据模式搜索文本并将符合模式的文本显示出来(pattern模式:由文本字符和正则表达式元字符所匹配出来的条件) 注:alias grep='grep --color' -c:打印符合要求 ...

  10. java——并查集 UnionFind

    时间复杂度: O(log*n),近乎是O(1)级别的 UnionFind 接口: public interface UF { int getSize(); boolean isConnected(in ...