wyr123789
- 浏览: 37801 次
- 性别:
-
文章分类
- 全部博客 (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 687不废话 直接上代码： *{ -webkit-touch- ... -
移动端网页布局注意事项及解决
2017-08-01 17:10 11581.winphone系统a、input标签被点击时产生的半透明 ... -
全选反选
2017-05-09 18:34 471<div class="js_mobile&q ... -
js 规格多选，选中显示和还可以选择的数量 多维度选择
2017-03-17 16:09 1069<body> <section class= ... -
发送验证码
2017-03-15 15:54 0<input type="button&quo ... -
common css公共
2020-05-06 11:35 345/*遮罩层*/ .shadow{ position: fixe ... -
common 校验
2017-03-15 10:32 0/*限制只能输入数字*/ $("#username& ... -
下拉列表功能获取数据添加到select表中
2017-03-14 15:41 774<!DOCTYPE html > <html ... -
图片轮播
2017-03-09 15:56 0<!DOCTYPE html> <html ... -
功能:H5可根据输入的匹配相对应的文字下拉框
2016-08-29 15:24 590<!DOCTYPE html> <html& ... -
功能 两级联动菜单
2016-08-26 15:13 531<!DOCTYPE html> <html& ... -
功能 交替显示
2016-08-24 16:09 584<!DOCTYPE html> <html& ... -
纯CSS+CSS3右上角倾斜四十五度封页角效果
2016-08-16 17:07 4528加广告与加封页脚的代码是差不多的！ 以前封页脚都是图片现在 ... -
各种图形
2016-07-21 14:47 486<!DOCTYPE html PUBLIC " ... -
小用例
2016-07-20 17:24 363<!DOCTYPE html> <html& ... -
css3样式
2016-07-15 18:58 473<!DOCTYPE html> <html& ... -
mui框架 上拉加载 下拉刷新
2016-07-15 15:38 715<!DOCTYPE html> <html& ...
相关推荐
在VB（Visual Basic）编程环境中，制作笑脸动画涉及多个知识点，包括图形绘制、事件处理、时间控制以及程序逻辑设计。下面将详细介绍这些方面。 首先，VB中的图形绘制是通过Graphics对象来实现的。Graphics对象提供...
在这个笑脸动画中，我们可能会使用`<animate>`来让眼睛闪烁，或者用`<animateTransform>`让嘴巴动起来。 5. **事件监听**：HTML5和SVG支持JavaScript事件处理，比如`onclick`、`onmouseover`等。通过添加这些事件...
"饿了么订单评价笑脸动画"就是这样一个例子，它展示了如何通过精心设计的动态元素来增强用户交互。这个动画主要用于用户在完成订单后对服务进行评价时，通过点击不同类型的笑脸来表达他们的满意度。 首先，我们需要...
SVG图像由一系列几何形状和路径组成，这使得它非常适合用来创建复杂的图形，包括我们的笑脸动画。 要创建笑脸，我们需要定义两个圆圈代表眼睛和一个椭圆代表嘴巴。在SVG中，我们可以使用`<circle>`元素来创建圆形，...
SVG可爱笑脸动画 html5是一款利用HTML5和SVG实现的可爱笑脸动画，它们是色彩各异的一组泥娃娃的脸，默认的时候就出现眨眼和微笑的动画，当你把鼠标滑过它们时，就像是感受到了主人的抚摸一样上下跳动起来，真的是...
总之，HTML5 Canvas星星笑脸动画结合了前端开发的三大关键技术：HTML5 Canvas的图形绘制能力、jQuery的便利性和CSS的样式表现力。这个压缩包提供了一个学习和实践这些技术的好机会，对于提升网页开发技能非常有帮助...
这意味着笑脸动画在各种设备上都能保持一致的显示效果。 7. **性能优化**：由于SVG是矢量图形，其大小通常比位图小得多，这有助于提高页面加载速度。同时，合理使用CSS和JavaScript进行动画处理，可以避免不必要的...
"纯CSS3绘制的小猫笑脸动画"是一个利用CSS3特性来创建的交互式图形实例，它展示了CSS3在动态效果和图形设计方面的潜力。 首先，这个小猫笑脸动画的核心是CSS3的`@keyframes`规则，它允许我们定义一个动画的过程，从...
在星星笑脸动画中，每一帧可能包含星星的位置更新、笑脸的绘制等操作。例如： ```javascript function draw() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制星星和笑脸 // ... ...
在这个“可爱娃娃笑脸动画”中，SVG很可能是用来绘制娃娃笑脸的基本形状，如圆形代表脸蛋，椭圆代表眼睛，线条表示嘴巴。SVG的优势在于，由于其结构化的特性，可以方便地通过CSS来改变元素的颜色、大小、位置，甚至...
在这个“html5使用svg绘制的笑脸动画特效源码.zip”压缩包中，我们将会探讨如何利用HTML5和SVG来实现一个动态的笑脸动画效果。 首先，SVG是一种基于XML的标记语言，它可以用来描述二维图形和复杂的形状。在HTML5中...
标题提到的"动画笑脸哭脸的变化"是一个关于在数字媒体上实现动态表情的示例。这个实例聚焦于如何使用HTML5的Canvas API，配合Android中的Handler和Thread机制，来创建一个交互式的、能够从笑脸转变为哭脸的动画效果...
在这个可爱的娃娃笑脸动画中，SVG被用来绘制每一个娃娃的面部特征，如眼睛、嘴巴和脸颊，使得每个娃娃都能拥有独特的表情和色彩。 动画效果的实现则依赖于JavaScript，尤其是HTML5的Canvas或SVG的内置动画功能。在...
"纯CSS3制作鼠标控制小猫笑脸动画.zip"这个标题指出，我们将会探讨一个使用纯CSS3技术实现的互动式动画效果，其中小猫的笑脸会根据鼠标的移动而变化。CSS3是层叠样式表的第三版，它提供了更丰富的样式控制和动态效果...
【标题】中的“纯CSS3实现可用鼠标控制娘口三三笑脸动画特效源码”表明这是一个使用纯CSS3技术创建的交互式动画效果，具体是鼠标操作时会呈现出娘口三三（一种动漫角色）的笑脸变化。这个项目可能是为了展示CSS3在...
在Android开发中，实现自定义刷新加载动画是一种提升用户体验的方式，尤其像支付宝那样具有辨识度的笑脸动画，能够增加应用的趣味性和交互性。本文将详细介绍如何在Android中模仿支付宝的笑脸刷新加载动画。 首先，...
你可以根据需求增加更多细节，如添加动画效果，让笑脸的眼睛眨眼，或者改变嘴巴形状来表达不同的情绪。同时，也可以通过调整参数，如圆的大小、位置和线条的宽度，来实现个性化的设计。 总的来说，VB笑脸的制作涉及...
由于其矢量特性，SVG图形可以在任何分辨率下保持清晰，非常适合创建图标、图形以及复杂的动画。在HTML5中，SVG可以直接内联插入文档，或者通过`<img>`标签引用外部SVG文件。 在“HTML5 SVG变色龙动画代码”中，...
可以将笑脸置于页面的视觉焦点，或者作为边角装饰，增加视觉层次感。 此外，运用动画和过渡效果可以增强动态感。例如，当讨论到某个要点时，笑脸图片可以通过淡入、飞入等动画效果出现，使内容呈现更加生动。但要...