Css3动画效果,超简单的loveHeart,爱心特效,程序员表白必备

 简简单单的随意一写.

<!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>

ps:因为被CSDN格式化了,可能有样式丢失,请自行修改

附件: 代码是动画,附件是静态

发布了71 篇原创文章 · 获赞 47 · 访问量 10万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览