css3 纯代码案例

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

目录
相关文章
|
1月前
|
前端开发
CSS3的几个变形案例……
CSS3的几个变形案例……
17 0
|
1月前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css
5 0
|
3月前
|
存储 前端开发 算法
【正在完善】高级CSS特效解析其示范案例
【正在完善】高级CSS特效解析其示范案例
125 0
|
3月前
|
前端开发
CSS总结笔记+案例(下)
CSS总结笔记+案例
41 1
|
3月前
|
前端开发 Python
CSS总结笔记+案例(上)
CSS总结笔记+案例
33 1
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
17 0
|
5月前
|
前端开发
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式。具体案例解析
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式。具体案例解析
29 2
|
5月前
|
前端开发 UED
CSS 支持动画效果,可以通过关键帧动画或过渡动画实现动态效果。具体案例解析
CSS 支持动画效果,可以通过关键帧动画或过渡动画实现动态效果。具体案例解析
49 1
|
7月前
|
前端开发 JavaScript 开发者
|
7月前
|
JavaScript 前端开发
jQuery工具方法&CSS属性及方法(详细方法介绍及案例)
jQuery工具方法&CSS属性及方法(详细方法介绍及案例)
47 0