装饰设计甲级资质,wordpress分类设置seo,建设网站是什么职位,个人网站做多久有效果目录 一、运行效果
图片效果
二、项目概述
三、开发环境
四、实现步骤及代码
1.创建空文件夹
2.完成页面内容
3.完成css样式
五、项目总结
六、源码获取 一、运行效果
图片效果 二、项目概述 这个项目是一个加载动画效果#xff0c;用于展示一个花瓣样式的…目录 一、运行效果
图片效果
二、项目概述
三、开发环境
四、实现步骤及代码
1.创建空文件夹
2.完成页面内容
3.完成css样式
五、项目总结
六、源码获取 一、运行效果
图片效果 二、项目概述 这个项目是一个加载动画效果用于展示一个花瓣样式的loading效果。整个页面的背景颜色为深蓝色#161B29并且居中显示。加载动画的容器使用了一个类名为container的div元素设置了宽度为40vw高度为40vw并且居中显示在页面中央。 加载动画效果由8个类名为common的div元素组成每个div元素都有一个不同的类名分别是one、two、three、four、five、six、seven、eight。这些div元素通过设置不同的位置和旋转角度来形成花瓣的样式。每个div元素都有一个动画效果通过设置animation属性来实现。 除了花瓣效果加载动画还包括一个进度条效果。进度条由一个类名为bar的div元素和一个类名为progress的div元素组成。进度条的背景颜色为粉红色#E645D0进度条的颜色为青色#17E1E6通过设置左边距的值来实现进度条的动画效果。 整个页面还包括了淡入和淡出的动画效果。通过设置类名为fade-in和out的div元素的动画属性实现了页面在加载时的淡入效果和在加载完毕后的淡出效果。 三、开发环境
开发环境VsCode 编程语言HTML5CSS3 操作系统Windows 四、实现步骤及代码
1.创建空文件夹
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title公众号《编程乐学》- 花瓣样式Loading加载动画/title/headbody/body/html 2.完成页面内容 div classoutdiv classfade-indiv classcontainerdiv classone common/divdiv classtwo common/divdiv classthree common/divdiv classfour common/divdiv classfive common/divdiv classsix common/divdiv classseven common/divdiv classeight common/div/divdiv classbardiv classprogress/div/div/div/div
3.完成css样式 用于设置页面的样式。其中包括了背景颜色、容器大小、元素的位置和动画效果等。 首先是设置了页面的背景颜色为深蓝色#161B29。 接下来是容器的样式设置设置了容器的宽度和高度为40vw视口宽度的40%并将其居中显示。 然后是各个元素的样式设置这些元素被称为“common”共有8个每个元素都有一个不同的类名one、two、three...这些类名用于设置元素的位置和动画效果。每个元素都使用了绝对定位通过设置left、right、top和bottom属性来控制元素的位置。并设置了元素的旋转角度和阴影效果。 接下来是进度条的样式设置包括了进度条的宽度、高度、位置和背景色等。 最后是动画效果的设置通过使用keyframes关键字定义了不同的动画效果然后通过animation属性将这些动画效果应用到不同的元素上。 stylecharset utf-8;body {background: #161B29;margin: 0 auto;height: 100%;width: 100%;}.container {width: 40vw;height: 40vw;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}.common {height: 5vw;max-height: 100%;overflow: auto;width: 2vw;margin: auto;max-width: 100%;position: absolute;border-radius: 0vw 10vw 0vw 10vw;box-shadow: inset 0vw 0vw 0vw .1vw #E645D0, 0vw 0vw 1.5vw 0vw #E645D0;}.one {transform: rotate(45deg);left: 0;right: 0;top: 0;bottom: 7.5vw;}.two {transform: rotate(90deg);left: 5.5vw;right: 0;top: 0;bottom: 5.5vw;}.three {transform: rotate(135deg);left: 7.5vw;right: 0;top: 0;bottom: 0;}.four {transform: rotate(180deg);left: 5.5vw;right: 0;top: 5.5vw;bottom: 0;}.five {transform: rotate(225deg);left: 0;right: 0;top: 7.5vw;bottom: 0;}.six {transform: rotate(270deg);left: 0;right: 5.5vw;top: 5.5vw;bottom: 0;}.seven {transform: rotate(315deg);left: 0;right: 7.5vw;top: 0;bottom: 0;}.eight {transform: rotate(360deg);left: 0;right: 5.5vw;top: 0;bottom: 5.5vw;}.bar {width: 12vw;height: .25vw;left: 0;right: 0;top: 16vw;bottom: 0;margin: auto;overflow: hidden;background: #E645D0;}.progress {width: 12vw;height: .5vw;left: 0;right: 0;top: 0;bottom: 0;margin: auto;overflow: hidden;background: #17E1E6;}.one {animation: one 1s ease infinite;-moz-animation: one 1s ease infinite;/* Firefox */-webkit-animation: one 1s ease infinite;/* Safari and Chrome */-o-animation: one 1s ease infinite;/* Opera */}keyframes one {0%,100% {}50% {box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;}}.two {animation: two 1s .125s ease infinite;-moz-animation: two 1s .125s ease infinite;/* Firefox */-webkit-animation: two 1s .125s ease infinite;/* Safari and Chrome */-o-animation: two 1s .125s ease infinite;/* Opera */}keyframes two {0%,100% {}50% {box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;}}.three {animation: three 1s .25s ease infinite;-moz-animation: three 1s .25s ease infinite;/* Firefox */-webkit-animation: three 1s .25s ease infinite;/* Safari and Chrome */-o-animation: three 1s .25s ease infinite;/* Opera */}keyframes three {0%,100% {}50% {box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;}}.four {animation: four 1s .375s ease infinite;-moz-animation: four 1s .375s ease infinite;/* Firefox */-webkit-animation: four 1s .375s ease infinite;/* Safari and Chrome */-o-animation: four 1s .375s ease infinite;/* Opera */}.five {animation: five 1s .5s ease infinite;-moz-animation: five 1s .5s ease infinite;/* Firefox */-webkit-animation: five 1s .5s ease infinite;/* Safari and Chrome */-o-animation: five 1s .5s ease infinite;/* Opera */}keyframes five {0%,100% {}50% {box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;}}.six {animation: six 1s .625s ease infinite;-moz-animation: six 1s .625s ease infinite;/* Firefox */-webkit-animation: six 1s .625s ease infinite;/* Safari and Chrome */-o-animation: six 1s .625s ease infinite;/* Opera */}keyframes six {0%,100% {}50% {box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;}}.seven {animation: seven 1s .750s ease infinite;-moz-animation: seven 1s .750s ease infinite;/* Firefox */-webkit-animation: seven 1s .750s ease infinite;/* Safari and Chrome */-o-animation: seven 1s .750s ease infinite;/* Opera */}.eight {animation: eight 1s .875s ease infinite;-moz-animation: eight 1s .875s ease infinite;/* Firefox */-webkit-animation: eight 1s .875s ease infinite;/* Safari and Chrome */-o-animation: eight 1s .875s ease infinite;/* Opera */}keyframes eight {0%,100% {}50% {box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;}}.progress {animation: progress 15s ease;-moz-animation: progress 15s ease;/* Firefox */-webkit-animation: progress 15s ease;/* Safari and Chrome */-o-animation: progress 15s ease;/* Opera */}.fade-in {animation: fade-in 2s ease;-moz-animation: fade-in 2s ease;/* Firefox */-webkit-animation: fade-in 2s ease;/* Safari and Chrome */-o-animation: fade-in 2s ease;/* Opera */}keyframes fade-in {from {opacity: 0;}to {opacity: 1;}}/style 五、项目总结 这个项目通过使用CSS样式表代码实现了一个花瓣样式的loading加载动画效果包括背景颜色、容器大小、元素位置和动画等。通过设置不同的动画属性和关键帧实现了花瓣的旋转效果、进度条的动画效果以及页面的淡入和淡出效果。
六、源码获取 ✨还可以关注宫纵号《编程乐学》菜单栏有很多优质的开源项目以及更多的编程资料等你来学习。
