【聊代码】第六十三集 css样式（之三十三）利用贝塞尔曲线实

聊代码（第六十三集）css样式（之三十三）       本集帖子由上集内容演化而来，对上集代码进行了“改造”。“改造”内容有：

① 添加了动态背景图片（北京西山国家森林公园），目的是避免画面空旷，同时也为静止时增加动感。此图为gif动图，用软件 Nature Studio v2.60 制作。（要了解该软件的有关情况，请见我的【聊音画】第二十一集。该软件已变为需付费软件）。

② 同时，使用了外边距对背景图片进行定位。

③ 为使人物图在背景图片上清晰，去掉了阴影，改加了边框线。

④ 六图改换了三图，更宜用椭圆外形。

⑤ 将贝塞尔曲线第四个节点座标数值加大或减小（＞或＜1.0的值），这样做会产生两种效果：其一是扩大了缩放倍率；其二是在缩放终端会有回弹效果。在数值是1.0时没有回弹效果。

请将鼠标手形放在图片上，看动画效果。

代码：

＜style type="text/css"＞

.动画__item{ background-blend-mode:luminosity;

margin:40px;

background-image:url(http://img4.oldkids.cn/upload/260811000/u260810070/

2015/11/ 19/blog_20151119095407893491.gif);

width:650px;height:430px;

transition:transform 10s cubic-bezier(0.4,0,0.6,4.0)

}

.动画__item:not(:last-child){position:absolute;top:65%;left:50%;width:40vmin;height:70vmin;

border-radius:100%; border:12px solid rgba(250,0,0,0.5)}

.动画__item:nth-child(1){margin:47vmin -48vmin;transform:scale(0.5);background:url("http://www.oldkids.cn/

upload/ 2018/10/31/blog_20181031191322724.jpg")50% 50% whitesmoke}

.动画__item:nth-child(1):hover{transform:scale(1);background-blend-mode:normal;cursor:pointer}

.动画__item:nth-child(2){margin:47vmin -22vmin;transform:scale(0.5);background:url("http://www.oldkids.cn/

upload/ 2018/10/31/blog_20181031191737145.jpg")50% 50% whitesmoke}

.动画__item:nth-child(2):hover{transform:scale(1);background-blend-mode:normal;cursor:pointer}

.动画__item:nth-child(3){margin:47vmin 4vmin;transform:scale(0.5);background:url("http://www.oldkids.cn/

upload/ 2018/10/31/blog_20181031191544602.jpg")50% 50% whitesmoke}

.动画__item:nth-child(3):hover{transform:scale(1);background-blend-mode:normal;cursor:pointer}

＜/style＞

＜div class="动画"＞

＜p class="动画__item"＞ ＜/p＞

＜p class="动画__item"＞ ＜/p＞

＜p class="动画__item"＞ ＜/p＞

＜p class="动画__item"＞ ＜/p＞

＜/div＞