当前位置:首页 » 《随便一记》 » 正文

css绘制3D炫动ikun

4 人参与  2023年02月12日 14:50  分类 : 《随便一记》  评论

点击全文阅读


今天做一个3D版的ikun。

先准备图片一张

在这里插入图片描述

代码浅析

页面整体div.contrainer,舞台div.stage,控制盒子div.control,图片盒子div.imgWrap,js载入div.img列表。

<div class="contrainer">  <div class="stage">    <div class="control">      <div class="imgWrap"></div>    </div>  </div></div>

先设置页面背景色以及div.contrainer固定高度,导入图片。

body {  background: #000;}.contrainer {  position: relative;  height: 100vh;}.stage {  position: relative;  width: 100%;  height: 100%;  margin: 0 auto;  perspective: 120px;}.stage .control {  position: relative;  width: 100%;  height: 100%;}.stage .control .imgWrap {  position: absolute;  width: 100%;  height: 100%;  max-width: 400px;  min-height: 400px;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}.stage .control .imgWrap .img {  position: absolute;  width: 100%;  height: 100%;  line-height: 6px;  font-size: 12px;  top: 0;  left: 0;  background: var(--ikun);  background-position: -150px 0;  background-repeat: no-repeat;  background-size: auto;  overflow: hidden;  color: transparent;  word-break: break-word;}

我完成了第一步效果

在这里插入图片描述

接下来我们需要加一点效果,给图片div.img加一个滤镜效果filter

.stage .control .imgWrap .img{  ...  filter: grayscale(1) invert(1) brightness(0.5);}

grayscale(黑白效果),值在0-1之间,0为原图,1为完全变灰(0%-100%)

invert(反转效果),值在0-1之间,0为原图,1为完全反转(0%-100%)

brightness(亮度效果),值不为负数,1为原图(百分比也可以,1=100%)
超过1,图会更明亮,0-1相当于遮罩效果
使用 filter: brightness(0.5); 就无须额外制作遮罩

接下来给div.img设置一个味蕾before,同时,也和div.img一样设置背景,并且使用背景混合模式

.stage .control .imgWrap .img::before {  content: '';  position: absolute;  inset: 0;  z-index: 1;  background: var(--ikun), red;  background-blend-mode: lighten;  margin-left: 10px;  mix-blend-mode: darken;  background-repeat: no-repeat;  background-size: auto;}

mix-blend-mode是CSS3新增的一个很有意思的属性,它描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。我们将 PS 中图层的概念替换为 HTML 中的元素。

这样我们就得到一下效果

在这里插入图片描述

接下来我们给div…stage,div.control,div.imgWrap,div.img这些盒子加上transform-style: preserve-3d;属性,preserve-3d将指示元素的子元素应位于 3D 空间中,该属性不能被子元素继承,属性的效果作用于子元素,不作用于自身,要结合transform使用,否则没效果。

继续,
我们给div.img加入文字或者符号…之类的,要用到background-clip: text;将文本绘制到背景区域,

效果如下
在这里插入图片描述

整体效果出来了,接下来我们需要用到动画让整体动起来,CSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。

@keyframes rotate {  0% {    transform: rotateY(0deg);  }  50% {    transform: rotateY(-360deg);  }  100% {    transform: rotateY(-720deg);  }}@keyframes filterChange {  100% {    filter: grayscale(1) invert(1) brightness(3);  }}

效果如下

在这里插入图片描述

这是一个div.img得到的效果,那么我们多加几个?我们使用js将div.img添加到div.imgWrap中,

 for(let i=0;i<8;i++){      let div = document.createElement("div")      div.className = 'img'      div.innerText = '..........................................'      document.getElementsByClassName('imgWrap')[0].appendChild(div)  }

用js添加了div.img,我们还需要给每个div.img设置transform: rotateY() translateZ();rotateY是Y轴的旋转角度,translateZ是往Z轴移动,

stage .control .imgWrap .img:nth-child(1) {  transform: rotateY(80deg) translateZ(482.84px);  animation: filterChange 0.5s 500ms infinite linear; }.stage .control .imgWrap .img:nth-child(2) {  transform: rotateY(125deg) translateZ(482.84px);  animation: filterChange 0.5s 500ms infinite linear;}.stage .control .imgWrap .img:nth-child(3) {  transform: rotateY(170deg) translateZ(482.84px);  animation: filterChange 0.5s 500ms infinite linear;}.stage .control .imgWrap .img:nth-child(4) {  transform: rotateY(215deg) translateZ(482.84px);  animation: filterChange 0.5s 500ms infinite linear;}.stage .control .imgWrap .img:nth-child(5) {  transform: rotateY(260deg) translateZ(482.84px);  animation: filterChange 0.5s 500ms infinite linear;}.stage .control .imgWrap .img:nth-child(6) {  transform: rotateY(305deg) translateZ(482.84px);  animation: filterChange 0.5s 500ms infinite linear;}.stage .control .imgWrap .img:nth-child(7) {  transform: rotateY(350deg) translateZ(482.84px);  animation: filterChange 0.5s 500ms infinite linear;}.stage .control .imgWrap .img:nth-child(8) {  transform: rotateY(395deg) translateZ(482.84px);  animation: filterChange 0.5s 500ms infinite linear;}

css写太麻烦了,我们可以用less这样写方便快捷

.loop(@n,@i:1) when(@i<=@n){    .img:nth-child(@{i}){        transform: rotateY(35 + (@i * 45deg)) translateZ(482.84px) ;        animation: filterChange .5s 500ms infinite linear;    }    .loop(@n,(@i)+1)}.loop(8)

最后就得到了我们开头看到的效果

在这里插入图片描述

结尾

其实做这个我也看了很多知识,受益良多。

一起学习,一起努力,共同进步,

学无止境,学无止境,学无止境。

—— END ——


点击全文阅读


本文链接:http://zhangshiyu.com/post/53237.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 京圈佛子破戒后,我改嫁京圈纨绔(沈墨渊,白晶晶)
  • 前世被闺蜜害死,重生后我让她从太子妃变疯女苏婉儿,清歌完本_前世被闺蜜害死,重生后我让她从太子妃变疯女(苏婉儿,清歌)
  • 全书浏览七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)_七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)全书结局
  • 今天也没变成昨天(周扬陈默)全书免费_(周扬陈默)今天也没变成昨天后续(周扬陈默)
  • 重生后,秦总非要父以子贵(许沐晴,秦越泽)全书浏览_重生后,秦总非要父以子贵全书浏览
  • 他嫌弃我喝两块钱豆浆上不了台面,我结婚后他又哭又闹全书万照,白青青在线
  • 昭然若梦前尘烬列表_昭然若梦前尘烬(温昭然方池雲)
  • 导师借我股票账号,我倒欠五十万(孟潇潇,宁薇)_导师借我股票账号,我倒欠五十万孟潇潇,宁薇
  • 拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾(周钰泽,蒋清清,思源)全书浏览_拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾全书浏览
  • 我的人生,你已出局(程森凌古楚文)_我的人生,你已出局程森凌古楚文
  • 穿书成病娇女配,睁眼就签下离婚协议书(朱楼)_穿书成病娇女配,睁眼就签下离婚协议书
  • 老婆逼我给白月光捐肾,我死后她悔疯了(宋逸晨沈墨白)全书浏览_老婆逼我给白月光捐肾,我死后她悔疯了全书浏览

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1