wyr123789
- 浏览: 36369 次
- 性别:
-
文章分类
- 全部博客 (57)
- Java 面试 (1)
- html5 (12)
- FQA (1)
- 前端 (18)
- java (1)
- css (7)
- 前端，js，jquery (8)
- html (2)
- jquery，html5，html (2)
- css3 (1)
- 仅包括这些 (0)
- 前端，js，jquery 有效的实时监听input (1)
- esayui (2)
- echarts3 (0)
- from (1)
- linxu (1)
- linxu apr (1)
- jsonp (1)
- 冒泡事件 (1)
- IOS click延迟300秒，ios长按点击事件会有copy的选项 (1)
- js (1)
- vue (1)
- webpack3 (1)
- sass (1)
- node (1)
最新评论
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<style type="text/css">
.main-margin{width: 10rem;text-align:right;-webkit-transition: 5s;background: lime;}
.main{border: 2px solid #F5F5F5;border-radius: 50%;width: 5rem;height:5rem;position:relative;background-color:#FFF ;text-align: center;
transition:5s;-webkit-transition:5s; }
.header{position:relative; }
.header-eye{border: 2px solid;display: block;width: 10%;height:8px;border-radius: 50%;background: #000;position: absolute;left: 50%;top: 50%;margin-top: 1.5rem;}
.header-eye-left{margin-left: -1.5rem;}
i{height: 6px;border: 1px solid #FFFFFF;border-radius: 100%;display: block;}
.header-eye-right{margin-left: 0.5rem;}
em{background-color: #000;border: 1px solid #000;display: block;height: 1.5px;border-radius: 100%;margin-top: 1.4px;}
.floot{position: absolute;bottom: 1rem;left: 50%;margin-left: -1.2rem;}
.floot:before {content: "";position: absolute;top: -51px;left: -7px;border-left: 1px solid transparent;border-right: 1px solid transparent;border-BOTTOM: 4px solid #f66456 ;width: 3rem;height: 3rem;border-radius: 100%;}
.main-margin:hover{width: 30rem;}
.main:hover{ background: #FF0000;
animation: myfirst 2s;-webkit-animation: myfirst 5s;
/* -webkit-animation-name:'myfirst';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 10s;/*动画持续时间*/
-webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0.2s;/*动画延迟时间*/
-webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/*/
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:10rem; top:0px;transform:rotate(90deg)}
50% {background:blue; left:20rem; top:0px;transform:rotate(180deg)}
75% {background:green; left:30rem; top:0px;transform:rotate(360deg)}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:10rempx; top:0px;transform:rotate(90deg)}
50% {background:blue; left:20rem; top:0px;transform:rotate(180deg)}
75% {background:green; left:30rem; top:0px;transform:rotate(360deg)}
100% {background:red; left:0px; top:0px;}
}
</style>
<body>
<div class="main-margin">
<div class="main">
<div class="header">
<span class="header-eye header-eye-left"><i><em></em></i></span>
<span class="header-eye header-eye-right"><i><em></em></i></span>
</div>
<div class="floot"></div>
</div>
</div>
<a class="">动画</a>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<style type="text/css">
.main-margin{width: 10rem;text-align:right;-webkit-transition: 5s;background: lime;}
.main{border: 2px solid #F5F5F5;border-radius: 50%;width: 5rem;height:5rem;position:relative;background-color:#FFF ;text-align: center;
transition:5s;-webkit-transition:5s; }
.header{position:relative; }
.header-eye{border: 2px solid;display: block;width: 10%;height:8px;border-radius: 50%;background: #000;position: absolute;left: 50%;top: 50%;margin-top: 1.5rem;}
.header-eye-left{margin-left: -1.5rem;}
i{height: 6px;border: 1px solid #FFFFFF;border-radius: 100%;display: block;}
.header-eye-right{margin-left: 0.5rem;}
em{background-color: #000;border: 1px solid #000;display: block;height: 1.5px;border-radius: 100%;margin-top: 1.4px;}
.floot{position: absolute;bottom: 1rem;left: 50%;margin-left: -1.2rem;}
.floot:before {content: "";position: absolute;top: -51px;left: -7px;border-left: 1px solid transparent;border-right: 1px solid transparent;border-BOTTOM: 4px solid #f66456 ;width: 3rem;height: 3rem;border-radius: 100%;}
.main-margin:hover{width: 30rem;}
.main:hover{ background: #FF0000;
animation: myfirst 2s;-webkit-animation: myfirst 5s;
/* -webkit-animation-name:'myfirst';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 10s;/*动画持续时间*/
-webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0.2s;/*动画延迟时间*/
-webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/*/
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:10rem; top:0px;transform:rotate(90deg)}
50% {background:blue; left:20rem; top:0px;transform:rotate(180deg)}
75% {background:green; left:30rem; top:0px;transform:rotate(360deg)}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:10rempx; top:0px;transform:rotate(90deg)}
50% {background:blue; left:20rem; top:0px;transform:rotate(180deg)}
75% {background:green; left:30rem; top:0px;transform:rotate(360deg)}
100% {background:red; left:0px; top:0px;}
}
</style>
<body>
<div class="main-margin">
<div class="main">
<div class="header">
<span class="header-eye header-eye-left"><i><em></em></i></span>
<span class="header-eye header-eye-right"><i><em></em></i></span>
</div>
<div class="floot"></div>
</div>
</div>
<a class="">动画</a>
</body>
</html>
分享到：
发表评论
-
vue 倒计时
2019-07-17 17:16 0time: 59, timer: nu ... -
input 特殊处理禁止输入特殊符号或者限制输入中文
2018-06-07 14:46 0<input class="js_input ... -
调用百度的搜索引擎
2017-09-28 11:26 0<!DOCTYPE html> <html& ... -
移动端碰到的坑
2017-09-22 15:34 660不废话 直接上代码： *{ -webkit-touch- ... -
移动端网页布局注意事项及解决
2017-08-01 17:10 10731.winphone系统a、input标签被点击时产生的半透明 ... -
全选反选
2017-05-09 18:34 448<div class="js_mobile&q ... -
js 规格多选，选中显示和还可以选择的数量 多维度选择
2017-03-17 16:09 1034<body> <section class= ... -
发送验证码
2017-03-15 15:54 0<input type="button&quo ... -
common css公共
2020-05-06 11:35 325/*遮罩层*/ .shadow{ position: fixe ... -
common 校验
2017-03-15 10:32 0/*限制只能输入数字*/ $("#username& ... -
下拉列表功能获取数据添加到select表中
2017-03-14 15:41 737<!DOCTYPE html > <html ... -
图片轮播
2017-03-09 15:56 0<!DOCTYPE html> <html ... -
功能:H5可根据输入的匹配相对应的文字下拉框
2016-08-29 15:24 563<!DOCTYPE html> <html& ... -
功能 两级联动菜单
2016-08-26 15:13 512<!DOCTYPE html> <html& ... -
功能 交替显示
2016-08-24 16:09 562<!DOCTYPE html> <html& ... -
纯CSS+CSS3右上角倾斜四十五度封页角效果
2016-08-16 17:07 4464加广告与加封页脚的代码是差不多的！ 以前封页脚都是图片现在 ... -
各种图形
2016-07-21 14:47 461<!DOCTYPE html PUBLIC " ... -
小用例
2016-07-20 17:24 339<!DOCTYPE html> <html& ... -
css3样式
2016-07-15 18:58 437<!DOCTYPE html> <html& ... -
mui框架 上拉加载 下拉刷新
2016-07-15 15:38 689<!DOCTYPE html> <html& ...
相关推荐
SVG可爱笑脸动画 html5是一款利用HTML5和SVG实现的可爱笑脸动画，它们是色彩各异的一组泥娃娃的脸，默认的时候就出现眨眼和微笑的动画，当你把鼠标滑过它们时，就像是感受到了主人的抚摸一样上下跳动起来，真的是...
C# 2008程序设计经典案例设计与实现第一章第1章 源码Visual C# 2008与窗体界面. 案例1 飘动动画窗体 案例2 透明动画窗体 案例3 利用API函数实现动画窗体 案例4 闪烁动画窗体 ...案例13 八边形图形窗体 本章小结
Flash8.0是一种优秀的矢量动画编辑软件，可以制作交互式的影片、网站和精彩的动画。教师可以根据自己的教学设计，制作出最能体现教师创意的精彩课件。 一、Flash8.0的基本知识 * 熟悉Flash8.0的界面 * 掌握基本...
案例1 飘动动画窗体 案例2 透明动画窗体 案例3 利用API函数实现动画窗体 案例4 闪烁动画窗体 案例5 滚动字幕动画窗体 案例6 超女卡通窗体 案例7 总在最前的登录窗体 案例8 在屏幕中央的圓形...案例13 八边形图形窗体
案例12 笑脸窗体 案例13 八边形图形窗体 本章小结 第2章 Visual C＃2008与图形图像 案例1 动态绘制直线和曲线 案例2 动态绘制验证码 案例3 椭圓及椭圆弧的绘制 案例4 移动鼠标复制坐标区域图像 案例5 动态...
案例12 笑脸窗体 案例13 八边形图形窗体 本章小结 第2章 Visual C＃ 2008与图形图像 案例1 动态绘制直线和曲线 案例2 动态绘制验证码 案例3 椭圓及椭圆弧的绘制 案例4 移动鼠标复制坐标区域图像 案例5 动态获取当前...
案例12 笑脸窗体 案例13 八边形图形窗体 本章小结 第2章 Visual C＃ 2008与图形图像 案例1 动态绘制直线和曲线 案例2 动态绘制验证码 案例3 椭圓及椭圆弧的绘制 案例4 移动鼠标复制坐标区域图像 案例5 动态获取当前...
案例12 笑脸窗体 案例13 八边形图形窗体 本章小结 第2章 Visual C＃ 2008与图形图像 案例1 动态绘制直线和曲线 案例2 动态绘制验证码 案例3 椭圓及椭圆弧的绘制 案例4 移动鼠标复制坐标区域图像 案例5 动态获取当前...
1. 欢迎界面，以一个笑脸开始。 2. 主界面，包括数字时钟和电子时钟和按键提示。 3. 设计者介绍和功能提示。 四、总体设计： 电子时钟的总体设计采用自上而下、逐步细化、模块化设计、结构化编码方式进行。系统...