<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Css3动画效果,彩色文字效果,超简单的loveHeart</title>
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body,html{
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(to right,pink,white) no-repeat;
}
.warp{
margin: 50px auto;
width: 80%;
height: 100%;
}
.hearts span{
position: absolute;
top: 24px;
left: 15px;
font-family: "华文行楷";
z-index: 999;

}
.hearts {
float: left;
width: 200px;
height: 200px;
position: relative;
margin-top:100px;
margin-left:200px;
animation: heart 3s linear infinite normal;
}
.hearts:before, .hearts:after {
position: absolute;
content: "";
left: 70px; top: 0;
width: 70px;
height: 115px;
background: #f00;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.hearts:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
@keyframes heart{
0%{
transform: scale(0.5);
}
100%{
transform: scale(1.3);

}
}

#heartTextCopy{
float: left;
padding-top: 100px;
width: 600px;
height: 500px;
font-size: 19px;
font-family: "仿宋";
}
</style>
<body>
<div class="warp">
<div class="heartText">
<pre id="heartTextCopy"></pre>

<div class="hearts">
<span>我的心只属于你<br/>爱你一辈子</span>
</div>
</div>
</div>
<pre id="heartText" style = "display: none;">
落花也有纷飞的时候，夏日的风卷起的是记忆的花残，纷飞的却是放任的灵魂。
思也，念也？
青梅竹马，从小一起长到大。 突然有一天，他对她说：“嫁给我吧。” 但是她犹豫不决。
于是他们用剪刀石头布决定一切。
他赢了。 结婚后她问他，为什么那么有把握。
他淡淡地一笑：“七岁的时候我就知道你喜欢出石头。”
</pre>
</body>
<script type="text/javascript">
var project = {
txt:document.getElementById('heartText').innerHTML,
heartTextCopy:document.getElementById('heartTextCopy'),
temp:0,
color:function () {
return '#' +
(function(color) {
return(color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) &&
(color.length == 6) ? color : arguments.callee(color);
})('');
},
herat:function(){
if(this.temp > this.txt.length){
this.temp = 0;
}
this.temp++;
this.heartTextCopy.style.color = this.color();
this.heartTextCopy.innerHTML = this.txt.substring(0,this.temp);
setTimeout('project.herat()',200);
}
};
project.herat();

</script>
</html>

Css3动画效果,彩色文字效果,超简单的loveHeart的更多相关文章

  1. CSS3下的渐变文字效果实现

    如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...

  2. 小tip:CSS3下的渐变文字效果实现——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借 ...

  3. CSS3动画实现高亮光弧效果,文字和图片（一闪而过）

    前言 好久没有写博客啦,高亮文字和图片一闪而过的特效,用CSS3来写 先看文字吧, 就上代码了 .shadow { /* 背景颜色线性渐变 */ /* 老式写法 */ /* linear为线性渐变,也 ...

  4. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  5. CSS3动画中的animation-timing-function效果演示

    CSS3动画(animation)属性有如下几个: 属性 值 说明 animation-name name 指定元素要使用的keyframes名称 animation-duration time(ms ...

  6. css3动画实现伪弹幕效果

    如图所示: 效果还可以直接用麦唱APP把一首歌分享到微信里面看到,方法类似全民K歌的方法,都是用css3动画实现的, 代码如下:(这是我做真实效果前的一个dome) 直接粘代码就可以看到效果,里面有两 ...

  7. css3动画（animation）效果3-正方体合成

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. css3动画（animation）效果1-漂浮的白云

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. css3动画（animation）效果2-旋转的星球

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. html手机自适应屏幕

    <meta name="viewport" content="height=device-width, initial-scale=1.0, maximum-sca ...

  2. LSI 9211-8I阵列卡IR模式Update为IT模式操作步骤！

    以下是DOS系统环境下操作(也可以在windows.linux环境下,只要找到对应的tool就可以)相对应的tool官网可以下载 链接:https://www.broadcom.com/support ...

  3. C语言学习书籍推荐《数据结构与算法分析:C语言描述(原书第2版)》下载

    维斯 (作者), 冯舜玺 (译者) <数据结构与算法分析:C语言描述(原书第2版)>内容简介:书中详细介绍了当前流行的论题和新的变化,讨论了算法设计技巧,并在研究算法的性能.效率以及对运行 ...

  4. Java学习笔记之---比较接口与抽象类

    Java学习笔记之---比较接口与抽象类 抽象类是描述事物的本质,接口是描述事物的功能 接口与抽象类的异同 1.一个类只能继承一个父类,但是可以有多个接口 2.抽象类中的抽象方法没有方法体,但是可以有 ...

  5. .Net Core 创建和使用中间件

    1. 定义中间内容 1.1 必须有一个RequestDelegate 委托用了进入一个中间件 1.2 通过构造函数设置这个RequestDelegate委托 1.3 必须有一个方法Task Invok ...

  6. 微信小程序开发--组件(5)

    一.editor 富文本编辑器,可以对图片.文字进行编辑. 编辑器导出内容支持带标签的 html和纯文本的 text,编辑器内部采用 delta 格式进行存储. 通过setContents接口设置内容 ...

  7. Dapper学习笔记

    听说有个轻量化的orm Dapper,我就去了解下.试着对Sql Server和Mysql进行增删改查,体验不错.它不如EF臃肿,也比一般的封装灵活,比如我们封装了一个映射类.利用反射,在Execut ...

  8. golang http json http://www.alexedwards.net/blog/golang-response-snippets

    http://www.alexedwards.net/blog/golang-response-snippets https://gist.github.com/andreagrandi/97263a ...

  9. something good

    CF292A CF304B CF383A CF409D CF409F CF632A CF652B CF656A CF656B CF656D CF659A CF678A CF697A CF735D CF ...

  10. RecycleView文字吸顶，点击吸顶布局刷新数据

    实现效果 需求 Recycle有一个头布局,可以跟随列表进行滑动 点击头布局之后可以重新加载列表数据 随着头布局的消失,留下一个可点击的布局(该布局在头布局中) 效果类似下图: 淘宝的商品列表,随着我 ...