前言
在前端的舞台上，CSS3是一位无比重要的明星。今天，我们将深入研究CSS3的纯代码案例，不仅为你展示一些惊艳的效果，更希望激发你对纯代码创意的无限想象。让我们一同探索编码的魅力！
渐变之美
1.1 纯CSS3实现的渐变背景
在这个案例中，我们将展示如何通过纯CSS3实现令人惊叹的渐变背景效果。通过以下步骤，你可以轻松运用这一技巧：
body { background: linear-gradient(to right, #ff8a00, #da1b60); height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Arial', sans-serif; color: #fff; }
解析：
linear-gradient: CSS3提供的渐变函数，用于创建水平线性渐变。
to right: 渐变的方向，这里表示从左至右。
#ff8a00 和 #da1b60: 渐变的起始和结束颜色。
height: 100vh: 使背景占据整个视口高度，保证渐变效果充满屏幕。
1.2 使用多重颜色和方向打造丰富渐变效果
通过在渐变中使用多个颜色和不同方向，可以创造出更为丰富的渐变效果。下面是一个演示如何制作对角线渐变的代码片段：
body { background: linear-gradient(to bottom right, #3494e6, #ec6ead, #3494e6); height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Arial', sans-serif; color: #fff; }
解析：
to bottom right: 渐变的方向，表示从左上角到右下角的对角线渐变。
#3494e6, #ec6ead, #3494e6: 三个颜色，分别为起始、中间和结束颜色。
1.3 渐变色停留动画的巧妙运用
通过使用CSS3动画，我们还可以实现渐变色的平滑过渡效果。以下是一个示例，演示了如何制作颜色停留动画：
@keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } body { background: linear-gradient(to right, #ff8a00, #da1b60); background-size: 200% 200%; animation: gradientAnimation 3s infinite; height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Arial', sans-serif; color: #fff; }
解析：
@keyframes gradientAnimation: 定义渐变动画的关键帧。
background-size: 200% 200%: 将背景尺寸设置为两倍，确保动画效果可见。
animation: gradientAnimation 3s infinite;: 将渐变动画应用于背景，3秒完成一次，无限循环。
通过这些例子，你可以深入了解如何运用CSS3渐变，制作出引人入胜的背景效果。这种技巧在网页设计中经常被用于打造吸引眼球的页面。
纯CSS图形绘制
2.1 使用border属性制作三角形、梯形等形状
className::before { content: ""; position: absolute; top: -10px; left: 0; width: 0; height: 0; border-width: 0 0 10px 10px; border-style: solid; border-color: transparent transparent #ffa718 transparent; }
className::before { content: ''; position: absolute; right: 0; top: 18px; width: 0px; height: 0px; border: 4px solid transparent; border-bottom: none; border-top-color: white; transition: transform .5s ease 0s; }
伪类箭头图标
// html 结构 <li class="have-menu"> <a href="">社区</a> <em class="arrow"> <b></b> <i></i> </em> </li> // css 样式 .arrow { position: absolute; right: 0; top: 50%; margin-top: -6px; width: 12px; height: 12px; transition: transform .2s ease 0s; } .arrow b { position: absolute; left: 4px; top: 2px; width: 6px; height: 6px; background-color: #fff; transform: rotate(45deg); } .arrow i { position: absolute; left: 4px; top: 0.5px; width: 6px; height: 6px; background-color: #2A2A2A; transform: rotate(45deg); } li.have-menu:hover .arrow { transform: rotate(180deg); // 鼠标移上去旋转180度 }
.pie-chart { width: 100px; height: 100px; background: conic-gradient(#3498db 0% 30%, #e74c3c 30% 70%, #2ecc71 70% 100%); border-radius: 50%; margin: 20px; }
conic-gradient是CSS中的渐变函数之一，用于创建锥形渐变（也称为圆锥渐变或圆锥渐变背景）。这种渐变效果沿着圆心辐射状地变化，非常适用于创建饼图、风格化的背景、加载动画等。
2.2 利用transform创建旋转、缩放的图形
浮动的阴影
li:hover{ box-shadow:0 15px 30px rgba(0,0,0,0.1) }
敲代码css准备
reset 样式复位表
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
eg:
/* 去掉table的默认样式 */ table{ width:100%; text-align:center;/*文本居中*/ border-collapse:collapse; /*表格的边框合并，如果相邻，则共用一个边框*/ border-spacing:0; /*设置行与单元格边框的间距。当表格边框独立（即border-collapse:separate;）此属性才起作用*/ }
base 公共类样式表
所有的公共样式单独写在这个表内，方便复用
eg：
.clear{ clear:both; } /* div内显示一行，超出部分用省略号显示 */ text-overflow{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} /* div内显示两行或三行，超出部分用省略号显示 */ text-overflow{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
常用代码
自动跳转至手网
<script type=text/javascript> function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag = true; for (var v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } } return flag; } var juf=IsPC(); if(!juf) window.location.href="/m";//手机 </script>
返回顶部
<script> $("#to-top").click(function(e) { $('body,html').animate({ scrollTop: 0 }, 500); }); </script>
返回上一步
href="javascript:window.history.go(-1);"
结语
纯代码案例不仅是技术的展示，更是一场对创意无限可能性的探索。通过学习这些纯CSS3实例，你将更深刻地理解并运用CSS3的强大之处。编码的世界充满了惊奇，让我们一同投入这场代码的冒险，创造出属于自己的编码艺术品。
