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

• 点赞
• 收藏
• 分享
• 文章举报