标签 css 下的文章

HTML5 CSS3 诱人的实例： 3D立方体旋转动画，阿里珍藏版前端框架体系架构手写文档

2024-08-16




<!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 弹性布局（Flex）详细介绍，7年老前端一次操蛋的面试经历

System

2024-08-16

所有,css

在CSS中，弹性布局（Flexbox）是一种现代化的布局模型，它能够提供强大的方式来对容器内的项目进行排版、对齐和分配空间。

以下是一些关键的Flexbox属性和它们的作用：

display: flex; - 这个属性将元素设置为弹性容器。
flex-direction - 这个属性定义了容器内项目的方向。可以有row（默认值，水平方向从左到右）、row-reverse、column和column-reverse四个值。
flex-wrap - 这个属性定义了当容器内项目宽度之和超过容器宽度时是否应该换行。可以有nowrap（默认值，不换行）、wrap和wrap-reverse三个值。
justify-content - 这个属性定义了项目在主轴方向上的对齐方式。可以有flex-start（默认值，从头部开始）、flex-end、center、space-between和space-around五个值。
align-items - 这个属性定义了项目在交叉轴方向上的对齐方式。可以有stretch（默认值，拉伸到容器的高度）、flex-start、flex-end、center和baseline五个值。
align-content - 这个属性定义了多行项目在交叉轴方向上的对齐方式。可以有stretch（默认值，拉伸到容器的高度）、flex-start、flex-end、center、space-between和space-around五个值。
flex-grow - 这个属性定义了项目的放大比例。
flex-shrink - 这个属性定义了项目的缩小比例。
flex-basis - 这个属性定义了在分配多余空间之前，项目占据的主轴空间（类似于width/height属性）。
flex - 这个属性是flex-grow, flex-shrink和flex-basis的简写，可以同时设置这三个值。
order - 这个属性定义了项目的排列顺序。

下面是一个简单的Flexbox布局示例：




.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
 
.item {
  flex: 1;
  margin: 5px;
  padding: 10px;
}




<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

这个例子中，.container是一个弹性容器，.item是容器内的子项目。子项目通过flex: 1均分容器的空间，并且通过margin和padding增加了视觉效果的丰富性。

- 阅读更多 -

day03-CSS核心样式规则

System

2024-08-16

所有,css

在CSS中，核心的样式规则主要包括选择器、声明和属性。以下是一些示例：

基础选择器：




/* 标签选择器 */
p {
  color: blue;
}
 
/* 类选择器，用于定义一个或多个元素的样式 */
.my-class {
  font-size: 16px;
}
 
/* ID选择器，用于为特定元素指定独一无二的样式 */
#my-id {
  background-color: yellow;
}

层叠选择器：




/* 子选择器，用于选择指定父元素的直接子元素 */
div > p {
  font-weight: bold;
}
 
/* 后代选择器，用于选择指定元素的后代（不仅限于直接子元素） */
div p {
  color: red;
}
 
/* 相邻选择器，用于选择紧随其之后的同级元素 */
h2 + p {
  margin-top: 0;
}
 
/* 通用选择器，用于选择某个父元素下的所有指定子元素 */
div ~ p {
  color: green;
}

属性选择器：




/* 根据属性名选择元素 */
input[type="text"] {
  background-color: lightblue;
}
 
/* 根据属性值选择元素 */
div[class="special"] {
  border: 1px solid black;
}
 
/* 根据属性值的部分字符串匹配选择元素 */
a[href^="https"] {
  color: red;
}
 
/* 根据属性值的开始字符选择元素 */
input[name$="name"] {
  background-color: yellow;
}

伪类选择器：




/* 链接的不同状态 */
a:link {
  color: blue;
}
 
a:visited {
  color: purple;
}
 
a:hover {
  color: red;
}
 
a:active {
  color: green;
}
 
/* 输入框获取焦点时的样式 */
input:focus {
  border: 2px solid blue;
}

这些是CSS中的核心样式规则，可以用来构建基本的样式表。在实际应用中，还可以使用更高级的选择器和属性，例如伪元素、媒体查询等，来创建响应式和复杂的布局。

- 阅读更多 -

纯 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单位进行自适应布局设计了。

- 阅读更多 -

前端css中border-radius的简单使用

System

2024-08-16

所有,css

CSS的border-radius属性用于设置元素的边框半径，从而创建圆角效果。

解法1：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

这段代码会创建一个圆形的盒子。

解法2：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
}

这段代码会创建一个具有不同半径的四个角的盒子。

解法3：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 100px;
}

这段代码会创建一个圆角矩形，所有的角都是圆的。

解法4：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 50%;
}

这段代码会创建一个圆形的盒子。

解法5：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 60%;
}

这段代码会创建一个椭圆形的盒子。

解法6：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background-image: url('image.jpg');
  background-size: cover;
}

这段代码会创建一个圆形的盒子，并且在其中添加了一张图片。

解法7：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background-color: #000;
  opacity: 0.5;
}

这段代码会创建一个半透明的圆形盒子。

解法8：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background-color: linear-gradient(to right, red , yellow);
}

这段代码会创建一个具有渐变颜色的圆形盒子。

以上就是border-radius的一些基本用法，你可以根据自己的需求进行组合和变化。

- 阅读更多 -