CSS的表白:七夕巧克力心

2017-01-14 08:48:29来源:CSDN作者:GarfieldEr007人点击

七夕到啦!然而我是程序员,就来给程序员解决一些烦恼吧!程序员最不理解的两件事:

  1. 别人的代码
  2. 妹子的心

趁着七夕的月色,我们来搞定妹子的心吧!使用纯CSS来获得妹子的心其实并不难。。各位看官来看我的尝试:http://tianmaying.com/app/css-heart/,如图:

既然是CSS的表白,我们便只写两行HTML:

<div class="heart"><div class="message">Love</div></div><div class="popover"></div>

上面是妹子的心,下面是程序员的表白。

妹子的心

妹子的心目测宽度在300px左右,稍微扁一点。.heart的左右两部分需要相对于.heart绝对布局,因而.heartposition需要设置为非static

.heart{    position: relative;    width: 300px;    height: 280px;}

接着before表示左心房,after表示右心房~ 它们要相对于.heart绝对布局,设置为absolute

.heart:before, .heart:after {    content: "";    position: absolute;    top: 0;}

左边的left靠左一点,右边的left靠右一点。但是妹子右心房比左心房稍微黑一点background-color:#640d0dbox-shadow是用来设置阴影的,其中inset表示设置的是内部阴影。因此妹子的心内部是有阴影的~然后使用transform将左右心房分别逆时针和顺时针旋转45°,让它们拼接在一起~

下面代码中使用6位16进制数表示CSS颜色(24位色),数越大越白(白色为#ffffff),越小则越黑(黑色为#000000)。

.heart:before {    left: 0;    background-color: #cf9797;    box-shadow: -10px 1px 15px 0 rgba(0,0,0,0.2),    inset 20px -195px 65px 0 #640d0d;    transform: rotate(-45deg);}.heart:after{    left: 64px;    background-color: #640d0d;    transform: rotate(45deg);    box-shadow: 15px 3px 25px rgba(0,0,0,0.35),    inset -25px 10px 35px rgba(0,0,0,.35);}

我们猜想妹子的心中一定充满了爱,而text-shadow可以让心中的爱发出光芒。最后用transform来让她心中的爱有所倾斜。

.heart .message {    text-shadow: -1px -1px 1px #ae6363, 1px 1px 1px #450000;    padding: 45px 0 0 30px;    transform: rotate(-15deg);    color: #640d0d;}

程序员的表白

接着我们来创建一个有一点苍白但却充满了浪漫的表白:

.popover {    position: absolute;    padding: 15px 30px;    background: #F9787C;    border-radius: 10px;}

上面的padding给这个表白框设置了一定的内补,使得文字不必贴着边框,背景background则设置为一个浪漫的颜色:#F9787C

哦!差点忘了说点什么!给表白框加一个表白内容:"I love you, forever and ever!"

.popover:before{    content: 'I love you, forever and ever!';    color: #fff;    font-size: 26px;}

表白框可以再来一个小小的角,这样我们的表白才有呼之欲出的效果。CSS中一般通过设置相邻的两个border来显示一个三角形。这里我们将border-right设为浪漫的颜色,而border-bottom则设置为透明,生成的三角形正好是.popover:after对应CSS Box的右上部分。

.popover:after{    position: absolute;    right: 0;    content: "";    display: block;    width: 0;    height: 0;    border-bottom: 28px solid transparent;    border-right: 58px solid #F9787C;}

渐出的代码

可能你注意到了,在我们的示例中CSS代码是逐渐输出的,而且右侧的样式也是逐渐应用的。这是通过操作<style>标签做到的~

页面初始化时,.heart.popover的样式代码不直接放在style或者link[rel=stylesheet]中,而是把它放在一个script[type=text/css]中。这样初始页面中的显示面板便只会有默认的样式。页面结构可能是这样的:

<div class="main-layout">  <!--代码面板-->  <div class="left" id="code"></div>  <!--显示面板-->  <div class="right">    <div class="heart"><div class="message">Love</div></div>    <div class="popover"></div>  </div></div><!--已应用的CSS代码--><style id="current-style"></style><!--初始的CSS代码--><script id="style" type="text/css">.heart{...}</script>

然后每隔200ms我们从中取出一部分代码并添加到一个<style>标签中;同时输出到左侧的代码面板上。可能你注意到左侧的代码面板中,代码是高亮的,可以用一个前端高亮工具来实现:力荐highlight.js(本站都是用它来高亮的)。

完整的实现请点击本页右上角的“参考代码”,只有不足40行JS,并不复杂!

版权声明本文由Harttle创作,转载需署名作者且注明文章出处参考代码

要获取本文的参考代码,请访问: https://www.tianmaying.com/tutorial/css-heart/repo


from: https://www.tianmaying.com/tutorial/css-heart

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台