<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3变形功能 transform属性</title>

    <style type="text/css">

        div{

            width:300px;

            height: 300px;

            background-color:#000;

        }

        div:hover{

        /*-moz-transform: rotate(45deg); 旋转*/

        /*-moz-transform: scale(2,2); 缩放，不能设置为负值，可以设置小数 0.5*/

        /*-moz-transform: skew(30deg);倾斜*/

        /*-moz-transform: translate(50px);移动*/

    }

</style>

</head>

<body>

<h1>rotate旋转</h1>

<div></div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css动画功能</title>

    <style type="text/css">

        div{

            width:200px;

            height: 200px;

            background-color: aqua;

            -moz-transition:all 1s linear;

        }

        div:hover{

           background-color: #e54d26;

            width: 400px;

            height: 400px;

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3 animation属性的使用</title>

    <style>

        div{

           width: 10px;

            height: 20px;

            background-color: aquamarine;

        }

      /*  关键帧的定义*/

        @-webkit-keyframes mycolor {

            0%{

                background-color: #D2D2D2;

            }

            10%{

                background-color: #646464;

                width: 10px;

            }

            20%{

                background-color: aqua;

                width:20px ;

            }

            80%{

                background-color: #e54d26;

                width: 80px;

            }

            100%{

                background-color: blueviolet;

                width: 100px;

            }

        }

        div:hover{

            -webkit-animation-name: mycolor;

            -webkit-animation-duration: 5s;

            -webkit-animation-timing-function: linear;

            -moz-animation-iteration-count:1;

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

h5学习-css3的一些内容整理的更多相关文章

  1. H5学习的第三周

    上周,我们结束了京东站的制作,本周我们开始了手机站和响应式网站的学习,并仿制了一个手机端界面和一个响应式界面,在完成这两个网站的过程中我遇到了许多问题,也了解了它们的解决方法,接下来我讲详细介绍本周我 ...

  2. H5学习第二周

    怎么说,在各种感觉中h5学习的第二周已经过来了,先总结一下,感觉学习h5是一件让我爱恨交加的事,学会一些新的知识并把它成功运行出来的时候是非常激动和兴奋的,但是有时候搞不懂一个标签或者属性的时候,就有 ...

  3. H5学习笔记1

    H5学习笔记 1.创建超链接: target=”_blank”:链接的目标网页会在新的窗口中打开. target=”_parent”:链接的目标会在当前窗口中打开,如果在框架网页中,则会在上一层框架打 ...

  4. css3网格效果（整理）

    css3网格效果(整理) 一.总结 一句话总结: css3网格原理是渐变(linear-gradient)绘制图形,background-size属性指定重复的小单元的大小 多个渐变(linear-g ...

  5. 【PyTorch】深度学习与PyTorch资料链接整理

    欢迎来到我的博客! 以下链接均是日常学习,偶然得之,并加以收集整理,感兴趣的朋友可以多多访问和学习.如果以下内容对你有所帮助,不妨转载和分享.(Update on 5,November,2019) 1 ...

  6. H5+JS+CSS3 综合应用

    慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...

  7. 12个学习 CSS3 网站布局设计的优秀案例

    网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...

  8. 假如 Micromedia 没被收购，会不会早于 Apple 推动 H5、CSS3 的发展

    看着如今大行其道的 H5.CSS3,想想当年的“网页三剑客”,不禁感慨:假如 Micromedia 没被收购,会不会早于 Apple 推动 H5.CSS3 的发展? 当时 Apple 先是询问 Ado ...

  9. H5学习第四周

    本周.我们结束了HTML标签和css样式部分,开始了JS的学习.JS是的内容和css,html基本上没有什么联系而且它比较需要逻辑思考能力,所以要从新开始学习. 使用js的三种方式: 1.html标签 ...

随机推荐

  1. Pierce振荡器设计

    一.Pierce振荡器电路 Inv:内部反相器,作用等同于放大器: Q:石英晶体或陶瓷晶振: RF:内部反馈电阻(使反相器工作在线性区): RExt:外部限流电阻(防止石英晶体被过分驱动): CL1. ...

  2. 【php】在Windows2003下的IIS配置php5.4

    本文与<[php]在Windows2003下配置Apache2.4与php5.4>(点击打开链接)为姊妹篇,仅仅是php所用的server有点不同,这里一个是Apache2.4,一个是Wi ...

  3. linux【第六篇】用户和用户管理及定时任务复习

    定时任务复习 1.什么是定时任务? 2.如何编辑查看定时任务(配置文件位置?),语法的特殊字符意义是什么?- * , / 3.书写定时任务有哪些要领? 4.生产如何调试定时任务 5.生产场景配置定时任 ...

  4. IIS老革命遇到的一些问题

    今天部署一个网站到IIS,遇到了一些问题.老革命遇上新问题.前不久搞java,接触了一下tomcat,觉得真麻烦.而tomcat大概是java阵营中最简单的了吧.想不到,IIS7,友好的图形界面下,也 ...

  5. scrapy框架的解析

    1,scrapy框架的官网:https://scrapy.org/ 什么是scrapy框架: scrapy 是一个为了爬取网站数据,提取结构性数据而编写的应用内框架,非常出名,所谓框架就是一个已经继承 ...

  6. Vue实例及生命周期

    1,Vue实例生命周期. 有时候,我们需要在实例创建过程中进行一些初始化的工作,以帮助我们完成项目中更复杂更丰富的需求,开发,针对这样的需求,Vue提供给我们一系列的钩子函数 2,Vue生命周期的阶段 ...

  7. Linux如何查看进程等常用命令

    1.查进程    ps命令查找与进程相关的PID号:    ps a 显示现行终端机下的所有程序,包括其他用户的程序.    ps -A 显示所有程序.    ps c 列出程序时,显示每个程序真正的 ...

  8. ECharts 使用

    最近项目中要做图形报表,要求使用echarts实现,图形报表有很多中实现之前也接触过,但echarts还是头一次听说,正好可以趁这个机会好好学习一下它. 之前不知道就不知道啦,现在知道了就了不得了,一 ...

  9. java集合的关系

    在 Java2中,有一套设计优良的接口和类组成了Java集合框架Collection,使程序员操作成批的数据或对象元素极为方便.这些接口和类有很多对抽象数据类型操作的API,而这是我们常用的且在数据结 ...

  10. 使用JSTL 对在页面上对 0,0,1 的分割处理 forTokens

    使用JSTL 对在页面上对 0,0,1 的分割处理 <tr onmouseover="currentcolor=this.style.backgroundColor;this.styl ...