import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
let camera, scene, renderer, labelRenderer, controls;
let mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.set(0.5, 0.5, 0.5);
scene = new THREE.Scene();
// 创建一个立方体
let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
scene.add(mesh);
// 创建CSS2DRenderer
labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
document.body.appendChild(labelRenderer.domElement);
// 创建2D标签对象
let label = document.createElement('div');
label.style.color = 'white';
label.innerHTML = 'Hello Three.js!';
let labelObject = new CSS2DObject(label);
labelObject.position.set(0.5, 0.5, 0);
scene.add(labelObject);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加轨道控制器
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
// 监听窗口大小变化
window.addEventListener('resize', onWindowResize, false);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
controls.update();
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.005;
renderer.render(scene, camera);
labelRenderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.inn在CSS中，要将border线加到元素的内部，即元素的border占据内边距，可以使用box-sizing属性。将box-sizing设置为border-box可以确保元素的实际内容区域大小不变，border和padding都被包含在元素的宽度和高度之内。
以下是实现这一效果的CSS代码示例：
.element {
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid black;
box-sizing: border-box; /* 关键点：border-box */
}这段代码将创建一个100px×100px的正方形元素，其内容区域大小为100px - 2pxBorder - 2*10pxPadding = 68px，border和padding都从内容区域大小中减去。此外，border线不占外边距。
CSS原子化是一种CSS设计方法，它将CSS的功能拆分到最小级别，每个小级别都是不可再分的。这种方法的主要目的是减少样式的复杂性，使得样式重用更加简单和高效。
原子化CSS的一种实现方式是使用类似BEM（Block Element Modifier）的命名方法，它强调模块化和功能化的设计。
以下是一个简单的CSS原子化样式实例：
/* 布局原子 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.row {
display: flex;
flex-wrap: wrap;
}
.col-1of3 {
flex: 1;
flex-basis: 33.3333%;
}
/* 文本原子 */
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
/* 颜色原子 */
.color-white {
color: #fff;
}
.color-black {
color: #000;
}
/* 字体大小原子 */
.font-size-12 {
font-size: 12px;
}
.font-size-14 {
font-size: 14px;
}
/* 其他样式原子 */
.bg-color-primary {
background-color: #333;
}
.border-radius-50 {
border-radius: 50%;
}在这个例子中，每个CSS类都是一个原子，它们不依赖于其他类，可以独立应用于HTML元素。这样的设计使得样式可复用性提高，减少了样式冲突，并提升了项目的可维护性。
CSS动画和ECharts的结合可以创建丰富的数据可视化效果。以下是一些使用纯CSS和ECharts创建的动画网站示例：
- ECharts 的 CSS 动画示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts CSS 动画示例</title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<style>
.echart-animation {
/* 定义动画 */
animation: rotate 5s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 准备一个用于显示图表的容器 -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
series: [{
type: 'pie',
radius: '55%',
data: [
{value: 235, name: '视频广告'},
{value: 274, name: '联盟广告'},
{value: 310, name: '邮件营销'}
],
animationType: 'scale', // 动画类型
animationEasing: 'elasticOut', // 动画缓动函数
animationDelay: function (idx) {
return Math.random() * 200;
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>- ECharts 和 CSS 实现的动画图表:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 和 CSS 动画示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<style>
.chart-animation {
animation: fadeIn 3s infinite;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
series: [
{
type: 'bar',
data: [220, 182, 191, 234, 290, 330, 310],
CSS结构伪类选择器是基于元素在文档的结构来选择元素的方式。以下是几个常用的结构伪类选择器及其示例：
:first-child：选择父元素的第一个子元素。
p:first-child {
color: red;
}:last-child：选择父元素的最后一个子元素。
p:last-child {
color: red;
}:nth-child(n)：选择父元素的第n个子元素。
p:nth-child(2) {
color: red;
}:nth-of-type(n)：选择同类型的父元素下的第n个<p>元素。
p:nth-of-type(2) {
color: red;
}:first-of-type：选择同类型的父元素下的第一个<p>元素。
p:first-of-type {
color: red;
}:last-of-type：选择同类型的父元素下的最后一个<p>元素。
p:last-of-type {
color: red;
}:only-child：选择是唯一子元素的元素。
p:only-child {
color: red;
}:only-of-type：选择父元素下唯一的<p>元素。
p:only-of-type {
color: red;
}:empty：选择没有子元素（包括文本）的元素。
p:empty {
display: none;
}这些选择器可以用来定制元素之间的关系样式，使得文档结构更加清晰和可维护。
import requests
from bs4 import BeautifulSoup
# 发送HTTP请求获取网页内容
url = 'https://www.example.com'
response = requests.get(url)
# 解析网页内容
soup = BeautifulSoup(response.text, 'html.parser')
# 提取HTML内容
html_content = soup.prettify()
# 提取CSS内容
css_content = ''
for style in soup('style'):
css_content += style.get_text()
# 提取JavaScript内容
javascript_content = ''
for script in soup('script'):
javascript_content += script.get_text()
# 打印结果
print("HTML 内容:")
print(html_content)
print("\nCSS 内容:")
print(css_content)
print("\nJavaScript 内容:")
print(javascript_content)这段代码使用了requests库来发送HTTP请求获取网页内容，使用BeautifulSoup库来解析HTML，提取出HTML、CSS和JavaScript的内容，并打印输出。这是一个简单的网络爬虫示例，展示了如何处理和分析网页中的这些重要元素。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.item {
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
}这段代码定义了一个容器 .container，它使用了 CSS Grid 布局。grid-template-columns 属性设置了列的数量和大小，使用 repeat(auto-fit, minmax(150px, 1fr)) 自动填充列，每列的最小宽度为 150px，并且会占据剩余空间的一部分。gap 属性在网格项之间添加了间隙。.item 类定义了网格项的样式，包括背景色、边框和内边距。这个布局方法使得容器内的项可以响应屏幕大小的变化，方便实现响应式设计。
在CSS中，可以使用-webkit-line-clamp属性配合display: -webkit-box和-webkit-box-orient: vertical来实现多行文本的展开和收起功能。以下是实现这一功能的基本样式和HTML结构：
CSS样式：
.text-collapse {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3; /* 定义文本的最大行数 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
max-height: 4.5em; /* 行高*最大行数，根据实际行高调整 */
line-height: 1.5em; /* 根据实际行高调整 */
cursor: pointer;
/* 可以添加更多样式，如颜色、字体等 */
}
.text-collapse-hidden {
max-height: 4.5em; /* 根据实际行高调整 */
}HTML结构：
<div class="text-collapse" id="textCollapse">
这里是一段很长的文本内容，可能有很多行。这里是一段很长的文本内容，可能有很多行。
这里是一段很长的文本内容，可能有很多行。这里是一段很长的文本内容，可能有很多行。
</div>
<button onclick="toggleText()">展开/收起</button>JavaScript代码：
function toggleText() {
var textCollapse = document.getElementById('textCollapse');
textCollapse.classList.toggle('text-collapse-hidden');
}在这个例子中，-webkit-line-clamp设置为3，意味着文本最多只会显示3行。当用户点击按钮时，通过JavaScript来切换.text-collapse-hidden类，从而改变元素的max-height属性，实现展开或收起的效果。如果需要在移除text-collapse-hidden类时恢复为收起状态，可以在CSS中将.text-collapse-hidden的max-height设置为与-webkit-line-clamp对应的最大高度。
CSS中的background-image属性允许您为元素设置多个背景图像。通过使用linear-gradient或其他图像函数，可以创建复杂的背景图案。
以下是一些使用background-image的示例：
- 设置单个背景图像：
div {
background-image: url('image.jpg');
}- 设置多个背景图像：
div {
background-image: url('image1.jpg'), url('image2.jpg');
}- 使用渐变和图像混合模式创建复杂背景：
div {
background-image: linear-gradient(to right, red, yellow), url('image.jpg');
background-blend-mode: multiply;
}- 分割背景图像：
div {
background-image: linear-gradient(to right, red 50%, transparent 50%), url('image.jpg');
}在这个示例中，我们使用了一个线性渐变创建了一个红色条纹，然后通过设置渐变中红色的位置来“分割”背景图像。这里使用了透明度来实现视觉效果，但实际上并没有改变图像本身，只是遮盖了图像。如果需要实际切割图像，可能需要使用其他技术，如使用background-position或者负值background-position来“切割”图像。
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
minimize: true,
// 添加autoprefixer插件
importLoaders: 2,
sourceMap: true
}
},
{
loader: "postcss-loader",
options: {
plugins: function() {
return [
require("autoprefixer")({
browsers: ["last 2 versions"]
})
];
}
}
},
"sass-loader"
]
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: "[name].min.css"
})
]
};这段代码使用了extract-text-webpack-plugin来提取出SCSS文件并使用css-loader、postcss-loader和sass-loader进行处理，并通过autoprefixer插件来添加浏览器兼容性。最后，使用ExtractTextPlugin插件将处理后的CSS输出到一个压缩过的文件中。