<!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. 阿里系手淘weex学习第一天

    官网原文:https://weex.apache.org/zh/tools/extension.html#功能 功能 创建Weex项目. 支持在VSCode对Weex的语法支持. 检查iOS和Andr ...

  2. 无法启动iis express web服务器解决

    VS2013 .VS2015 .VS2017调试出现无法启动iis express web服务器 最近自己老是遇到这个问题,天天如此,烦死人,网上答案繁多,但是都解决不了,也是由于各种环境不同导致的, ...

  3. Linux命令学习-ps命令

    Linux中,ps命令的全称是process status,即进程状态的意思,主要作用是列出系统中当前正在运行的进程信息. ps命令的功能很强大,参数也非常多,下面只举几个简单的实例. 显示所有进程信 ...

  4. Android 开发你需要了解的那些事

    本文微信公众号「AndroidTraveler」首发. 背景 最近部门有新入职员工,作为规划技术路线的导师,这边给新员工安排了学习路线. 除了基本的学习路线之外,每次沟通,我都留了一个小问题,让小伙伴 ...

  5. 基于lua-nginx-module(openresty)的WEB应用防火墙

    独乐乐,不如众乐乐,分享给大家一篇WEB应用防火墙的文章,基于Lua+ Nginx实现.以下是ngx_lua_waf的作者全文输出. Github地址:https://github.com/loves ...

  6. java高并发系列 - 第12天JUC:ReentrantLock重入锁

    java高并发系列 - 第12天JUC:ReentrantLock重入锁 本篇文章开始将juc中常用的一些类,估计会有十来篇. synchronized的局限性 synchronized是java内置 ...

  7. Linux文件权限设置教程

    Linux的文件基本权限有9个,分别是owenr.group.others三种身份各自有自己的r.w和x,比如"rwxrwxrwx",就表示owener具有r.w.x权限,同样gr ...

  8. 个人永久性免费-Excel催化剂功能第25波-小白适用的文本处理功能

    翻看各大插件,都不约而同地出现系列文本处理的功能,自己在使用Excel过程中,在临时性的需求时,也会用上这几种文本处理,但仅适用于小范围的使用,使用这些功能不是数据处理的正确的之道,数据处理的核心需求 ...

  9. [leetcode] 64. Minimum Path Sum (medium)

    原题 简单动态规划 重点是:grid[i][j] += min(grid[i][j - 1], grid[i - 1][j]); class Solution { public: int minPat ...

  10. Django REST Framework(DRF)_第二篇

    视图和路由 视图封装 第一次封装 ​ 上一篇最后我们对书籍表做了增删改查,那么如果现在我们有几十上百张表需要这样做呢?我们知道类的特性有封装,因此我们可以尝试进行封装下. from rest_fram ...