企业网站建设怎么策划,seo搜索方法,中企网站案例,wordpress进不了后台警告#xff01;本期内容建议CSS基础良好的人看#xff0c;本期为实战篇#xff0c;难度有点大哈喽大家好我是wawjf灰常抱歉我们咕咕了快两周#xff0c;主要原因是我们的几位作者(加上我其实就两个)去夏令营学习了某重要东西#xff0c;所以没时间更新#xff0c;在这里… 警告本期内容建议CSS基础良好的人看本期为实战篇难度有点大哈喽大家好我是wawjf灰常抱歉我们咕咕了快两周主要原因是我们的几位作者(加上我其实就两个)去夏令营学习了某重要东西所以没时间更新在这里对催更的各位朋友们说声对不起哈(放个照片各位自己感受)如果我猜得没错这期应该是正式期的最后一期了接下来有时间可能会出番外篇但是是不定时哦这期我们就来讲一个很重要的内容——3D变形(动画)的实战1题干我们要用3D变形(动画)制作一个正方体然后设计它在光标经过时沿Y轴旋转像下面这样2思路首先我们要来梳理一下我们做这个动画的流程这里我已经帮大家梳理好了第1步我们要先对盒子进行一个设计第2步我们要对盒子做一些样式调整以及变形(动画)的安排第3步我们要定义关键帧第4步定义动画的触发方式注意在过程中各位可能会看到一些没遇到过的属性不必担心因为这些属性比较冷门所以我们不会当作重点来教学大家只要知道即可3实践我们先写好基本代码3.1盒子的设计classstage div classcontainer div classside front前面div div classside back背面div div classside left左面div div classside right右面div div classside top顶面div div classside bottom底面div div/div这个比较好理解首先我们先用一个大容器stage来定义立方体然后再定义每一面并取名3.2样式安排这个比较复杂我们区分讲3.2.1定义画布.stage { width: 300px; height: 300px; margin: 15px auto; position: relative; perspective: 300px;}这里表示创建一个高300px(height)宽300px(width)的一个画布其中有一个属性我们可能没讲过那就是perspective这个属性用来设置视图的距离(其实一点用处都没有)3.2.2定义盒子的亿些样式.container { top: 50%; left: 50%; margin: -100px 0 0 -100px; position: absolute; transform: translateZ(-100px); transform-style: preserve-3d;}这个用来定义盒子包含框的样式transform-style表示元素的呈现形式默认就是preserve-3d表示在3D中呈现(没用*2).side { background: rgba(255,0,0,0.3); border: 1px solid red; font-size: 60px; font-weight: bold; color: #fff; height: 196px; line-height: 196px; position: absolute; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); text-transform: uppercase; width: 196px;}这个用来定义盒子六面的基本样式应该没有我们没讲过的不知道rgba的请自行网上搜索.front { transform: translateZ(100px);}.back { transform: rotateX(180deg) translateZ(100px);}.left { transform: rotateY(-90deg) translateZ(100px);}.right { transform: rotateY(90deg) translateZ(100px);}.top { transform: rotateX(90deg) translateZ(100px);}.bottom { transform: rotateX(-90deg) translateZ(100px);}3.3定义动画关键帧keyframes spin { 0% {transform:rotateY(0deg)} 100% {transform:rotateY(360deg)}}这个也比较好理解看过上期的就知道这里我们定义了一个名叫spin的关键帧在动画的开头以Y轴为准旋转0度在结尾旋转360度其实就是一个补间动画3.4定义动画触发方式.container:hover { animation: spin 5s linear infinite;}这里我们运用了hover选择器表示当鼠标的位置在元素上的时候触发的动作animation的函数我们也讲过了就是引用我们上面定义的spin函数然后对时间动画运动等参数进行设定不懂的看前面------------没错我们的代码写完了完整代码如下————htmlhead meta charsetutf-8style typetext/css keyframes spin { 0% {transform:rotateY(0deg)} 100% {transform:rotateY(360deg)}}.stage { width: 300px; height: 300px; margin: 15px auto; position: relative; perspective: 300px;}.container { top: 50%; left: 50%; margin: -100px 0 0 -100px; position: absolute; transform: translateZ(-100px); transform-style: preserve-3d;}.container:hover { animation: spin 5s linear infinite;}.side { background: rgba(255,0,0,0.3); border: 1px solid red; font-size: 60px; font-weight: bold; color: #fff; height: 196px; line-height: 196px; position: absolute; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); text-transform: uppercase; width: 196px;}.front { transform: translateZ(100px);}.back { transform: rotateX(180deg) translateZ(100px);}.left { transform: rotateY(-90deg) translateZ(100px);}.right { transform: rotateY(90deg) translateZ(100px);}.top { transform: rotateX(90deg) translateZ(100px);}.bottom { transform: rotateX(-90deg) translateZ(100px);}styletitletitleheadbodydiv classstage div classcontainer div classside front前面div div classside back背面div div classside left左面div div classside right右面div div classside top顶面div div classside bottom底面div divdivbodyhtml 没错那么这样我们的动画就可以实现啦~如果你没听懂或者出了问题可以私信公众号哦我们看到就会尽快回复的好啦那么我们的CSS教程差不多就要告一段落了接下来我可能会开始教JQuery或者帮阿列克谢写JS或者写C……反正我能写的我都会尽量安排啦各位尽情期待哦作者wawjf(我爱微积分)四五工作室副室长(嗯我也是)四五议会 45-2(没想到我是45-2吧) 喜欢研究理科类东西 08年出生福建福州人未来的█████ 自学微积分低调低调 本来想研究算法结果在这边写稿屯图片(PS名字读作瓦韦杰夫)关注四五工作室从零开始学WEB
