<!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. 性能测试即服务-docker部署jmeter及.netcore应用

    前言 现在各种业务都追求上云,通俗的讲,“XX即服务”,作为一名专职的性能测试调优人员的我,由于会点三脚猫的开发功夫,“性能测试即服务”这种开发大任就落到我头上了,先做一个能完成核心压测功能的基础版. ...

  2. (转)VSCode调试go语言出现：exec: "gcc": executable file not found in %PATH%

    原文:https://www.cnblogs.com/zsy/p/5958170.html 1.问题描述 由于安装VS15 Preview 5,搞的系统由重新安装一次:在用vscdoe编译go语言时, ...

  3. 自己实现定制自己的专属java锁，来高效规避不稳定的第三方

    java juc 包下面已经提供了很多并发锁工具供我们使用,但在日常开发中,为了各种原因我们总是会用多线程来并发处理一些问题,然而并不是所有的场景都可以使用juc 或者java本身提供的锁来方便的帮助 ...

  4. mysql重启遇到的问题

    不知道是不是每次更新 MySQL 软件之后都需要执行数据库升级指令?在我进行过的几次软件升级之后,总会在 MySQL 的日志中见到 “[ERROR] Missing system table mysq ...

  5. 预学第三天：Ge常用t快捷键,码云,Git使用

    目录 Get常用快捷键 码云及Git的使用 Get常用快捷键 git init #创建一个本地的仓库 **gie add test.txt #指定文件添加 ***git add . #当前文件夹下所有 ...

  6. 当没有接口时、不可继承时，如果使用mock方案进行单元测试

    原版代码: import java.io.IOException; import java.io.InputStream; import java.net.HttpURLConnection; imp ...

  7. py+selenium+IE10【IE已停止工作】【已解决】

    问题:跑自动化时,到某个用例IE就崩,提示已停止工作.   手工跑的时候,IE挂,提示“Internet Explorer 已经为了帮助保护您的计算机而关闭此网页”. 且每次都在需要调用flash插件 ...

  8. C#7.3 新增功能

    连载目录    [已更新最新开发文章,点击查看详细] C# 7.3 版本有两个主要主题. 第一个主题提供使安全代码的性能与不安全代码的性能一样好的功能. 第二个主题提供对现有功能的增量改进. 此外,在 ...

  9. [leetcode] 8. String to Integer (atoi) (Medium)

    实现字符串转整形数字 遵循几个规则: 1. 函数首先丢弃尽可能多的空格字符,直到找到第一个非空格字符. 2. 此时取初始加号或减号. 3. 后面跟着尽可能多的数字,并将它们解释为一个数值. 4. 字符 ...

  10. [LeetCode] 32. Longest Valid Parentheses (hard)

    原题链接 题意: 寻找配对的(),并且返回最长可成功配对长度. 思路 配对的()必须是连续的,比如()((),最长长度为2:()(),最长长度为4. 解法一 dp: 利用dp记录以s[i]为终点时,最 ...