<!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. 小代学Spring Boot之数据源

    想要获取更多文章可以访问我的博客 - 代码无止境. 经过一天对Spring Boot的研究,小代同学已经对Spring Boot框架有了一个大概的认识.并且还创建了一个简单的Spring Boot的W ...

  2. zookeeper的客户端应用

    什么zookeeper? ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供 ...

  3. C语言学习书籍推荐《明解C语言》下载

    柴田望洋 (作者), 管杰 (译者), 罗勇 (译者) <明解C语言>是日本的C语言经典教材,自出版以来不断重印.修订,被誉为“C语言圣经”.作者在日本IT界家喻户晓,出版过一系列极富影响 ...

  4. springboot自动装配（2）---实现一个自定义自动装配组件

    对于springboot个人认为它就是整合了各种组件,然后提供对应的自动装配和启动器(starter),基于这个流程去实现一个定义的装配组件 还是这张图 一.创建自己的自动配置工程, spring.f ...

  5. mysql语句优化原则

    有时候发现数据量大的时候查询起来效率就比较慢了,学习一下mysql语句优化的原则,自己在正常写sql的时候还没注意到这些,先记录下来,慢慢一点一点的学,加油! 这几篇博客写的都可以: https:// ...

  6. Centos6.5安装Redis3.2.8

    1 - Redis安装 redis安装 在网上一搜一大把,但是还是在这里想要能够统一吧,所以这个安装步骤是在Centos6.5 Minimal 上安装redis3.4.8,本次安装是在root 用户下 ...

  7. 【模拟】(正解树状数组)-校长的问题-C++-计蒜客

    描述 学校中有 n 名学生,学号分别为 1 - n.再一次考试过后,学校按照学生的分数排了一个名次(分数一样,按照名字的字典序排序).你是一名老师,你明天要和校长汇报这次考试的考试情况,校长询问的方式 ...

  8. 内核下载、nfs挂载：个性问题及解决方法~~共勉

    开发板下载内核遇到starting waiting问题时: 首先想到是下载地址的问题! 将原本下载地址减去0X40,例如:smart210下载地址0X20008000,修改为0X20007FC0,即可 ...

  9. 个人永久性免费-Excel催化剂功能第86波-人工智能之图像OCR文本识别全覆盖

    在上一年中,Excel催化剂已经送上一波人工智能系列功能,鉴于部分高端用户的需求,再次给予实现了复杂的图像OCR识别,包含几乎所有日常场景,让公司个人手头的图像非结构化数据瞬间变为可进行结构化处理分析 ...

  10. 如何使用JSP访问MySQL数据库

    <%@page import="java.sql.*" import ="java.util.*" import ="java.io.*&quo ...