餐厅网站建设什么,网站开发计算机语言的比较,行业网站建设的开发方案,网站建设功能文案大家好#xff0c;我是 Just#xff0c;这里是「设计师工作日常」#xff0c;今天分享的是用css 实现一个动态的太极八卦图。
《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。 目录 整体效果核心代码html 代码css 部分代码 完整代码如下html 页面css 样式页面…大家好我是 Just这里是「设计师工作日常」今天分享的是用css 实现一个动态的太极八卦图。
《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。 目录 整体效果核心代码html 代码css 部分代码 完整代码如下html 页面css 样式页面渲染效果 整体效果 知识点 ① nth-of-type 选择器的使用 ② 关于 transform 中 transform-origin 的使用方式 ③ animation 动画和 animation-delay 延迟参数的使用 思路先搭建太极阴阳鱼利用 :before 和 :after 伪元素画出阴阳鱼和鱼眼然后分别绘制出八个卦象的图形最后分别给太极阴阳鱼和卦象设置不同的动画参数。 核心代码部分简要说明了写法思路完整代码在最后可直接复制到本地运行。
核心代码
html 代码
div classtaijibaguadiv classtaijidiv classyu/div/divdiv classbagua title乾 - 天/divdiv classbagua title兑 - 泽div classwhite3/div/divdiv classbagua title离 - 火div classwhite2/div/divdiv classbagua title震 - 雷div classwhite2/divdiv classwhite3/div/divdiv classbagua title坤 - 地div classwhite1/divdiv classwhite2/divdiv classwhite3/div/divdiv classbagua title艮 - 山div classwhite1/divdiv classwhite2/div/divdiv classbagua title坎 - 水div classwhite1/divdiv classwhite3/div/divdiv classbagua title巽 - 风div classwhite1/div/div
/div太极阴阳鱼以及八卦页面代码部分。 css 部分代码
.taijibagua{width: 200px;height: 200px;display: flex;justify-content: center;align-items: center;position: relative;
}
.taiji{width: 100px;height: 100px;position: relative;border-radius: 50%;box-shadow: 0px -5px 10px 0px rgba(42,245,152,0.4), 0px 5px 10px 0px rgba(8,174,234,0.4);animation: zhuan 5s linear infinite;
}
.taiji:before,.taiji:after{content: ;width: 100px;height: 50px;position: absolute;background-color: #fff;border-radius: 100px 100px 0 0;
}
.taiji:after{top: 50px;background-color: #000;border-radius: 0 0 50px 50px;
}
.yu:before,.yu:after{content: ;width: 12px;height: 12px;position: absolute;top: 25px;left: 50px;border-radius: 50%;background-color: #000;border: 19px solid #fff;z-index: 1;
}
.yu:after{left: 0;background-color: #fff;border: 19px solid #000;
}
keyframes zhuan{to {transform: rotate(360deg);}
}
.bagua{width: 40px;height: 5px;background-color: #2AF598;position: absolute;top: 0;transform-origin: 20px 100px;animation: eff49 5s linear infinite;opacity: 0.2;
}
.bagua:before,.bagua:after{content: ;width: 40px;height: 5px;background-color: #08AEEA;position: absolute;top: 10px;
}
.bagua:after{top: 20px;background-color: #000;
}
.taijibagua .bagua:nth-of-type(3){transform: rotate(-45deg);animation-delay: 4.375s;
}
.taijibagua .bagua:nth-of-type(4){transform: rotate(-90deg);animation-delay: 3.75s;
}
.taijibagua .bagua:nth-of-type(5){transform: rotate(-135deg);animation-delay: 3.125s;
}
.taijibagua .bagua:nth-of-type(6){transform: rotate(-180deg);animation-delay: 2.5s;
}
.taijibagua .bagua:nth-of-type(7){transform: rotate(-225deg);animation-delay: 1.875s;
}
.taijibagua .bagua:nth-of-type(8){transform: rotate(-270deg);animation-delay: 1.25s;
}
.taijibagua .bagua:nth-of-type(9){transform: rotate(-315deg);animation-delay: 0.625s;
}
.white1,.white2,.white3{width: 10px;height: 7px;background-color: #ffffff;position: absolute;top: -1px;left: 50%;transform: translate(-50%,0);z-index: 10;
}
.white2{top: 10px;
}
.white3{top: 20px;
}
keyframes eff49{0% {opacity: 1;}100%{opacity: 0.2;}
}1、.taiji:before 和 .taiji:after 伪元素分别绘制黑白阴阳鱼的主体 .yu:before 和 yu:after 伪元素分别绘制黑白阴阳鱼的小鱼眼然后设置旋转动画顺时针旋转。 2、.bagua 配合 .bagua:before 和 .bagua:after 绘制出三条矩形形状然后利用不同的 .white1 、.white2 、 .white3 去遮挡分割矩形来实现不同的卦象 3、页面中的八个 .bagua 通过 transform-origin 定义旋转圆点然后用 :nth-of-type(n) 选择器分别定义八个卦象的旋转角度让八个卦象分布在太极阴阳鱼四周 4、最后定义动画参数且使用 animation-delay 来延迟每个卦象的动画启动时间来实现卦象随着太极阴阳鱼旋转时不停亮起的效果。 完整代码如下
html 页面
!DOCTYPE html
html langzhheadmeta charsetutf-8link relstylesheet hrefstyle.csstitle太极八卦图/title/headbodydiv classappdiv classtaijibaguadiv classtaijidiv classyu/div/divdiv classbagua title乾 - 天/divdiv classbagua title兑 - 泽div classwhite3/div/divdiv classbagua title离 - 火div classwhite2/div/divdiv classbagua title震 - 雷div classwhite2/divdiv classwhite3/div/divdiv classbagua title坤 - 地div classwhite1/divdiv classwhite2/divdiv classwhite3/div/divdiv classbagua title艮 - 山div classwhite1/divdiv classwhite2/div/divdiv classbagua title坎 - 水div classwhite1/divdiv classwhite3/div/divdiv classbagua title巽 - 风div classwhite1/div/div/div/div/body
/htmlcss 样式
/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.taijibagua{width: 200px;height: 200px;display: flex;justify-content: center;align-items: center;position: relative;
}
.taiji{width: 100px;height: 100px;position: relative;border-radius: 50%;box-shadow: 0px -5px 10px 0px rgba(42,245,152,0.4), 0px 5px 10px 0px rgba(8,174,234,0.4);animation: zhuan 5s linear infinite;
}
.taiji:before,.taiji:after{content: ;width: 100px;height: 50px;position: absolute;background-color: #fff;border-radius: 100px 100px 0 0;
}
.taiji:after{top: 50px;background-color: #000;border-radius: 0 0 50px 50px;
}
.yu:before,.yu:after{content: ;width: 12px;height: 12px;position: absolute;top: 25px;left: 50px;border-radius: 50%;background-color: #000;border: 19px solid #fff;z-index: 1;
}
.yu:after{left: 0;background-color: #fff;border: 19px solid #000;
}
keyframes zhuan{to {transform: rotate(360deg);}
}
.bagua{width: 40px;height: 5px;background-color: #2AF598;position: absolute;top: 0;transform-origin: 20px 100px;animation: eff49 5s linear infinite;opacity: 0.2;
}
.bagua:before,.bagua:after{content: ;width: 40px;height: 5px;background-color: #08AEEA;position: absolute;top: 10px;
}
.bagua:after{top: 20px;background-color: #000;
}
.taijibagua .bagua:nth-of-type(3){transform: rotate(-45deg);animation-delay: 4.375s;
}
.taijibagua .bagua:nth-of-type(4){transform: rotate(-90deg);animation-delay: 3.75s;
}
.taijibagua .bagua:nth-of-type(5){transform: rotate(-135deg);animation-delay: 3.125s;
}
.taijibagua .bagua:nth-of-type(6){transform: rotate(-180deg);animation-delay: 2.5s;
}
.taijibagua .bagua:nth-of-type(7){transform: rotate(-225deg);animation-delay: 1.875s;
}
.taijibagua .bagua:nth-of-type(8){transform: rotate(-270deg);animation-delay: 1.25s;
}
.taijibagua .bagua:nth-of-type(9){transform: rotate(-315deg);animation-delay: 0.625s;
}
.white1,.white2,.white3{width: 10px;height: 7px;background-color: #ffffff;position: absolute;top: -1px;left: 50%;transform: translate(-50%,0);z-index: 10;
}
.white2{top: 10px;
}
.white3{top: 20px;
}
keyframes eff49{0% {opacity: 1;}100%{opacity: 0.2;}
}
页面渲染效果 以上就是所有代码以及简单的思路希望对你有一些帮助或者启发。 [1] 原文阅读 CSS 是一种很酷很有趣的计算机语言在这里跟大家分享一些 CSS 实例 Demo为学习者获取灵感和思路提供一点帮助希望你们喜欢。
我是 Just这里是「设计师工作日常」求点赞求关注
