上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象

1. 线条动画效果

代码:最外层div包含2个小的div : a和b.   a有左右边框(高度变化), b有上下边框(宽度变化), 默认不显示,鼠标移上去时,a的高度和b的宽度发生变化,交叉效果

<style>
*{margin:0;padding:0;}
.main{ width: 300px; height: 300px; background: #333; position: relative; }
.a,.b{
opacity: 0; position: absolute;
top: 0;bottom: 0;left: 0;right: 0; margin: auto; //水平垂直居中
transition: all .3s; //动画持续事件0.3s
}
.a{
width: 200px; height:100px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.b{
width: 100px; height: 200px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.main:hover .a{ opacity: 1; height: 230px; }
.main:hover .b{ width: 230px; opacity: 1; }
</style>
<div class="main">
<div class="a"></div>
<div class="b"></div>
</div>

2. 旋转:

代码:核心部分是  transform-origin: 0 0; 必须设置到起始点,然后逆时针旋转

<style>
*{margin:0;padding:0;}
.a1{
position: relative;width: 200px;height: 200px;overflow: hidden;background: #000;}
.a2{
position: absolute;top: 200px;width: 300px;height: 200px;
background: #2487e0;transition: all .3s;transform-origin: 0 0; }
.a1:hover .a2 {
transform: rotate(-15deg);
}
</style> <div class="a1">
<div class="a2">
</div>
</div>

CSS动画实例的更多相关文章

  1. CSS动画实例:太极图在旋转

    利用CSS可以构造出图形,然后可以对构造的图形添加动画效果.下面我们通过旋转的太极图.放大的五角星.跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法. 1.旋转的太极图 设页面中有<div ...

  2. CSS动画实例:移动的眼珠子

    适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果.下面我们通过移动的眼珠子.圆珠一二三.一分为四.四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使 ...

  3. CSS动画实例:小圆球的海洋

    CSS背景属性用于定义HTML元素的背景,在CSS提供的背景属性中, background-image:指定要使用的一个或多个背景图像: background-color:指定要使用的背景颜色: ba ...

  4. CSS动画实例:旋转的圆角正方形

    在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下: <div class="container&qu ...

  5. CSS动画实例:一颗躁动的心

    在页面中放置一个类名为container的层作为盛放心心的容器,在该层中再定义一个名为heart的子层,HTML代码描述如下: <div class="container"& ...

  6. CSS动画实例:跳跃的字符

    1.翻转的字符 在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: <div class="container"> ...

  7. CSS动画实例:Loading加载动画效果(三)

    3.小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

  8. CSS动画实例:升空的气球

    1.制作一个气球 设页面中有<div class="balloon"></div>,为. balloon设置样式规则如下: .balloon { heigh ...

  9. CSS动画实例:行星和卫星

    设页面中有<div class=" planet "></div>,用来绘制一个行星和卫星图形.这个图形包括三部分:行星.卫星和卫星旋转的轨道.定义. pl ...

随机推荐

  1. 【Markdown】Latex基本语法

    Latex基本语法 注意点:Markdown 斜杠/ 转义字符! LaTeX 是大神Leslie Lamport 的杰作,该神是2013年图灵奖的获得者,感兴趣可以去瞻仰一下神人的相关著述: http ...

  2. 提问的智慧 How To Ask Questions The Smart Way

    提问的智慧 How To Ask Questions The Smart Way Copyright © 2001,2006,2014 Eric S. Raymond, Rick Moen 本指南英文 ...

  3. Python & Selenium & Pycharm 环境搭建

    最近在研究python+selenium进行自动化测试.然后用的python开发工具是Pycharm.然后,今天就跟大家讲一下怎么搭建一整套的自动化测试环境. 安装python 首先,安装python ...

  4. bootstrap colorscheme以及theme自动生成

    http://paintstrap.com/ 是一个根据adobe kuler color scheme自动生成theme 的工具,比较直观好用,对于调整前端theme有一定参考意义

  5. 两个知识点的回顾(const指针和动态链接库函数dlopen)

    昨天,看了一点<c++ primer>和<程序员的自我修养>,想起了自己以前的两个知识点,这里回顾,并且总结一下. 1. const指针的参数 看primer的时候,看到几个概 ...

  6. Http协议和web本职【转自丁码农】

    当你在浏览器地址栏敲入“http://www.cnblogs.com/”,然后猛按回车,呈现在你面前的,将是博客园的首页了(这真是废话,你会认为这是理所当然的).作为一个开发者,尤其是web开发人员, ...

  7. tree结构统一修改属性名(递归)

    1 //data为需要修改的tree,这里主要是为antd design 里面select规范数据 const ass = (data) => { let item = []; data.map ...

  8. Event Driven Architecture

    在微服务中使用领域事件   稍微回想一下计算机硬件的工作原理我们便不难发现,整个计算机的工作过程其实就是一个对事件的处理过程.当你点击鼠标.敲击键盘或者插上U盘时,计算机便以中断的形式处理各种外部事件 ...

  9. hibernate mysql 分页时报错 显示的代码和sql server 类似 select top 1……

    [ERROR][com.alibaba.druid.filter.stat.StatFilter]merge sql error, dbType mysql, sql : select top 1 d ...

  10. Redis的Windows端开发连接Linux端以及相应的代码实现

    在Windows端开发连接需要进行配置文件的配置: 在redis.conf配置文件中 将protected-mode yes,修改为protected-mode no:不保护redis # By de ...