做网站学什么什么专业wordpress 插件 meta

当前位置： 首页 > news >正文

做网站学什么什么专业,wordpress 插件 meta,如何对网站做实证分析,青岛建设集团股份有限公司试想一下#xff0c;如果你的网站在加载过程中#xff0c;loading图由一个老旧的菊花转动图片#xff0c;变为一个红色的心形loading特效#xff0c;那该有多炫酷啊。 目录 实现思路
初始化HTML部分
延迟动画是重点
设定动画效果
完整源代码 最后 实现思路
每个… 试想一下如果你的网站在加载过程中loading图由一个老旧的菊花转动图片变为一个红色的心形loading特效那该有多炫酷啊。 目录 实现思路  初始化HTML部分  延迟动画是重点  设定动画效果  完整源代码 最后 实现思路  每个竖线由一个li标签来实现当然我们需要设定他的起始高度并且设定色值设定圆角由于是loading图需要在整体页面的垂直和水平居中这涉及到CSS3的flex布局学习动画特效就需要使用到animation动画了需要与keyframes配合使用最重要的是这个loading过程需要设置一定的动画延迟而不是使用javascript的setTimeout来实现。 可以说CSS3的成熟在很多程度上节约了JS的使用节省了图片的网络请求与加载这也是网站性能优化的很大体现。 初始化HTML部分  loading图的初始化需要准备9个 li 标签而 li 标签的父元素需要相对于整个页面垂直水平居中而几乎所有的loading图也都是相对于整体网站居中对齐的这里需要保持一致。 这一小部分需要学习到的CSS3知识点有flex布局、justify-content水平居中、align-items垂直居中、border-radius圆角设置等。代码如下 !– HTML5部分 – div idheulli/lili/lili/lili/lili/lili/lili/lili/lili/li/ul /div// CSS3部分 *{padding: 0;margin: 0;list-style: none; } #he{display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #232e6d; } ul{height: 200px; } li{float: left;width: 20px;height: 20px;border-radius: 20px;margin-right: 10px;background-color: red; } 初始化代码后你可以看到的效果是这样子的效果如图 延迟动画是重点  由于要做的是一个CSS3的loading图所以就需要从左到右的依次动效而不是突然就变成一个心形了这样起不到用户等待的效果。 而依次动效平时一般使用setTimeout然后获取每个DOM元素再依次改变起CSS样式或者直接修改style行内样式但CSS3的成熟大大减小了这方面的性能支出。CSS3设定代码如下 li:nth-child(1){animation: love1 4s infinite; } li:nth-child(2){animation: love2 4s infinite;animation-delay: 0.15s; } li:nth-child(3){animation: love3 4s infinite;animation-delay: 0.3s; } li:nth-child(4){animation: love4 4s infinite;animation-delay: 0.45s; } li:nth-child(5){animation: love5 4s infinite;animation-delay: 0.6s; } li:nth-child(6){animation: love4 4s infinite;animation-delay: 0.75s; } li:nth-child(7){animation: love3 4s infinite;animation-delay: 0.9s; } li:nth-child(8){animation: love2 4s infinite;animation-delay: 1.05s; } li:nth-child(9){animation: love1 4s infinite;animation-delay: 1.2s; } 设定动画效果  然后就可以设定动画效果了虽然看上去是9个 li 元素但仔细观察其实左右对称也就是写5份动画keyframes就可以了因为第一个和最后一个的动效过程是一样的依次往下看只有中间部分心形的尖头部分特立独行单独为他准备一份CSS设定即可。 但需要注意的是这个依次的动效过程就需要设定好每份样式的起始高度和结束高度再然后这里面有一个translateY的高度延伸 CSS3代码设定如下 keyframes love1{30%,50%{height: 60px; transform: translateY(-30px);}75%,100%{height: 20px; transform: translateY(0);} } keyframes love2{30%,50%{height: 125px; transform: translateY(-62.5px);}75%,100%{height: 20px; transform: translateY(0);} } keyframes love3{30%,50%{height: 160px; transform: translateY(-75px);}75%,100%{height: 20px; transform: translateY(0);} } keyframes love4{30%,50%{height: 180px; transform: translateY(-60px);}75%,100%{height: 20px; transform: translateY(0);} } keyframes love5{30%,50%{height: 190px; transform: translateY(-45px);}75%,100%{height: 20px; transform: translateY(0);} } 完整源代码 前面说了这么多怕你看的不够仔细所以我这里放一下完整的源代码你可以通过以下步骤自己拿到源代码 新建一个txt文档如 CSS动效.txt 这样的文档将 txt 文本后缀改为 html使用一个开发工具例如VSCodesublime或者直接txt文本工具打开都行前端开发最初吸引我的地方就是无需任何特殊环境只要在一个文本里就可以书写代码而且可以直接利用浏览器查看效果这简直太酷了其他语言可以吗当然汉语也不错你直接张嘴就说更不需要环境哈哈开个玩笑啦再然后拿到源代码复制到你的 html 文本里保存再用浏览器打开就可以啦就是如此简单那句名人名言是啥来着对了So easy! 完整源代码如下 !DOCTYPE html htmlheadmeta http-equivContent-Type contenttext/html; charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleCSS3爱心形状加载动画特效/titlestyle *{padding: 0;margin: 0;list-style: none; } #he{display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #232e6d; } ul{height: 200px; } li{float: left;width: 20px;height: 20px;border-radius: 20px;margin-right: 10px;background-color: red; } li:nth-child(1){animation: love1 4s infinite; } li:nth-child(2){animation: love2 4s infinite;animation-delay: 0.15s; } li:nth-child(3){animation: love3 4s infinite;animation-delay: 0.3s; } li:nth-child(4){animation: love4 4s infinite;animation-delay: 0.45s; } li:nth-child(5){animation: love5 4s infinite;animation-delay: 0.6s; } li:nth-child(6){animation: love4 4s infinite;animation-delay: 0.75s; } li:nth-child(7){animation: love3 4s infinite;animation-delay: 0.9s; } li:nth-child(8){animation: love2 4s infinite;animation-delay: 1.05s; } li:nth-child(9){animation: love1 4s infinite;animation-delay: 1.2s; } keyframes love1{30%,50%{height: 60px; transform: translateY(-30px);}75%,100%{height: 20px; transform: translateY(0);} } keyframes love2{30%,50%{height: 125px; transform: translateY(-62.5px);}75%,100%{height: 20px; transform: translateY(0);} } keyframes love3{30%,50%{height: 160px; transform: translateY(-75px);}75%,100%{height: 20px; transform: translateY(0);} } keyframes love4{30%,50%{height: 180px; transform: translateY(-60px);}75%,100%{height: 20px; transform: translateY(0);} } keyframes love5{30%,50%{height: 190px; transform: translateY(-45px);}75%,100%{height: 20px; transform: translateY(0);} } /style/head bodydiv idheulli/lili/lili/lili/lili/lili/lili/lili/lili/li/ul /div/body /html 最后 好啦代码学习完了也快要五一节假日啦给大家提个醒去哪个景点都注定是东西又贵又人山人海所以我一般的选择是周末加请假这样避开高峰好出行能省钱。而五一这样的节假日当然是应该回家看看许久不见的亲人们啦。 千言万语一句话工作的时候好好工作放假了就好好玩好好休息劳逸结合嘛。