css3 爱心情书

程序员的浪漫——一个简单的爱心情书网页制作

效果图如下:

代码如下:

HTML:

 <div id="contain">
     <div class="love">
     <div class="right"></div>
     <div class="left"></div>
 </div>
 <p id="pmd"> <span>I</span> LOVE YOU</p>
 </div>

 

CSS

  *{
               margin:0 auto;
               padding:0  
  }


#contain{
    width: 900px;
    height: 600px;
    margin-top: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 40px red ;
    position: relative;
    background-image: url(pic/s11.jpg) ;
    background-repeat:no-repeat;
    background-size: 100% 100%;
  background-position: -250px;
}
.love{
         position: absolute;
         width:205px;
         height:250px;
         top:100px;
         left:350px;
        
         animation: love 1s infinite alternate;
            
               } 

              
@keyframes love{
                100%{
        transform
: scale(1.5);
            } } .love div{     float:left;     width:150px; height:228px; background-color:red; border-radius: 100px 100px 0 0; transform: rotate(-45deg); box-shadow:0 0 40px red; }

@keyframes shadow{   100%{
              box-shadow
:0 0 400px red

              } } .love .left{ transform: rotate(45deg); margin-left:-95px; } .love .right{ transform: rotate(-45deg); } #pmd{ font-size:100px; color:#9999ff; position:absolute; top: 350px; left: 150px; } #pmd span{ font-size: 200px; color: red }

 

JavaScript :

var oPmd=document.getElementById('pmd');
    var str='I LOVE YOU';
    // console.log(str.length)//10
    var num=1;
    var timer=setInterval(function(){
        oPmd.innerHTML=str.slice(0,num)+'<span>'+str.slice(num,num+1)+'</span>'+str.slice(num+1);
        num ++;
        if(num>=str.length){
            num=0;
        }
    },1000);

知识点:

1.爱心的制作,这个大家可以看我的 纯css 制作简单的爱心这篇文章

2.box-sizing:content-box(标准w3C盒子) | border-box (怪异IE盒子) | inherit

3.background-image:url();  背景图片;

4.background-repeat: repeat(图片在垂直和水平两个方向重复) | repeat-x(水平方向重复)  | repeat-y (垂直方向重复) | no-repeat(不重复) | inherit;设置图像数量

5.background-size: length(设置宽高) | percentage (以父元素的百分百设置) | cover(背景图片完全覆盖) |contain(扩展至最大,内容区域自适应);调整图像大小

6.background-position:valueX(X坐标),valueY (Y坐标);调整图片位置,若只有一个值,则是横坐标,另一个默认center;

7.animation:  CSS3动画属性,具体不写,后面会有一篇关于animation的介绍。

8.box-shadow

9.setInterval()

好了介绍完毕,该作品尚简陋,还有很多细节没弄到,像自适应什么的。请大家多多见谅

转载于:https://www.cnblogs.com/smile-xin/p/11394419.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值