CSS-200个小案例（一）

最新推荐文章于 2024-06-24 10:48:58 发布
最新推荐文章于 2024-06-24 10:48:58 发布
阅读量386 收藏 2
点赞数
文章标签： css tensorflow 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58276266/article/details/134798979
版权

文章目录


youtube视频链接：https://www.youtube.com/watch?v=TawH-AqHTXc&list=PL5e68lK9hEzdYG6YQZCHtM9gon_cDNQMh&ab_channel=OnlineTutorials

1.Simple Parallax Scrolling Effect（简单的视差滚动效果）

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moon Light Parallax Effects With CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <img src="bg.jpg" id="bg" alt="">
        <img src="moon.png" id="moon" alt="">
        <img src="mountain.png" id="mountain" alt="">
        <img src="road.png" id="road" alt="">
         <h2 id="text">Moon Light</h2>
    </section>
    <script>
        let bg=document.getElementById('bg');
        let moon=document.getElementById('moon');
        let mountain=document.getElementById('mountain');
        let road=document.getElementById('road');
        let text=document.getElementById('text');
        window.addEventListener('scroll',function(){
            var value=window.scrollY;
            bg.style.top=-value*0.5+'px';
            moon.style.left=-value*0.5+'px';
            mountain.style.top=-value*0.15+'px';
            road.style.top=value*0.15+'px';
            text.style.top=value*1+'px';
        })
    </script>
</body>
</html>


*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins',sans-serif;
}
body{
    background: #0a2a43;
    min-height: 1500px;/*设置元素的最小高度*/
}
section{
    /* 相对定位 */ 
    position: relative;
    width: 100%;
    height: 100vh;/*vh 视口的初始包含块的高度的 1%*/
    overflow: hidden;
    /* 弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间 */
    display: flex;
    /* 居中对齐 */
    /* 横向 */
    justify-content: center;
    /* 纵向 */
    align-items: center;
}
section:before{
    content: '';
    position: absolute;
     /* 相对于section进行定位 */
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top,#0a2a43,transparent);
    z-index: 10000;
}
section:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:#0a2a43;
    /* 因为这里设置了在最高层显示 */
    z-index: 10000;
    /* mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 */
    mix-blend-mode: color;
}
section img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;;
    /* object-fit CSS 属性指定可替换元素（例如：<img> 或 <video>）的内容应该如何适应到其使用高度和宽度确定的框。 */
    object-fit: cover;
    /* pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。 */
    pointer-events: none;
}
#text{
    position: relative;
    color: #fff;
    font-size: 10em;
}
#road{
    z-index: 2;
}

2.Fullscreen Video Background（全屏视频背景）


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fullscreen Video Background</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="banner">
      <video autoplay muted loop>
        <source src="Mountains.mp4" type="video/mp4" />
      </video>
      <div class="content">
        <h1>Fullscreen Video banner</h1>
        <p>
          To accompany his instructions for depicting twilight, Latrobe drew a
          lone Conestoga wagon—named for the Pennsylvania town just southeast of
          Columbia where the vehicles were thought to have been built—traveling
          west at dusk along the southern branch of the Juniata River, today
          known as the Raystown Branch. 
        </p>
      </div>
    </div>
  </body>
</html>




body{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    height: 1000px;
}
.banner{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner video{
    /* 让它脱离文档流 */
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.banner .content{
    position: relative;
    z-index: 1;
    max-width: 1000px;
    text-align: center;
}
.banner .content h1{
    margin: 0;
    padding: 0;
    font-size: 4em;
    text-transform: uppercase;
    color: #fff;
}
.banner .content p{
    font-size: 1.5em;
    color: #fff;
}

3.Transform Effects on Scroll(滚动时产生的变换效果）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Scroll Effects</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <span class="curve">
            <img src="curve.png" alt="">
        </span>
    </section>
    <script>
        var scroll=document.querySelector('.curve');
        window.addEventListener('scroll',function(){
            // 宽度不变，高度缩短
            var value=1+window.scrollY/-500;
            scroll.style.transform=`scaleY(${value})`
        })
    </script>
</body>
</html>




*{
    margin:0;
    padding: 0;
}
body{
    height: 200vh;
    background: #111;
}
section{
    position: absolute;
    width: 100%;
    height: calc(100% - 200px);
    background: #2abbff;
}
section .curve{
    position: absolute;
    bottom: -200px;
    height: 200px;
    width: 100%;
    /* transform-origin CSS 属性让你更改一个元素变形的原点。 */
    transform-origin: top;
}
section .curve img{
    width: 100%;
    height: 100%;
}

4.Fullscreen Overlay Responsive Navigation Menu(全屏覆盖响应式导航菜单）


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fullscreen Menu</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="toggleIcon" onclick="menuToggle()"></div>
    <div id="menu-overlay">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <script>
        function menuToggle(){
            var nav=document.getElementById('menu-overlay');
            nav.classList.toggle('active');
            var toggleIcon=document.getElementById('toggleIcon');
            toggleIcon.classList.toggle('active');
        }
    </script>
  </body>
</html>



*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins' sans-serif;
}
#menu-overlay{
    /* 整页的效果 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f00;
    /* 包含的项居中显示 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    /* 初始状态缩小为0.1 */
    transform: scale(0.1);
    transition: 0.5s;
}
#menu-overlay.active{
  transform: scale(1);
}
#menu-overlay ul{
    position: relative;
}
#menu-overlay ul li{
    position: relative;
    list-style: none;
    text-align: center;
    display: block;
}
#menu-overlay ul li a{
    position: relative;
    text-decoration: none;
    font-size:3.5em;
    padding: 0 10px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}
/* 黄线 */
#menu-overlay ul li a:before{
    content: '';
    position: absolute;
    /* 相对于a定位 */
    top: 50%;
    left: 0;
    width: 100%;
    height: 8px;
    background: #ff0;
    transform: scaleX(0);
    transform-origin: right;
    transition: 0.5s transform;
}
#menu-overlay ul li a:hover:before{
    transform: scaleX(1);
    transform-origin: left;
    transition: 0.5s transform;
}
#toggleIcon{
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #ff0 url(open.png);
    z-index: 1;
    cursor: pointer;
}
#toggleIcon.active{
    background: #ff0 url(close.png);
}

5.Creative Check List（有创意性的清单）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creative Item Check List</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="list">
        <h2>CSS Only Item Check List</h2>
        <label>
            <input type="checkbox" name="">
            <i></i>
            <span>with the increasing development of society</span>
        </label>
        <label>
            <input type="checkbox" name="">
            <i></i>
            <span>therefore,the ability to study CSS is important</span>
        </label>
        <label>
            <input type="checkbox" name="">
            <i></i>
            <span>the followings are reasons and concrete evidence</span>
        </label>
        <label>
            <input type="checkbox" name="">
            <i></i>
            <span>in the first place</span>
        </label>
        <label>
            <input type="checkbox" name="">
            <i></i>
            <span>moreover</span>
        </label>
        <label>
            <input type="checkbox" name="">
            <i></i>
            <span>last but not least</span>
        </label>
    </div>
</body>
</html>




* {
  margin: 0;
  padding: 0;
  font-family: consolas;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #001925;
}
.list {
  padding: 30px 75px 10px 30px;
  position: relative;
  background: #042b3e;
  border-top: 50px solid #03a9f4;
}
.list h2 {
  color: #fff;
  font-size: 30px;
  padding: 10px 0;
  margin-left: 10px;
  display: inline-block;
  border-bottom: 4px solid #fff;
}
.list label {
  position: relative;
  display: block;
  margin: 40px 0;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
.list input[type="checkbox"] {
  -webkit-appearance: none;
}
.list i {
  position: absolute;
  top: 0;
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
}
.list input[type="checkbox"]:checked ~ i {
  /* 用边框变换成对勾 */
  top: 1;
  border-top: none;
  border-right: none;
  height: 15px;
  width: 25px;
  transform: rotate(-45deg);
}
.list span{
    position: relative;
    left: 40px;
    transition: 0.5s;
}
.list span:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    transform: translateY(-50%) scaleX(0);
    transform-origin: right;
    transition: 0.5s transform;
}
.list input[type="checkbox"]:checked~span:before{
   transform:  translateY(-50%) scaleX(1);
   transform-origin: left;
   transition: 0.5s transform;
}
.list input[type="checkbox"]:checked~span{
  color: #154e6b;
}

6.Moving Car Using CSS Animation Effects（用CSS动画实现小车移动）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Css Moving Background Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="bg">
        <img src="car.png" alt="">
    </div>
  </body>
</html>



body {
  margin: 0;
  padding: 0;
}
.bg {
  position: relative;
  background: url(background.png);
  height: 100vh;
  background-size: cover;
  /* background-position CSS 属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。 */
  background-position: 0 0;
  background-repeat: repeat-x;
  animation: animate 5s linear infinite;
}
.bg img{
    position: absolute;
    bottom: 8px;
    left: 100px;
}
@keyframes animate {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

7.Awesowe Social Media Button Hover Animation（了不起的社交媒体按钮悬停动画）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Social Media Button Hover Effects</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
      integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <ul>
      <li>
        <a href="#"><i class="fa-brands fa-facebook-f"></i>Facebook</a>
      </li>
      <li>
        <a href="#"><i class="fa-brands fa-twitter"></i> Twitter</a>
      </li>
      <li>
        <a href="#"><i class="fa-brands fa-google"></i>Google++</a>
      </li>
      <li>
        <a href="#"><i class="fa-brands fa-linkedin"></i>Linkedin</a>
      </li>
      <li>
        <a href="#"><i class="fa-brands fa-instagram"></i>Instagram</a>
      </li>
    </ul>
   
  </body>
</html>


body{
    margin: 0;
    padding: 0;
    background: #262626;
}
ul{
    position: absolute;
    top: 50%;
    left: 50%;
    /* CSS 属性 translate 允许你单独声明平移变换，并独立于 transform 属性。 */
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    display: flex;
}
ul li{
    list-style: none;
}
ul li a{
    position: relative;
    display: block;
    width: 150px;
    height: 80px;
    color: #fff;
    font-family: sans-serif;
    line-height: 80px;
    text-align: center;
    font-size: 16px;
    text-decoration: none;
    border: 1px solid #000;
    border-right: none;
    transition: .5s;
}
ul li a:last-child{
    border-right: 1px solid #000;
}
ul li a:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    overflow: hidden;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    /* ease-in-out 先加速后减速 */
    transition: transform 0.5s ease-in-out;
}
ul li a:hover:before{
    transform: scaleX(1);
    transform-origin: left;
}
ul li:nth-child(1) a:before{
    background: #3b5999;
}
ul li:nth-child(2) a:before{
    background: #55acee;
}
ul li:nth-child(3) a:before{
    background: #dd4b39;
}
ul li:nth-child(4) a:before{
    background: #0077B5;
}
ul li:nth-child(5) a:before{
    background: #e4405f;
}

8.Align Text Center Vertical and Horizontal（垂直和水平对齐文本中心）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Align Center</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <div class="content">A</div>
    </div>
</body>
</html>



body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: #1E90FF ;
  display: table;
  color: #fff;
}
.content{
    padding: 20px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 8em;
}

9.Creative DIV Shape(创意性的div形状


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Creative DIV Shape with Cool Hover Effects</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <p>
        Education is an essential part of our lives. It shapes the way we think,
        the way we act, and the way we interact with the world around us. It
        allows us to gain the knowledge and skills we need to pursue our dreams
        and achieve our goals.
      </p>
    </div>
  </body>
</html>



body{
    margin: 0;
    padding: 0;
}
div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0 0 0 15px #03a9f4;
    box-sizing: border-box;
    text-align: center;
    transition: .5s;
}
div:hover{
    border-radius: 0;
}
div:before{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #03a9f4;
    z-index: -1;
    transform: rotate(-45deg);
    border-radius: 10px;
}
div p{
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 16px;
    padding: 20px;
    font-family: sans-serif;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: .5s;
}
div:hover p{
    /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
    box-shadow: 0 0 50px rgba(0, 0, 0, .5);
}

10.how to create css Icon Hover Effect（如何创建css图标悬停效果）

这里面如果Font Awesome不会使用的话，可以看我的《用ChatGPT撰写Font Awesome文章》

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Icon Hover Effect</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
      integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body>
    <ul>
      <li><i class="fa-solid fa-gift"></i></li>
      <li><i class="fa-solid fa-martini-glass"></i></li>
      <li><i class="fa-solid fa-earth-asia"></i></li>
      <li><i class="fa-solid fa-graduation-cap"></i></li>
    </ul>
  </body>
</html>




body {
  margin: 0;
  padding: 0;
  background: #ff003b;
}
ul {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
ul li {
  list-style: none;
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  font-size: 50px;
  position: relative;
  color: #262626;
  /* z-index 较大的元素会覆盖较小的元素在上层进行显示 */
  z-index: 1;
}
ul li:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ff003b;
  border-radius: 50%;
  transform: scale(0);
  transition: 0.5s ease-in-out;
  z-index: -1;
}
ul li:hover:before {
  transform: scale(0.9);
}
ul li:hover {
  color: #fff;
}
银河系的一束光
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 小案例 文字超出 ... 显示、导航鼠标移入变色、鼠标移入图片放大、-webkit-overflow-scrolling : touch、单行文本 两端对齐
夜阑珊妖妖
09-11 259
记录一下工作中常用的css 小案例吧。。 1. 实现文字超出 … 显示 div{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 借鉴于：https://www.cnblogs.com/gopark/p/8875655.html 2. 导航鼠标移入变色 添加动画效果，不再那么死板的直接变色 ...
css小实例
Zero_ying的博客
07-08 276
界面运行效果如下所示： 界面代码如下： 由于系统会为某些元素设置默认的margin值或者padding值，所以先要清除所有元素的margin和padding值。即：*{margin 0； padding 0；}；此外还要将<li>标签中的list-style设为none。对于box1，只给了高度height的值是因为对于浏览器来说，不写宽度就默认从浏览器的最左边到最右边。 ...
CSS 轻松实现常见各类奇形怪状按钮
柑橘乌云_
06-24 1250
基于上述的实现，我们不难发现，一些稍微特殊的按钮，无非都通过拼接、障眼法、遮罩等方式实现。渐变（线性渐变、径向渐变、多重渐变）遮罩mask裁剪clip-path变形transform发挥了重要的作用，熟练使用它们，我们对于这些图形就可以信手拈来，基于它们的变形也能从容面对。上述的图形，再配合，基本都能实现不规则阴影。再者，更为复杂的图形，如下所示：还是切图吧，CSS 虽好，实际使用中也需要考虑投入产出比。
css分享小案例
天天写代码
06-29 178
这里看一下 cs3中的旋转和动画的实例 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画</title> <style>
css小案例 小demo
LXFX1108的专栏
02-03 775
网站带竖线的菜单：代码地址点击这里
两个CSS小案例总结
qq_41944038的博客
06-11 513
前言 刚学完html5+css3，因为觉得对css3的知识还不太熟悉，所以在codepen等开源网站上找了两个纯css案例学习，我的学习方法是，看一遍源代码，把不理解的地方标注，然后再自己动手敲一遍，在敲代码的过程中结合预览效果、百度知识点查找、w3cschool手册来加深理解。这个方法对我个人而言，效果非常不错，结合实践自己思考，自己查找资料，最后来博客做一个总结输出。 正文 以下是最近做的两个...
html+js+css-一个基础的"Hello, World!"静态网页案例
07-02
在本案例中，我们创建了一个非常基础的“Hello, World!”网页。 - **文档类型声明**：`<!DOCTYPE html>` 告诉浏览器这是一个 HTML5 文档。 - **根元素**：`<html>` 元素包含整个网页的内容。 - **元信息**：`<head>...
HTML---CSS----基础知识及代码----各种小程序网页设计
04-09
在实训和案例学习中，你可以通过编写简单的网页和小程序，逐步掌握HTML的基本标签、CSS的选择器和样式规则。此外，还可以学习如何使用Bootstrap、Flexbox或Grid等工具进行快速布局，以及如何利用JavaScript进行动态...
awesome-css-learning：仅限于最佳CSS学习资源的小清单
01-31
"awesome-css-learning" 这个标题表明我们关注的是一个关于CSS学习的精选资源集合。"仅限于最佳CSS学习资源的小清单" 暗示这个压缩包包含了一系列高质量的学习材料，旨在帮助用户高效掌握CSS这门样式语言。 【描述...
css 流动边框 - 多个html案例
最新发布
07-02
css 流动边框 - 多个html案例
HTMl+CSS登录小实例
03-21
一个实用的HTML+CSS的登录界面，小实战案例
50个div+css经典案例
11-16
10个div+css经典案例,宠物网、电子产品类、个人网站、欢乐餐厅、科技公司、家居、咖啡店、旅游网站、冒险岛、美食、时代财富科技、中国音乐网。。。。提供给div+css的学习者，浏览器兼容性好！！！！
常用的css小例子
weixin_41970780的博客
11-17 542
常用的css小例子 第一种效果： 录制GIF有点卡，但是你单纯运行代码美滋滋哦！ 上代码： <span class="shake">弹</span> <style> .shake{ width:40px; height:40px; display:block; background:lightgreen; border-radius:50%; margin:5px; color:#fff; font-siz
div+css小案例
wfdtxz的专栏
12-11 3286
demo.html 这是个css体验例子 my.css .style{ /*宽度*/ width:400px;/*一定要有分号*/ height:300px; background-color: silver; border:1px solid red; margin-left:400px; margin-top:250px; padding-t
css3实例小项目,CSS3实现小案例
weixin_35588980的博客
08-03 375
今天在学习一些css3的属性，其中比较有意思的就是transform和backface-visibility。transform属性，该属性允许我们对元素进行旋转、缩放、移动或倾斜。我相信大家对translate和rotate以及scale是比较熟悉的。它们分别实现平移，旋转和缩放功能。但是今天我们用到的是skew属性，它可以实现倾斜转换。backface-visibility属性定义当元素不面向...
CSS基础学习案例
weixin_52031422的博客
07-07 1602
HTML标签 CSS样式引用CSS：标签，头部， 文件 CSS样式 页面布局 三个区域logo,sub-menu，sub-search 4.整合 顶部菜单 + 二级菜单 小结 a标签是行内标签，行内标签的高度，内外边距， 默认无效垂直方向居中a标签默认有下划线，去除 + 鼠标放上后该变标签样式 5. 推荐菜单 5.1整合案例如下 5.2 小结 设置透明度,其值由0-1，值越大越接近本色 6.2 after（伪类） 作用：去除文档流 6.3...
HTML,CSS，JS小实例
韬光养晦
09-19 2057
eg： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #ICtable{ font-family: "微软雅黑"; width: 80%...
css3多重背景小案例
qq_42181069的博客
05-21 686
     关于多重背景这个css3中很常用的属性，本来没什么可以详细拿出来讲的，但是，昨天，是我们一年一度的520，以及今天是一年一天的521，我这个和代码一起过的小仙女，有脾气了~~~~所以拼个图，来表达一下我此时此刻的心情，效果图如下：代码如下：1、css部分：注意一下多重背景的写法就行，只有一个background,图片的话大家可以自己去找好看的，然后就是中间嵌入的图片要找好坐标，大家可以自...
postcss-pxtorem用法案例
04-03
postcss-pxtorem是一个PostCSS插件，用于将像素单位换为rem单位。它可以帮助开发者在移动端开发中更方便地处理不同屏幕尺寸的适配问题。 使用postcss-pxtorem的步骤如下： 1. 首先，安装postcss-pxtorem插件。可以使用npm或者yarn进行安装。 2. 在项目的根目录下创建一个postcss.config.js文件，并在其中配置postcss-pxtorem插件。例如： ```javascript module.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 设计稿宽度除以10，例如设计稿宽度为375px，则rootValue为37.5 propList: ['*'], // 需要转换的属性，这里设置为全部 }), ], }; ``` 3. 在项目的CSS文件中使用像素单位进行样式编写。例如： ```css .container { width: 375px; font-size: 14px; } ``` 4. 运行构建工具，例如webpack或者gulp，使postcss-pxtorem插件生效。插件会自动将像素单位转换为rem单位。例如： ```css .container { width: 23.4375rem; /* 375 / 16 = 23.4375 */ font-size: 0.875rem; /* 14 / 16 = 0.875 */ } ``` 这样，就可以实现根据设计稿宽度自动转换像素单位为rem单位，从而实现移动端适配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值