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

这正式的第一篇随笔写个使用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. [USACO08FEB]酒店Hotel 线段树 BZOJ 1593

    题目描述 The cows are journeying north to Thunder Bay in Canada to gain cultural enrichment and enjoy a ...

  2. CF1101A Minimum Integer 模拟

    题意翻译 题意简述 给出qqq组询问,每组询问给出l,r,dl,r,dl,r,d,求一个最小的正整数xxx满足d∣x d | x\ d∣x 且x̸∈[l,r] x \not\in [l,r]x̸∈[l ...

  3. 洛谷P1894 [USACO4.2]完美的牛栏The Perfect Stall

    题目描述 农夫约翰上个星期刚刚建好了他的新牛棚,他使用了最新的挤奶技术.不幸的是,由于工程问题,每个牛栏都不一样.第一个星期,农夫约翰随便地让奶牛们进入牛栏,但是问题很快地显露出来:每头奶牛都只愿意在 ...

  4. Java基础笔记（十七）——继承（续）final

    final  最终的 修饰类,此类不能被继承.final与访问修饰符public位置随意,在class前即可.public final class A{ } 修饰方法,此方法不能被子类重写,但可以被子 ...

  5. linux1--常用命令

    1.目录结构 2./etc:系统配置文件存放地 比如你的wsgi的配置文件,nginx 3./usr 应用程序存放地 比如你的jdk应用程序存放地 4./root 系统管理员root的家目录 4.1像 ...

  6. 爬虫框架urllib 之(三) --- urllib模块

    Mac本 需导入ssl import ssl ssl._create_default_https_context = ssl._create_unverified_context  urllib.re ...

  7. css3 matrix 矩阵

    2D矩阵变换 matrix(1,0,0,1,0,0) 对应 matrix (a,b,c,d,e,f) 其中,x, y表示转换元素的所有坐标(变量)了, 3*3矩阵每一行的第1个值与后面1*3的第1个值 ...

  8. pandas学习2(基础操作)

  9. python 基础及if while for语句

    #####变量######一.命名规则   1.正常命名  可以由字母,下划线和数字组成,不能以数字开头,不能和关键字重明   2.驼峰命名法    1)大驼峰:每一个单词的首字母都大写     Fi ...

  10. 虚拟机 ---- 最小化安装无法使用tab补全键

    解决方法: 安装 yum -y install bash-completion 然后重启 注意:挂载时使用绝对路径的cdrom挂载,  ls -l /dev/cdromvim /etc/fstab — ...