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

这正式的第一篇随笔写个使用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. java中抽象类与接口

    1.抽象类是类,它的子类不能再继承其它类了,但可以实现一个和多个接口.接口不是类,它的子接口可以继承多个接口.2.抽象类中是可以有不用abstract修饰的方法,而接口中只能有抽象方法,即方法都要用a ...

  2. 一些优秀的Firefox扩展

    AdBlock Plus 拦截广告. 在对付CSDN等垃圾网站时非常有用. Block Site 拦截你不想看的网站 没有知乎的一天真好... XStyle 设置自己喜欢的CSS样式(表示自己并不会用 ...

  3. SwiftMailer 发送邮件时 提示fsockopen() 被禁用

    站点转移空间,发送邮件的SwiftMailer 类提示错误如下: Warning: fsockopen() has been disabled for security reasons in D:\1 ...

  4. [PowerShell]template engine

    今天讨论的是如何在Powershell里实现一个简单的Template Engine的功能. 假设模板文件的内容如下:template.tt hello $name welcome $company ...

  5. nginx FastCGI模块配置

    这个模块允许nginx同FastCGI协同工作,并且控制哪些参数将被安全传递. location / { fastcgi_pass localhost:9000;# 或者http://ip:9000; ...

  6. java程序员的从0到1：@Resource与@Autowired的比较

    目录: 1.@Resource与@Autowired的源码分析 2.@Resource与@Autowired的相同点 3.@Resource与@Autowired的不同点 正文: 1.@Resourc ...

  7. C语言的存储类别和动态内存分配

    存储类别分三大类: 静态存储类别 自动存储类别 动态分配内存 变量.对象--->内存管理 内存考虑效率(时间更短.空间更小) 作用域 链接.---->空间 存储器   ----->时 ...

  8. 求用1g、2g、3g的砝码(每种砝码有无穷多个)称出10g的方案有几种

    #include <iostream> using namespace std; // ; // sup是保存多项式的数组,sup[n]中的值代表指数为i的系数 ,下标i是x的指数 // ...

  9. 读书印记 - 《文革前的邓小平：毛XX的副帅》

    开始看才发现这居然是本学术著作,阅读难度系数比小说.传记要很多,相比于小说的人物心理.传记的故事套路,这本书的基本写法是举一大坨材料来描述当时的事实然后稍微发表一点学术观点.....我对这个内容本身挺 ...

  10. 关于WampServer一些配置修改

    1.解决WAMP mysql中文乱码问题(在mysql的my.ini文件中) 1).找到client字段并添加:default-character-set=utf8 2).找到mysql字段并添加: ...