System 发布的文章

2024-08-16

CSS实现元素的水平垂直居中有多种方法，以下是几种常用的实现方式：

使用flexbox布局:




.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.child {
  /* 子元素内容 */
}

使用grid布局:




.parent {
  display: grid;
  place-items: center;
}
 
.child {
  /* 子元素内容 */
}

使用绝对定位和transform:




.parent {
  position: relative;
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用margin:auto方法:




.parent {
  position: relative;
}
 
.child {
  width: 50%;
  height: 50%;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

这些方法可以实现元素的水平垂直居中，选择哪种方法取决于具体的布局需求和浏览器兼容性要求。

- 阅读更多 -

css3对文字标签不同宽，不同高使用瀑布流对齐显示

System

2024-08-16

所有,css3

要使用CSS3实现瀑布流布局，可以使用column-width、column-gap和column-rule等属性。以下是一个简单的例子，展示如何使用CSS3的多列布局特性来实现文本的瀑布流对齐。

HTML:




<div class="brick-wall">
  <div class="brick">
    <p>这是一段文本。</p>
  </div>
  <!-- 其他的.brick元素 -->
</div>

CSS:




.brick-wall {
  column-count: 5; /* 设置列数 */
  column-gap: 10px; /* 列与列之间的间隔 */
  column-rule: none; /* 列之间没有边框 */
}
 
.brick {
  break-inside: avoid; /* 避免内容分布在不同列 */
  padding: 10px; /* 文本内边距 */
}

这段代码会创建一个带有瀑布流效果的容器，.brick-wall 类定义了多列布局，column-count 设置了列的数量，column-gap 设置了列之间的间隔。.brick 类使用了 break-inside: avoid; 来避免内容跨列显示，增加内边距提供文本之间的一些间隔。

请注意，实际应用中可能需要为.brick添加更多样式，以适应不同宽度和高度的文本。而且，瀑布流布局的完整实现可能需要JavaScript来动态处理加载更多内容或响应式设计等场景。

- 阅读更多 -

css3实现炫彩字体

System

2024-08-16

所有,css3

在CSS3中，可以使用text-shadow属性来实现炫彩的文字效果。以下是一个简单的示例，展示如何给文字添加阴影以创建炫酷的字体效果：




.cool-font {
  font-size: 48px;
  color: #fff; /* 文字颜色为白色 */
  text-shadow:
    1px 1px 0 #ff0000, /* 红色阴影 */
    2px 2px 0 #00ff00, /* 绿色阴影 */
    3px 3px 0 #0000ff, /* 蓝色阴影 */
    4px 4px 0 #ff00ff, /* 紫色阴影 */
    5px 5px 0 #00ffff, /* 青色阴影 */
    6px 6px 0 #ffff00; /* 黄色阴影 */
}




<div class="cool-font">炫酷字体效果</div>

这段代码将创建一个带有六种不同颜色阴影的文字效果。通过增加text-shadow属性中阴影的数量和偏移量，可以创建出更加复杂和逼真的效果。

System

2024-08-16

所有,css3




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3D立方体旋转动画</title>
    <style>
        .cube {
            width: 100px;
            height: 100px;
            margin: 50px auto;
            transform-style: preserve-3d;
            animation: rotate 5s infinite linear;
        }
 
        @keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
 
        .cube div {
            position: absolute;
            width: 100px;
            height: 100px;
            background: skyblue;
            opacity: 0.8;
        }
 
        /* 定义每个面的位置 */
        .cube .front  { background: #f00; transform: translateZ(50px); }
        .cube .back   { background: #0f0; transform: translateZ(-50px); }
        .cube .right  { background: #00f; transform: rotateY(90deg) translateZ(50px); }
        .cube .left   { background: #0ff; transform: rotateY(90deg) translateZ(50px); }
        .cube .top    { background: #ff0; transform: rotateX(90deg) translateZ(50px); }
        .cube .bottom { background: #f0f; transform: rotateX(90deg) translateZ(50px); }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front"></div>
        <div class="back"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>

这段代码创建了一个简单的3D立方体，通过CSS3的@keyframes动画实现了它的旋转效果。.cube定义了基本的3D转换环境，@keyframes rotate定义了从0度旋转到360度的动画，cube div设置了立方体的每个面，并通过类名定义了它们的背景色和位置。动画通过无限循环(infinite)和线性曲线(linear)来保持旋转速度一致。

- 阅读更多 -

css3 盒子线性流动效果

System

2024-08-16

所有,css3

CSS3 提供了很多实现盒子线性流动效果的方法，其中一种是使用 animation 属性结合 @keyframes 规则来创建动画。以下是一个简单的例子，展示如何使用 CSS3 创建一个盒子沿一条直线流动的效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    animation: move 2s infinite alternate linear;
  }
 
  @keyframes move {
    from {
      left: 0;
    }
    to {
      left: 200px;
    }
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

在这个例子中，.box 是要流动的盒子，它将沿着 X 轴从左侧移动到右侧的 200px 位置。animation 属性定义了动画的名称 move，持续时间 2s，使动画无限次数循环 infinite，并且指定动画的播放方式 alternate 使其在到达终点时反向播放，linear 保证动画速度是均匀的。

@keyframes move 规则定义了动画的关键帧，从左边的位置 left: 0; 移动到 left: 200px;。

- 阅读更多 -

Web开发 —— 放大镜效果（HTML、CSS、JavaScript）

System

2024-08-16

所有,css

以下是实现放大镜效果的简单HTML、CSS和JavaScript代码示例。这个例子中，当鼠标悬停在小图片上时，会显示一个大图片放大镜。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>放大镜效果</title>
<style>
  .magnifier {
    position: relative;
    width: 150px;
    height: 150px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
  }
  .magnifier img {
    width: 150px;
    height: 150px;
  }
  .magnifier-large {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: rgba(255, 255, 0, 0.5);
    display: none;
    top: 0;
    left: 150px;
    cursor: none;
    overflow: hidden;
  }
  .magnifier-large img {
    position: absolute;
    width: 600px;
    height: auto;
  }
</style>
</head>
<body>
 
<div class="magnifier" id="magnifier1">
  <img src="small-image.jpg" alt="小图片">
  <div class="magnifier-large">
    <img src="large-image.jpg" alt="大图片">
  </div>
</div>
 
<script>
  function createMagnifier(magnifier) {
    const magnifierLarge = magnifier.querySelector('.magnifier-large');
    const ratio = 3; // 放大倍数
    const img = magnifierLarge.querySelector('img');
 
    // 鼠标移入放大镜区域时显示放大镜
    magnifier.addEventListener('mouseenter', function(e) {
      magnifierLarge.style.display = 'block';
    });
 
    // 鼠标移出放大镜区域时隐藏放大镜
    magnifier.addEventListener('mouseleave', function(e) {
      magnifierLarge.style.display = 'none';
    });
 
    // 鼠标移动时更新放大镜的位置
    magnifier.addEventListener('mousemove', function(e) {
      const x = e.pageX - magnifier.offsetLeft - magnifierLarge.offsetWidth / 2;
      const y = e.pageY - magnifier.offsetTop - magnifierLarge.offsetHeight / 2;
      const maxX = img.offsetWidth - magnifierLarge.offsetWidth;
      const maxY = img.offsetHeight - magnifierLarge.offsetHeight;
 
      // 限制放大镜的移动范围
      if (x < 0) {
        x = 0;
      } else if (x > maxX) {
        x = maxX;
      }
      if (y < 0) {
        y = 0;
      } else if (y > maxY) {
        y = maxY;
      }
 
      // 更新放大镜位置
      magnifierLarge.style.left = x + 'px';
      magnifierLarge.style.top = y + 'px';
 
      // 更新大图显示区域
      img.style.left = -x * ratio + 'px';
      img.style.top = -y * ratio + 'px';
    });
  }
 
  // 初始化放大镜效果
  document.querySelectorAll('.magnifier').forEach(createMagnifier);
</script>
 
</body>
</html>

这段代码中，.magnifier 是放大镜容器，\`.m

- 阅读更多 -

纯 CSS 实现超长内容滚动播放。

System

2024-08-16

所有,css




/* 设置滚动容器 */
.scroll-container {
  width: 300px; /* 设置固定宽度 */
  height: 50px; /* 设置固定高度 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  white-space: nowrap; /* 确保内容在一行显示 */
}
 
/* 设置滚动内容 */
.scroll-content {
  display: inline-block; /* 使内容作为行内块显示 */
  animation: scroll 5s linear infinite; /* 应用滚动动画 */
}
 
/* 定义滚动动画 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
 
/* HTML结构 */
<div class="scroll-container">
  <div class="scroll-content">
    这里是超长内容，它会不停地滚动播放。
    这里是超长内容，它会不停地滚动播放。
  </div>
</div>

这段代码展示了如何使用CSS关键帧动画实现一个简单的超长内容滚动播放效果。.scroll-container 是滚动容器，.scroll-content 是滚动内容。通过animation属性应用了一个名为scroll的动画，该动画会使内容从初始位置平滑滚动到完全隐藏的位置，形成一种连续滚动的效果。

- 阅读更多 -

动手实践！从零开始实现Springboot+Vue登录，CSS文本样式值

System

2024-08-16

所有,css

为了实现一个简单的Spring Boot和Vue.js的登录页面，你需要创建后端Spring Boot应用程序和前端Vue.js应用程序。以下是实现这两个应用程序的基本步骤：

后端（Spring Boot）:

创建一个Spring Boot项目，并添加Spring Security依赖。
配置Spring Security来设置用户和密码。
创建一个控制器处理登录请求。

前端（Vue.js）:

创建一个Vue.js项目，并添加Vue Router和Axios依赖。
设计登录表单的HTML模板并添加CSS样式。
创建Vue组件处理登录逻辑，并使用Axios发送登录请求到后端。

Spring Boot 后端代码示例




// build.gradle 或 pom.xml 中添加依赖
dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-security'
    implementation 'org.springframework.boot:spring-boot-starter-web'
}
 
// SecurityConfig.java
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication()
            .withUser("user").password("{noop}password").roles("USER");
    }
 
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
            .antMatchers("/", "/home").permitAll()
            .anyRequest().authenticated()
            .and()
            .formLogin()
            .loginPage("/login")
            .permitAll()
            .and()
            .logout()
            .permitAll();
    }
}
 
// LoginController.java
@Controller
public class LoginController {
 
    @GetMapping("/login")
    public String loginPage() {
        return "login";
    }
 
    // 处理登录请求
}

Vue.js 前端代码示例




<!-- Login.vue -->
<template>
  <div class="login-container">
    <form @submit.prevent="login">
      <input type="text" v-model="username" placeholder="Username" />
      <input type="password" v-model="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('/login', {
          username: this.username,
          password: this.password
        });
        // 处理登录成功的情况
      } catch (error) {
        // 处理登录失败的情况
      }
    }
  }
};
</script>
 
<style>
/* CSS样式 */
.login-container {
  /* 样式内容 */
}
</style>

在实际的应用中，你需要将登录逻辑与后端的\`LoginCo

- 阅读更多 -

92款超级漂亮的css按钮样式复制即用

System

2024-08-16

所有,css

以下是一个简化的CSS按钮样式集合，每个按钮都是简洁而又引人注目的。




/* 按钮基础样式 */
.button {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  border: none;
  border-radius: 5px;
}
 
/* 按钮1 示例 */
.button1 {
  background-color: #007bff;
  box-shadow: 0 5px #0056b3;
}
 
.button1:active {
  background-color: #0069d9;
  box-shadow: 0 3px #00428c;
  transform: translateY(1px);
}
 
/* 按钮2 示例 */
.button2 {
  background-color: #f1c40f;
  box-shadow: 0 5px #c2a20c;
}
 
.button2:active {
  background-color: #e8b009;
  box-shadow: 0 3px #9c790c;
  transform: translateY(1px);
}
 
/* 按钮3 示例 */
.button3 {
  background-color: #2ecc71;
  box-shadow: 0 5px #289f55;
}
 
.button3:active {
  background-color: #289f55;
  box-shadow: 0 3px #228241;
  transform: translateY(1px);
}
 
/* 按钮4 示例 */
.button4 {
  background-color: #e74c3c;
  box-shadow: 0 5px #c0392b;
}
 
.button4:active {
  background-color: #c0392b;
  box-shadow: 0 3px #9d3124;
  transform: translateY(1px);
}
 
/* 按钮5 示例 */
.button5 {
  background-color: #9b59b6;
  box-shadow: 0 5px #793a9a;
}
 
.button5:active {
  background-color: #8e44ad;
  box-shadow: 0 3px #6c238e;
  transform: translateY(1px);
}
 
/* 按钮6 示例 */
.button6 {
  background-color: #3498db;
  box-shadow: 0 5px #2980b9;
}
 
.button6:active {
  background-color: #2980b9;
  box-shadow: 0 3px #2579a9;
  transform: translateY(1px);
}
 
/* 按钮7 示例 */
.button7 {
  background-color: #f39c12;
  box-shadow: 0 5px #d18b09;
}
 
.button7:active {
  background-color: #d79001;
  box-shadow: 0 3px #a87702;
  transform: translateY(1px);
}
 
/* 按钮8 示例 */
.button8 {
  background-color: #1abc9c;
  box-shadow: 0 5px #16a085;
}
 
.button8:active {
  background-color: #159382;
  box-shadow: 0 3px #128171;
  transform: translateY(1px);
}
 
/* 按钮9 示例 */
.button9 {
  background-color: #8e44ad;
  box-shadow: 0 5px #7e3491;
}
 
.button9:active {
  background-

System

2024-08-16

所有,css

在Vue项目中，自适应布局通常使用lib-flexible库结合postcss-pxtorem或postcss-px2rem插件来实现。

lib-flexible：这是一个用于设置 rem 布局的库，它会根据屏幕宽度动态调整根字体大小。
postcss-pxtorem：一个PostCSS插件，用于将像素单位转换成rem单位。
postcss-px2rem: 一个PostCSS插件，用于将像素单位转换成rem单位。

安装依赖




npm install lib-flexible --save

对于postcss-pxtorem或postcss-px2rem，选择其一进行安装：




npm install postcss-pxtorem --save-dev
# 或者
npm install postcss-px2rem --save-dev

配置postcss-pxtorem或postcss-px2rem

在postcss的配置文件postcss.config.js中，配置相关选项：




module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度/10，这里以设计稿宽度为375px为例
      propList: ['*'], // 需要转换的属性，这里选择转换所有属性
    },
    // 或者使用 postcss-px2rem
    'postcss-px2rem': {
      rootValue: 37.5, // 设计稿宽度/10，这里以设计稿宽度为375px为例
      propList: ['*'], // 需要转换的属性，这里选择转换所有属性
    },
  },
};

配置lib-flexible

在项目入口文件main.js中引入lib-flexible：




import 'lib-flexible/flexible'

注意：

确保lib-flexible在项目中首先引入，以保证根据屏幕宽度动态调整根字体大小的特性。
在postcss-pxtorem或postcss-px2rem的配置中，rootValue通常设置为设计稿宽度的1/10，这样可以使得计算更加方便。
在使用时，选择其中一个插件进行配置，并确保在postcss.config.js文件中正确配置。

以上步骤完成后，你的Vue项目就可以使用rem单位进行自适应布局设计了。

- 阅读更多 -