1. 首页
  2. 标签
  3. css3
CSS3实现实时时间数字滚动
System
2024-08-19
所有,css3

以下是一个简单的HTML和CSS代码示例，演示了如何使用CSS3实现实时时间数字滚动效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时时间滚动效果</title>
<style>
  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
 
  .time-container {
    overflow: hidden;
    white-space: nowrap;
    background: #f2f2f2;
    padding: 10px;
    border-radius: 5px;
  }
 
  .time-display {
    display: inline-block;
    font-size: 3em;
    animation: scroll 5s linear infinite;
  }
</style>
</head>
<body onload="startClock()">
 
<div class="time-container">
  <div id="time-element" class="time-display"></div>
</div>
 
<script>
function startClock() {
  const timeElement = document.getElementById('time-element');
  const updateTime = () => {
    const now = new Date();
    timeElement.textContent = now.toLocaleTimeString('it-IT');
  };
 
  updateTime(); // Initialize the time display
  setInterval(updateTime, 1000); // Update the time every second
}
</script>
 
</body>
</html>

这段代码实现了一个简单的数字时钟，其中时间数字通过CSS动画在屏幕上滚动。@keyframes scroll定义了数字从屏幕右侧进入到左侧的滚动动画。.time-display类使用这个动画，并且通过JavaScript每秒更新内容以显示当前时间。

- 阅读更多 -
CSS3 filter滤镜
System
2024-08-19
所有,css3

CSS3 filter属性用于应用模糊或颜色变换效果，常用于调整图片、文本或其他HTML元素的视觉效果。

以下是一些CSS3 filter的示例代码：

  1. 模糊效果（blur）:



img {
  filter: blur(5px);
}
  1. 亮度调整（brightness）:



img {
  filter: brightness(50%);
}
  1. 对比度调整（contrast）:



img {
  filter: contrast(200%);
}
  1. 灰度效果（grayscale）:



img {
  filter: grayscale(100%);
}
  1. 色彩旋转（hue-rotate）:



img {
  filter: hue-rotate(90deg);
}
  1. 反色效果（invert）:



img {
  filter: invert(100%);
}
  1. 饱和度调整（saturate）:



img {
  filter: saturate(30%);
}
  1. sepia效果（sepia）:



img {
  filter: sepia(60%);
}
  1. 影子效果（drop-shadow）:



img {
  filter: drop-shadow(16px 16px 20px red);
}
  1. 混合效果（blend-mode）:



img {
  filter: blend(overlay);
}

每个滤镜都有其特定的用途和效果，可以根据需要选择合适的滤镜应用到HTML元素上。

- 阅读更多 -
【CSS3】CSS3 2D 转换 - rotate 旋转 ( transform: rotate(90deg) 旋转样式 | transition 过度效果设置 )
System
2024-08-19
所有,css3

在CSS3中，我们可以使用transform属性的rotate()函数来实现元素的旋转效果。rotate()函数可以指定旋转的角度，其值可以是度（deg）或弧度（rad）。

以下是一些使用CSS3 rotate 旋转样式的示例：

  1. 旋转一个元素90度：



div {
  transform: rotate(90deg);
}
  1. 旋转一个元素-90度（即逆时针旋转90度）：



div {
  transform: rotate(-90deg);
}
  1. 旋转一个元素180度（即360度，或者可以说是180度的两倍，因为我们是在一个完整的圆环中计算）：



div {
  transform: rotate(360deg); /* 或者 transform: rotate(180deg); */
}
  1. 使用旋转中心点（默认情况下，旋转中心点是元素的中心，但我们可以通过transform-origin属性来改变它）：



div {
  transform-origin: top left; /* 或者 bottom right, center等等 */
  transform: rotate(90deg);
}
  1. 使用动画来实现连续旋转（例如，旋转一个元素直到它消失）：



@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
 
div {
  animation: spin 2s linear infinite;
}

以上代码展示了如何使用CSS3的rotate函数来实现2D旋转效果，并提供了一些如何改变旋转中心点和使用动画的例子。

- 阅读更多 -
CSS3 分页
System
2024-08-19
所有,css3

CSS3 分页通常指的是使用 CSS3 创建分页效果，这可以通过变换或过渡来实现。以下是一个简单的例子，使用 CSS3 制作一个简单的分页效果：

HTML:




<div class="pagination">
  <a href="#" class="page active">1</a>
  <a href="#" class="page">2</a>
  <a href="#" class="page">3</a>
</div>

CSS:




.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.page {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
  transition: transform 0.3s ease-in-out;
}
 
.page.active {
  font-weight: bold;
}
 
.page:hover {
  transform: scale(1.1);
}

在这个例子中，.pagination 是一个包含分页链接的容器。.page 类定义了分页的基本样式，并且使用了 transition 属性来制作平滑的过渡效果。.page.active 是当前激活页的样式，.page:hover 是鼠标悬停时分页的变换样式。

- 阅读更多 -
CSS3属性之text-overflow:ellipsis
System
2024-08-19
所有,css3

text-overflow: ellipsis 是CSS3的一个属性，它用来说明当文本溢出包含它的元素时，应该如何显示文本的溢出部分。这个属性通常与 white-space: nowrap; 和 overflow: hidden; 一起使用，以确保文本在一行内显示，并且溢出的部分被省略号(…)替换。

解决方案：

  1. 直接在HTML元素中使用CSS样式：



<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>
 
<p>This is some long text that will be hidden and an ellipsis will be used when the text overflows the container.</p>
 
</body>
</html>
  1. 在CSS文件中定义样式：



/* CSS文件 */
p {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}



<!-- HTML文件 -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
 
<p>This is some long text that will be hidden and an ellipsis will be used when the text overflows the container.</p>
 
</body>
</html>
  1. 使用内联样式：



<!DOCTYPE html>
<html>
<body>
 
<p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">This is some long text that will be hidden and an ellipsis will be used when the text overflows the container.</p>
 
</body>
</html>

以上三种方法都可以实现相同的效果，你可以根据你的项目需求和个人喜好选择使用哪种方法。

- 阅读更多 -
10Rust前端技术：HTMLCSS3与ES6+新特性解析与应用
System
2024-08-19
所有,css3



// 假设我们有一个Rust函数，用于将字符串转换为大写
fn to_uppercase(input: &str) -> String {
    input.to_uppercase()
}
 
// 在Rust中，我们可以使用一个宏来导出函数到JavaScript
#[wasm_bindgen]
pub fn export_to_uppercase(input: &str) -> String {
    to_uppercase(input)
}
 
// 以下是JavaScript代码，用于加载和使用Rust生成的WebAssembly模块
import("./your_rust_module_path").then(module => {
    const uppercased = module.export_to_uppercase('hello world');
    console.log(uppercased); // 输出: 'HELLO WORLD'
});

这个例子展示了如何在Rust中定义一个简单的函数，并使用wasm_bindgen宏来导出它，以便它可以在WebAssembly模块中被JavaScript代码调用。然后，在JavaScript中，我们通过动态导入Rust模块并调用该函数来演示如何使用Rust代码生成的WebAssembly。

- 阅读更多 -
用HTML + Css3 实现炫酷的输入框效果
System
2024-08-18
所有,css3

以下是一个使用HTML和CSS3实现炫酷输入框效果的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool Input Effect</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f7f7f7;
  }
  .container {
    width: 100%;
    margin: 100px auto;
    text-align: center;
  }
  .input-container {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 50px;
    margin: 20px;
  }
  .input-field {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: transparent;
    border: 1px solid #ccc;
    padding: 0 15px;
    color: #333;
    font-size: 16px;
    caret-color: #333;
  }
  .input-field::-webkit-input-placeholder {
    color: transparent;
  }
  .input-field:-moz-placeholder { /* Firefox 18- */
    color: transparent;
  }
  .input-field::-moz-placeholder { /* Firefox 19+ */
    color: transparent;
  }
  .input-field:-ms-input-placeholder {
    color: transparent;
  }
  .placeholder-text {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    color: #999;
    padding: 0 15px;
    font-size: 16px;
    transition: all 0.2s;
    transform: translateY(-25px);
  }
  .input-container:hover .placeholder-text {
    transform: translateY(0);
    cursor: text;
  }
  .underline {
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #333;
    transition: all 0.2s;
    transform: scaleX(0);
  }
  .input-container:hover .underline {
    transform: scaleX(1);
  }
</style>
</head>
<body>
 
<div class="container">
  <div class="input-container">
    <input class="input-field" type="text" placeholder="Enter your text">
    <div class="placeholder-text">Username</div>
    <div class="underline"></div>
  </div>
</div>
 
</body>
</html>

这段代码展示了如何创建一个带有动画效果的输入框。当鼠标悬停在输入框上时，占位符会滑动并显示，同时底部的下划线会出现。这是一个简单的示例，可以根据需要进行样式调整和功能添加。

- 阅读更多 -
css3 animation 实现点绕圈 转圈效果
System
2024-08-18
所有,css3

要使用CSS3动画实现点围绕圆形轨迹移动的效果，可以使用@keyframes规则来定义动画，并使用animation属性应用到点上。以下是实现这种效果的示例代码：

HTML:




<div class="container">
  <div class="point"></div>
</div>

CSS:




.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid #000;
  border-radius: 50%;
  margin: 50px;
}
 
.point {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  animation: rotate 5s linear infinite;
}
 
@keyframes rotate {
  from {
    transform: rotate(0deg) translateX(100px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(100px) rotate(-360deg);
  }
}

在这个例子中，.point是要绕着.container的边缘移动的点，@keyframes rotate定义了点如何移动。translateX(100px)将点移到圆的中心，然后通过rotate应用额外的旋转，使得点看起来像是在圆内旋转。动画设置为无限循环，每5秒完成一次完整旋转。

- 阅读更多 -
js实现百度地图的自定义marker与css3动画的交互
System
2024-08-18
所有,css3



// 首先，确保你已经在页面中引入了BMap API和CSS样式
 
// 初始化地图和marker
function initMap() {
    var map = new BMap.Map("mapContainer"); // 创建Map实例
    var point = new BMap.Point(116.404, 39.915); // 创建点坐标
    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
 
    // 创建自定义marker
    var marker = new BMap.Marker(point);
    map.addOverlay(marker); // 将标注添加到地图中
 
    // 绑定鼠标事件
    marker.addEventListener("mouseover", function() {
        this.setTop(true); // 将标注置顶
        openInfo(this); // 打开信息窗口
    });
 
    marker.addEventListener("mouseout", function() {
        this.setTop(false); // 取消置顶
        closeInfo(this); // 关闭信息窗口
    });
}
 
// 打开信息窗口
function openInfo(marker) {
    var opts = {
        width: 250, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: "自定义标题" // 信息窗口标题
    };
 
    // 创建信息窗口
    var infoWindow = new BMap.InfoWindow("这里是自定义内容", opts);
    marker.openInfoWindow(infoWindow); // 打开信息窗口
}
 
// 关闭信息窗口
function closeInfo(marker) {
    marker.closeInfoWindow(); // 关闭信息窗口
}
 
// 页面加载完成后初始化地图
window.onload = initMap;

这段代码展示了如何在百度地图上创建一个自定义的marker，并且通过CSS3动画与marker进行交互。当鼠标悬停在marker上时，会打开一个信息窗口，当鼠标离开时，会关闭信息窗口。这个例子简单明了地展示了如何使用百度地图API进行开发。

- 阅读更多 -
文字弹性跳动CSS3代码
System
2024-08-18
所有,css3

要实现文字的弹性跳动效果，可以使用CSS3的animation属性结合keyframes规则。以下是一个简单的示例，展示如何为文字创建弹性跳动的效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bouncing Text</title>
<style>
  .bouncing-text {
    display: inline-block;
    font-size: 24px;
    animation: bounce 2s infinite alternate;
  }
 
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
</style>
</head>
<body>
 
<div class="bouncing-text">弹性跳动的文字</div>
 
</body>
</html>

在这个例子中，.bouncing-text 类定义了文字的初始样式和动画。@keyframes bounce 规则定义了动画的关键帧，实现了文字在垂直位置上的跳动。animation 属性设置了动画的名称(bounce)、持续时间(2s)、循环次数(infinite)以及动画的播放方式(alternate)，后者表示动画在每次循环结束时反向播放。

- 阅读更多 -
Copyright © 2024 Tech Blog
All Right Reserved | 京ICP备19053165号