<!DOCTYPE > <html lang="en"> <head> <meta charset="utf-8"/> <title>test</title> <link rel="stylesheet" href="css/swing.css" /> </head> <style> *{ padding: 0; margin: 0; } body{ background-color: pink; } .heart{ position: relative; width:400px; height:800px; margin:50 auto; background-color:pink; animation:beat 1s infinite alternate; /*动画 :名字 时间 循环播放 反向循环播放*/ } .left{ position: absolute; top: 0; left: 28px; width:250px; height:320px; background-color:#C33; border-radius:125px 125px 0px 0px; transform:rotate(-51deg); -ms-transform:rotate(-51deg); /* IE 9 */ -moz-transform:rotate(-51deg); /* Firefox */ -webkit-transform:rotate(-51deg); /* Safari 和 Chrome */ -o-transform:rotate(-51deg); /* Opera */ box-shadow: 0px 0px 20px #C33; } .right{ position: absolute; top: 0; left: 120px; width:250px; height:320px; background-color:#C33; border-radius:125px 125px 0px 0px; transform:rotate(51deg); -ms-transform:rotate(51deg); /* IE 9 */ -moz-transform:rotate(51deg); /* Firefox */ -webkit-transform:rotate(51deg); /* Safari 和 Chrome */ -o-transform:rotate(51deg); /* Opera */ box-shadow: 0px 0px 20px #C33; } @keyframes beat{ /*关键帧*/ from{ transform: scale(1); } to{ transform: scale(1.1); } } </style> <body> <div class="heart"> <div class="left"> </div> <div class="right"> </div> </div> </body> </html>
我是成大17级计算机科学与技术专业的一名学生。爱学习，爱英雄联盟，爱生活，我想要当一名优秀的前端工程师(不敲后台代码的那种)。为什么会有这种想法嘞？其实是大一下学期在手机上面看见七夕表白的一个网页，贼好看（到大二开学的我现在还不会...那时候太天真，信了邪，以为7天就可以学会），就接触到了前端，也喜欢上了前端。前端与其他编程语言不同，他能够立竿见影，就是你想做的东西，立马能够显现出来，不像java丶c艹等...其实前端也需要花很多时间和精力在上面，反复实践和敲打，听了web老师的话(对老师真的是佩服，什么都知道，瞬间圈粉)，成为优秀的前端工程师并不容易，让我开始往科学家方向靠近，emmm，不能只了解表面知识，要达到第三种境界，那就是why。好啦，这就是我，不一样的烟火，我是张家义，么么哒
上面是一个用html和css3写出来的一个动态心哦！❤