深圳珠宝品牌网站设计,网页设计与制作课程大纲,沧州自适应网站建设,甘肃省建设监理协会网站内容占位符
前言
随着我们对HTML和CSS3的学习逐渐深入#xff0c;相信大家都已经掌握了网页制作的基础知识#xff0c;包括如何使用HTML标记构建网页结构#xff0c;以及如何运用CSS样式美化页面。为了进一步巩固和熟练这些技能#xff0c;今天我们一起来完成一个有趣且实…内容占位符
前言
随着我们对HTML和CSS3的学习逐渐深入相信大家都已经掌握了网页制作的基础知识包括如何使用HTML标记构建网页结构以及如何运用CSS样式美化页面。为了进一步巩固和熟练这些技能今天我们一起来完成一个有趣且实用的项目——内容占位符的设计与实现。 效果图展示
动态效果可点击查看 内容占位符 学习目标
本单元主要完成学习目标 1.使用css实现三角形效果 2.如何给元素添加动画
结构分析
任务1静态效果实现
知识学习
::before ::after 介绍
::before ::after 伪元素用来给元素前面或者后面插入指定内容
使用content属性来指定要插入的内容必须配合content属性一起使用content的属性值可以为空伪元素的display属性值默认为inline
使用css制作三角形原理
我们制作三角其实是利用边框border 属性来进行制作大多数时候我们都是单纯认为边框是一条实线、虚线点这些并且平时用的都是同一个颜色这样不好看出来所以这里我们用四种颜色进行演示 第一步: background-color: coral;
width: 150px;
height: 150px;
border-left: 5px solid aqua;
border-right: 5px solid rgb(0, 255, 21);
border-top: 5px solid rgb(255, 0, 238);
border-bottom: 5px solid rgb(255, 0, 0);第二步: border-left: 100px solid aqua;
border-right: 100px solid rgb(0, 255, 21);
border-top: 100px solid rgb(255, 0, 238);
border-bottom: 100px solid rgb(255, 0, 0);第三步 border-left: 150px solid aqua;
border-right: 150px solid rgb(0, 255, 21);border-top: 150px solid rgb(255, 0, 238);
border-bottom: 150px solid rgb(255, 0, 0);第四步 width: 0px;
height: 0px;
border-left: 150px solid aqua;
border-right: 150px solid rgb(0, 255, 21);
border-top: 150px solid rgb(255, 0, 238);
border-bottom: 150px solid rgb(255, 0, 0);我们可以看到当内部宽度变小时边框不断的向内部扩张这里可以用极限的思维来进行理解当宽度为0和高度也为0的情况下width0height0也就是说盒子宽高趋近为零时就会变成这个样子。
如何实现三角形效果
只需要在不需要的边框加一个透明颜色transparent就可以了 style.box{width: 0;height: 0;border-left:100px solid pink;border-bottom:100px solid rgb(192, 255, 193);border-right:100px solid transparent;border-top:100px solid transparent;}/style
/head
bodydiv classbox/div
/body效果图 任务实施
style.bigBox {position: relative; //给三角形盒子进行相对定位left:45%; //让元素处于页面宽度大约45%的位置top: 350px;width: 90px;height: 90px;}.bigBox::after,.bigBox::before {content: ; /*content: ;这是必需的因为伪元素必须有内容才能显示。 */position: absolute;border: 50px solid transparent;border-bottom-color: #fff;}
.bigBox::before {transform: rotate(90deg); //将第一个写完的三角形旋转90度让两个三角形拼接成一个大的直角三角形/style
/head
bodydiv classbigBox /div
/body效果展示 任务2动态旋转效果实现
知识学习
keyframes 的使用
keyframes 规则是创建动画。keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。当在 keyframes 创建动画把它绑定到一个选择器否则动画不会有任何效果。指定至少这两个 CSS3 的动画属性绑定向一个选择器 animation 属性
创建动画序列需要使用 animation 属性或其子属性该属性允许配置动画时间、时长以及其他动画细节但该属性不能配置动画的实际表现动画的实际表现是由 keyframes 规则实现
任务实施
keyframes rotateA {0%,25% {transform: rotate(0deg);}50%,75% {transform: rotate(180deg);}100% {transform: rotate(360deg);}}keyframes rotateB {0%,25% {transform: rotate(90deg);}50%,75% {transform: rotate(270deg);}100% {transform: rotate(450deg);}}全部代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title内容占位符/titlestylebody {background-color: rgb(4, 4, 59);}.bigBox {position: relative;left:45%;top: 350px;width: 90px;height: 90px;}.bigBox::after,.bigBox::before {content: ; position: absolute;border: 50px solid transparent;border-bottom-color: #fff;animation: rotateA 2s linear infinite 0.5s;} .bigBox::before {transform: rotate(90deg);animation: rotateB 2s linear infinite;} keyframes rotateA {0%,25% {transform: rotate(0deg);} 50%,75% {transform: rotate(180deg);} 100% {transform: rotate(360deg);}}keyframes rotateB {0%,25% {transform: rotate(90deg);} 50%,75% {transform: rotate(270deg);}100% {transform: rotate(450deg);}}/style
/head
bodydiv classbigBox /div
/body
/html
