<!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. HDU 5723：Abandoned country（最小生成树+算期望）

    http://acm.hdu.edu.cn/showproblem.php?pid=5723 Abandoned country Problem Description   An abandoned ...

  2. Django项目的创建和管理

    1.主题 这部分教程主要介绍如何通过Pycharm创建.管理.运行一个Django工程.对于Django模块的相关知识大家可以参考Python社区. 2.准备环境 Django版本为2.0或更高 Py ...

  3. React躬行记（7）——表单

    表单元素是一类拥有内部状态的元素,这些状态由其自身维护,通过这类元素可让用户与Web应用进行交互.HTML中的表单元素(例如<input>.<select>和<radio ...

  4. ThreadGroup详细讲解

    import java.util.concurrent.TimeUnit; public class Test { public static void main(String[] args){ // ...

  5. Java编程思想：泛型方法

    import java.util.*; public class Test { public static void main(String[] args) { // GenericMethods.t ...

  6. redis分布式锁的问题和解决

    分布式锁 在分布式环境中,为了保证业务数据的正常访问,防止出现重复请求的问题,会使用分布式锁来阻拦后续请求.具体伪代码如下: public void doSomething(String userId ...

  7. NOIP2018普及T2暨洛谷P5016 龙虎斗

    题目链接:https://www.luogu.org/problemnew/show/P5016 分析: 这是一道模拟题.看到题目,我们首先要把它细致的读明白,模拟题特别考察细节,往往会有想不到的坑点 ...

  8. Java并发-CopyOnWriteArrayList

    前言 今天我们一起学习下java.util.concurrent并发包里的CopyOnWriteArrayList工具类.当有多个线程可能同时遍历.修改某个公共数组时候,如果不希望因使用synchro ...

  9. u盘制作启动盘步骤以及安装win10步骤

    1.下载制作工具:微PE工具箱V2.0 http://www.wepe.com.cn/download.html 2.默认制作启动盘 3.下载win10镜像 ed2k://|file|cn_windo ...

  10. 基于Ajax的前后端分离

    这种开发模式可以称为SPA (Single Page Application 单页面应用)时代. 这种模式下,前后端的分工非常清晰,前后端的关键协作点是 Ajax 接口.看起来是如此美妙,但回过头来看 ...