标签 css3 下的文章

[HTML]Web前端开发技术17（HTMLCSSJavaScript ）textarea，checkbox，button，fieldset，option，radio——喵喵画网页

2024-08-10

在HTML5中，<textarea>元素用于定义多行文本输入控件，<button>元素用于定义按钮，而<input type="checkbox">用于定义复选框，<input type="file">用于定义文件选择控件。

以下是一些示例代码：

HTML5:




<!DOCTYPE html>
<html>
<body>
 
<textarea rows="4" cols="50">
在这里输入文本...
</textarea>
 
<br><br>
 
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car
 
<br><br>
 
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
 
<br><br>
 
<form action="/submit-form" method="post" enctype="multipart/form-data">
  <label for="fileToUpload">Select a File to Upload:</label>
  <input type="file" id="fileToUpload" name="fileToUpload">
  <input type="submit" value="Upload File" name="submit">
</form>
 
</body>
</html>

CSS3:




/* 示例样式 */
textarea {
  width: 300px;
  height: 150px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
}
 
input[type="checkbox"] {
  margin: 10px 0;
}
 
button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
 
form {
  margin-top: 20px;
}
 
input[type="file"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 10px;
}

JavaScript:




// JavaScript可用于处理按钮点击事件或其他用户交互

以上代码提供了基本的HTML5元素使用示例，并附带了简单的CSS样式和JavaScript事件处理。

System

2024-08-10

所有,css3

HTML5 基础：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>页面头部</header>
    <nav>导航栏</nav>
    <section>
        <article>
            <h1>文章标题</h1>
            <p>这里是文章内容...</p>
        </article>
    </section>
    <aside>侧边栏</aside>
    <footer>页面底部</footer>
</body>
</html>

CSS3 应用：




/* CSS 文件 */
body {
    background-color: #f3f3f3;
}
header, footer {
    background-color: #444;
    color: white;
    text-align: center;
    padding: 5px 0;
}
nav, aside {
    background-color: #f5f5f5;
    color: #333;
    padding: 10px;
}
section article {
    background-color: white;
    padding: 15px;
    margin-bottom: 10px;
}
section article h1 {
    color: #333;
    margin-bottom: 5px;
}

CSS3 动画（animations）应用：




/* 定义关键帧 */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
 
/* 应用动画 */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example; /* 使用动画名称 */
    animation-duration: 4s;  /* 动画时长 */
    animation-iteration-count: infinite; /* 动画无限次数播放 */
}

HTML 和 CSS 结合使用，CSS 中的动画效果会应用于一个 div 元素。这个 div 元素在页面加载时会从红色渐变到黄色，并且这个过程会无限循环。

- 阅读更多 -

CSS3垂直水平的居中的几种方法

System

2024-08-09

所有,css3

CSS3提供了多种方法来实现垂直和水平居中。以下是一些常用的方法：

使用Flexbox布局:




.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

使用Grid布局:




.container {
  display: grid;
  place-items: center; /* 同时实现水平和垂直居中 */
}

使用绝对定位和transform:




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

使用margin:auto方法:




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

这些方法可以实现不同程度的居中，选择哪种方法取决于具体的布局需求和浏览器兼容性要求。

- 阅读更多 -

CSS新手入门笔记整理：CSS3属性表

System

2024-08-09

所有,css3

CSS3是CSS（层叠样式表）的一个版本，引入了许多新特性，包括更加丰富的选择器、阴影、渐变、动画等。以下是一些CSS3的关键属性及其简单示例：

阴影（Box Shadow）:




div {
  box-shadow: 10px 10px 5px #888888;
}

圆角（Border Radius）:




div {
  border-radius: 10px;
}

渐变（Gradients）:




div {
  background: linear-gradient(to right, red , yellow);
}

变换（Transform）:




div:hover {
  transform: rotate(360deg);
}

动画（Animation）:




@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}

圆形图片（Clip-path）:




div {
  clip-path: circle(50%);
}

过渡（Transition）:




div:hover {
  transition: width 1s;
}

用户界面（UI）:




input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

这些属性和示例代表了CSS3的一部分功能，实际应用中可以根据需要选择合适的属性和值。

System

2024-08-09

所有,css3

以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。




<!DOCTYPE html>
<html>
<head>
    <title>喵喵画网</title>
    <style>
        body {
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 600px;
            margin: 100px auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .title {
            text-align: center;
            color: #333;
            padding: 20px;
        }
        .input-container {
            text-align: center;
            padding: 20px 0;
        }
        input[type="text"] {
            width: 80%;
            padding: 10px;
            margin: 0 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        input[type="button"] {
            padding: 10px 20px;
            background-color: #5883d3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="button"]:hover {
            background-color: #3d66a7;
        }
        #poem {
            text-align: center;
            padding: 20px;
            color: #333;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">喵喵画网</div>
        <div class="input-container">
            <input type="text" id="text" placeholder="请输入内容" />
            <input type="button" value="生成喵喵" onclick="generateShuShu()" />
        </div>
        <div id="poem">输入文本后点击生成喵喵</div>
    </div>
    <script>
        function generateShuShu() {
            var text = document.getElementById('text').value;
            var shuShu = text.split('').join('🐖 ') + '🐖';
            document.getElementById('poem').innerHTML = shuShu;
        }
    </script>
</body>
</html>

这段代码实现了一个简单的喵喵画网功能，用户输入文本后点击按钮，文本会被转换成喵喵（一种表情符号），并显示在页面上。这个示例教学了如何使用JavaScript处理DOM元素，以及如何添加事件监听器来响应用户的交互。

- 阅读更多 -

CSS3实现无限旋转动画特效

System

2024-08-09

所有,css3




/* 定义一个无限旋转的动画 */
@keyframes infinite-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
/* 应用动画到具体的元素上，这里以 .icon 为例 */
.icon {
  animation: infinite-spin 2s linear infinite;
  /* 其他样式 */
}

这段代码定义了一个名为 infinite-spin 的关键帧动画，它让元素从0度旋转到360度。然后，它将这个动画应用到类名为 .icon 的元素上，动画持续时间为2秒，线性变化，并且是无限次数旋转。这是一个简单而有效的CSS3动画实现方式，适用于创建旋转加载器或者其他需要不断旋转的图标。

- 阅读更多 -

CSS3技巧33：妙用文本溢出text-overflow

System

2024-08-09

所有,html5




/* 定义一个带有圆角和阴影的容器 */
.container {
  width: 200px;
  height: 100px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 确保内容在容器内部 */
}
 
/* 定义文本样式，并使用text-overflow属性处理溢出文本 */
.text {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出容器的文本 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
  max-width: calc(100% - 40px); /* 减去左右内边距 */
  padding: 0 20px;
}

HTML部分：




<div class="container">
  <div class="text">这是一段很长的文本，需要被适当截断并显示为省略号。</div>
</div>

这个例子展示了如何使用CSS3中的text-overflow属性来处理文本溢出的情况。.container定义了一个有边框和圆角的容器，.text定义了文本的样式，并且当文本宽度超过容器宽度时，溢出的文本部分会被替换为省略号。

System

2024-08-09

所有,jquery

jQuery.transition.js 是一个用于简化CSS3过渡效果应用的jQuery插件。以下是一个使用该插件的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transition Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path/to/jquery.transition.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: all 1s ease;
            -webkit-transition: all 1s ease;
            /* For Safari */
        }
        .box.large {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button id="enlarge">Enlarge Box</button>
 
    <script>
        $(document).ready(function() {
            $('#enlarge').click(function() {
                $('.box').addClass('large', 'easeInOutQuad');
            });
        });
    </script>
</body>
</html>

在这个例子中，我们定义了一个带有过渡效果的 .box 类，并在样式表中指定了改变大小时的动画过渡。jQuery.transition.js 插件允许我们通过 .addClass() 方法应用这个过渡，只需要在第二个参数中指定过渡效果的函数名即可。这个例子演示了如何使用这个插件来简化CSS3过渡的应用，并使其在现代浏览器中更加高效和用户友好。

System

2024-08-09

所有,css3

在Vue中，您可以使用v-if或v-show来动态添加或删除DOM元素，并利用CSS3的animation属性来实现字体上升并渐变消失的效果。以下是一个简单的示例：




<template>
  <div id="app">
    <button @click="show = !show">Toggle Animation</button>
    <transition name="fade-up">
      <div v-if="show" class="animated-text">Hello World!</div>
    </transition>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>
 
<style>
.animated-text {
  animation: up-and-fade 3s infinite;
}
 
@keyframes up-and-fade {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}
 
.fade-up-enter-active, .fade-up-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}
 
.fade-up-enter, .fade-up-leave-to /* .fade-up-leave-active for <2.1.8 */ {
  opacity: 0;
  transform: translateY(20px);
}
</style>

在这个示例中，我们定义了一个animated-text类，它使用CSS3的animation属性来创建上升并渐变消失的动画效果。通过Vue的<transition>组件包裹动态内容，可以在元素显示与隐藏时应用相应的过渡效果。通过改变show数据属性的值，可以控制文本的显示和隐藏。

- 阅读更多 -

CSS3实现一个粒子动效的按钮

System

2024-08-09

所有,css3

以下是一个使用CSS3实现的粒子动效按钮的示例代码：

HTML:




<div class="particles-button">
  <button class="btn">点击我</button>
</div>

CSS:




.particles-button {
  position: relative;
  width: 150px;
  height: 50px;
}
 
.btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  z-index: 10;
}
 
.particles-button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff6e7f, #bfe9ff);
  z-index: 1;
  transition: opacity 0.5s ease;
  opacity: 0;
}
 
.particles-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 2;
  transition: background-size 0.5s ease;
  background-image: radial-gradient(circle at center, #fff 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(circle at center, #fff 0%, rgba(255, 255, 255, 0) 70%);
  background-size: 10% 10%, 20% 20%;
  background-position: 0 0, 10px 10px;
}
 
.btn:hover + .particles-button:after {
  opacity: 1;
}
 
.btn:hover + .particles-button:before {
  background-size: 50% 50%, 100% 100%;
}

这段代码使用伪元素 :before 和 :after 来创建按钮的背景和动态效果。当鼠标悬停在按钮上时，这些伪元素的样式通过 CSS 过渡效果发生变化，从而形成粒子动效。

- 阅读更多 -