css3 纯代码案例-阿里云开发者社区

css3 纯代码案例

2024-02-05 63

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： css3 纯代码案例

前言

在前端的舞台上，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的强大之处。编码的世界充满了惊奇，让我们一同投入这场代码的冒险，创造出属于自己的编码艺术品。

文章标签：

前端开发

关键词：

CSS案例

css3 纯代码案例

前言

渐变之美

1.1 纯CSS3实现的渐变背景

1.2 使用多重颜色和方向打造丰富渐变效果

1.3 渐变色停留动画的巧妙运用

纯CSS图形绘制

2.1 使用border属性制作三角形、梯形等形状

伪类箭头图标

2.2 利用transform创建旋转、缩放的图形

浮动的阴影

敲代码css准备

reset 样式复位表

base 公共类样式表

常用代码

自动跳转至手网

返回顶部

返回上一步

结语

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

css3 纯代码案例

前言

渐变之美

1.1 纯CSS3实现的渐变背景

1.2 使用多重颜色和方向打造丰富渐变效果

1.3 渐变色停留动画的巧妙运用

纯CSS图形绘制

2.1 使用border属性制作三角形、梯形等形状

伪类箭头图标

2.2 利用transform创建旋转、缩放的图形

浮动的阴影

敲代码css准备

reset 样式复位表

base 公共类样式表

常用代码

自动跳转至手网

返回顶部

返回上一步

结语

热门文章

最新文章

相关课程

相关电子书

相关实验场景