聊代码(第六十三集)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>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。