首页 > 其他分享 >css

css

时间：2024-02-02 16:55:07浏览次数：28  
标签：height width var position rotates css left

波浪 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>波浪</title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.blue{
			width: 100%;
			height: 100vh;
			overflow: hidden;
			background: #87CEEB;
			position: relative;
		}
		.white{
			width: 400vw;
			height: 400vw;
			position: absolute;
			left: -150vw;
			top: -365vw;
			background: #fff;
			border-radius: 45%;
			animation:rotates 12s linear infinite ;
		}
		@keyframes rotates{
			from{
				transform: rotate(0);
			}
			to{transform: rotate(360deg);}
		}
	</style>
	<body>
		<div class="blue">
			<div class="white"></div>
		</div>
	</body>
</html>
粒子1 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粒子字体</title>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }

        canvas {
            display: block;
            position: relative;
            z-index: 55;
        }
        .box{
        	position: absolute;
        	z-index: 66;
        	width: 200px;
        	height: 50px;
        	bottom: 20px;
        	left: 47%;
        	border:2px solid skyblue;
        	color: skyblue;
        	cursor: pointer;
        	font-size: 30px;
        	line-height: 46px;
        	text-align: center;
        	font-weight: bold;
        }
        .box1{
        	left: 20%;
        }
        .box2{
        	left: 50%;
        }
        .box3{
        	left: 80%;
        }
    </style>
</head>

<body onl oad="draw();">
	<div class="box box2" onclick="btnClick1()">白狗</div>
	<div class="box box1" onclick="btnClick2()">汪</div>
	<div class="box box3" onclick="btnClick3()">心</div>
</body>
<script src="../../js/lib/three.js"></script>
<script src="../../js/lib/OrbitControls.js"></script>
<script src="../../js/lib/stats.min.js"></script>
<script src="../../js/lib/dat.gui.min.js"></script>
<script src="../../js/lib/Detector.js"></script>
<script src="../../js/lib/tween.min.js"></script>
<!--<script src="../../js/lib/Projector.js"></script>-->

<script>                                                     
    var renderer, camera, scene, gui, light, stats, controls;
    //字体的点集
	var originParticleField,pointsMaterial,geo_ver,geo_ver2,tween,hearts=[];
	//初始点
	var baseLens =10000,basePoint=[],baseArea=160;
	for(var i=0;i<baseLens;i++){
		var x= Number(Math.random()*baseArea)-baseArea/2;
		var y= Number(Math.random()*baseArea)-baseArea/2;
		var z= Number(Math.random()*baseArea)-baseArea/2;
		var obj = {
			x:x,
			y:y,
			z:z
		}
		basePoint.push(obj);
	}
	
	
	
    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xeeeeee);
        renderer.shadowMap.enabled = true;
        //告诉渲染器需要阴影效果
        document.body.appendChild(renderer.domElement);
    }

    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
        camera.position.set(0, 20, 80 );
    }

    function initScene() {
        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xa0a0a0 );
        scene.fog = new THREE.Fog( 0xa0a0a0, 5, 250 );
    }

    //初始化dat.GUI简化试验流程
    function initGui() {
        //声明一个保存需求修改的相关数据的对象
        gui = {
            bump:0.03,
            animation:false
        };
        var datGui = new dat.GUI();
        //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
        datGui.add(gui, "bump", -1, 1).onChange(function (e) {
            cube1.material.bumpScale = e;
        });

        datGui.add(gui, "animation");
    }

    function initLight() {
        scene.add(new THREE.AmbientLight(0x444444));

        light = new THREE.DirectionalLight(0xffffff);
        light.position.set(0, 600, 240 );

        light.castShadow = true;
        light.shadow.camera.top = 10;
        light.shadow.camera.bottom = -10;
        light.shadow.camera.left = -10;
        light.shadow.camera.right = 10;

        //告诉平行光需要开启阴影投射
        light.castShadow = true;

//      scene.add(light);
    }

    function initModel() {

        //辅助工具
        var helper = new THREE.AxesHelper(50);
        scene.add(helper);

        // 地板
        var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) );
        mesh.rotation.x = - Math.PI / 2;
        mesh.receiveShadow = true;
        scene.add( mesh );

        //添加地板割线
        var grid = new THREE.GridHelper( 400, 50, 0x000000, 0x000000 );
        grid.material.opacity = 0.2;
        grid.material.transparent = true;
        scene.add( grid );

        //获取点集
		getFontPoints('白狗','geo_ver',-23,0,0);			
		getFontPoints('汪','geo_ver2',-8,0,0);
        
			
		//用点画字
		pointsMaterial = new THREE.PointsMaterial({
		    color:0xffffff,
		    size:0.5,
		    transparent:true,//使材质透明
		    blending:THREE.AdditiveBlending,
		    depthTest:false,//深度测试关闭，不消去场景的不可见面
		    map:createLightMateria()//刚刚创建的粒子贴图就在这里用上
		});
		
		var originGeo = new THREE.Geometry();
		for (var i = 0; i <baseLens; i++){//循环创建Geo
			var x = basePoint[i].x;
			var y = basePoint[i].y;
			var z = basePoint[i].z;
		    originGeo.vertices.push(new THREE.Vector3(x,y,z));
		}
		originParticleField = new THREE.Points(originGeo,pointsMaterial);
//		originParticleField.position.set(-20,10,0);
		scene.add(originParticleField);

    }
    //获取 文字的点集
    function getFontPoints(txt,type,x,y,z){
    	if(!x){var x=0;}
    	if(!y){var y=0;}
    	if(!z){var z=0;}
    	var move =true;
    	if(x==0&&y==0&&z==0){move = false;}
    	var res = [];
    	var loader = new THREE.FontLoader();
    	loader.load("../../json/KaiTi.json",function(text){
    		var gem2 = new THREE.TextGeometry(txt, {
	            size: 16, //字号大小，一般为大写字母的高度
	            height: 0.5, //文字的厚度
	            weight: 'normal', //值为'normal'或'bold'，表示是否加粗
	            font: text, //字体，默认是'helvetiker'，需对应引用的字体文件
	            style: 'normal', //值为'normal'或'italics'，表示是否斜体
	            bevelThickness: 0.5, //倒角厚度
	            bevelSize: 0.5, //倒角宽度
	            curveSegments: 8,//弧线分段数，使得文字的曲线更加光滑
	            bevelEnabled: true, //布尔值，是否使用倒角，意为在边缘处斜切
	        });
		    res = gem2.vertices;
		    //字体一般不是居中的，需要手动调下
		    if(move){
		    	var lens= res.length;
		    	var attrs = [];
		    	for(var i=0;i<lens;i++){
		    		var obj = {
		    			x:res[i].x+x,
		    			y:res[i].y+y,
		    			z:res[i].z+z,
		    		}
		    		attrs.push(obj);
		    	}
		    	res = attrs;
		    }
		    switch(type){
		    	case 'geo_ver':
		    	geo_ver = res;
		    	break;
		    	case 'geo_ver2':
		    	geo_ver2 = res;
		    	break;
		    }
    	});  	
    }
    
    //获取桃心的点集
	function heart(){
		var res = [];
		var a=10,x=-180,a0=0,b0=0,c0=0,y=0;
		
		t = 0;
		for(var i=0;i<360;i++){
			t=(i+t)*Math.PI/180;
			y=a*(2*Math.cos(t)-Math.cos(2*t));
			x=a*(2*Math.sin(t)-Math.sin(2*t));
			var obj = {
				x:x,
				y:y+20,
				z:0
			}
			res.push(obj);
			var obj = {
				x:x*(17/20),
				y:y*(17/20)+20,
				z:0
			}
			res.push(obj);
			var obj = {
				x:x*(13/20),
				y:y*(13/20)+20,
				z:0
			}
			res.push(obj);
		}
		
		
		hearts =res;
	}
	
	function pointMove(position1){
		//移除粒子浮动动画
//		TWEEN.removeAll();
		var pointNow = originParticleField.geometry.vertices;
		var lens0 = position1.length;
       	var pos = {val:1};
       	var callback=function(){
		    var val = this.val;
		    var particles = originParticleField.geometry.vertices;		    
//		    return console.log(particles);
		    for(var i = 0; i < baseLens; i++) {
		    	var pos = particles[i];
		    	
		    	if(i<lens0){			
			        pos.x = pointNow[i].x * val + position1[i].x * (1-val);
			        pos.y = pointNow[i].y * val + position1[i].y * (1-val);
			        pos.z = pointNow[i].z * val + position1[i].z * (1-val);			
		    	}else{
			    	pos.x = pointNow[i].x * val + basePoint[i].x * (1-val);
			        pos.y = pointNow[i].y * val + basePoint[i].y * (1-val);
			        pos.z = pointNow[i].z * val + basePoint[i].z * (1-val);		
		    	}		       	        
		    }
		    originParticleField.geometry.verticesNeedUpdate = true;
		}
       	tween = new TWEEN.Tween(pos).to({val: 0}, 2000).easing(TWEEN.Easing.Quadratic.InOut).delay(500).onUpdate(callback);
		tween.start();
    }
	//粒子浮动动画

	//绘制粒子贴图，
	function createLightMateria() {
		var canvasDom = document.createElement('canvas');
		canvasDom.width = 16;
		canvasDom.height = 16;
		var ctx = canvasDom.getContext('2d');
		//根据参数确定两个圆的坐标，绘制放射性渐变的方法，一个圆在里面，一个圆在外面
		var gradient = ctx.createRadialGradient(
		    canvasDom.width/2,
		    canvasDom.height/2,
		    0,
		    canvasDom.width/2,
		    canvasDom.height/2,
		    canvasDom.width/2);
		gradient.addColorStop(0,'rgba(255,255,255,1)');
		gradient.addColorStop(0.005,'rgba(139,69,19,1)');
		gradient.addColorStop(0.4,'rgba(139,69,19,1)');
		gradient.addColorStop(1,'rgba(0,0,0,1)');
		
		//设置颜色为渐变
		ctx.fillStyle = gradient;
		//绘图
		ctx.fillRect(0,0,canvasDom.width,canvasDom.height);
		 
		//贴图使用
		let texture = new THREE.Texture(canvasDom);
		texture.needsUpdate = true;//使用贴图时进行更新
		return texture;
	}

    //初始化性能插件
    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }

    function initControls() {

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        //设置控制器的中心点
        controls.target.set( 0, 5, 0 );
        // 如果使用animate方法时，将此函数删除
        //controls.addEventListener( 'change', render );
        // 使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableDamping = true;
        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
        //controls.dampingFactor = 0.25;
        //是否可以缩放
        controls.enableZoom = true;
        //是否自动旋转
        controls.autoRotate = false;
        controls.autoRotateSpeed = 0.5;
        //设置相机距离原点的最远距离
        controls.minDistance = 1;
        //设置相机距离原点的最远距离
        controls.maxDistance = 2000;
        //是否开启右键拖拽
        controls.enablePan = true;
    }

    function render() {
        controls.update();
    }

    //窗口变动触发的函数
    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function animate() {
        //更新控制器
        render();

        //更新性能插件
        stats.update();
        
		 TWEEN.update();
		
        renderer.render(scene, camera);

        requestAnimationFrame(animate);
    }

    function draw() {
        //兼容性判断
        if (!Detector.webgl) Detector.addGetWebGLMessage();

        initGui();
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        initControls();
        initStats();

        animate();
        window.onresize = onWindowResize;
    }

//汪
	function btnClick2(){
   		pointMove(geo_ver2);
   	}
	//白狗
	function btnClick1(){
   		pointMove(geo_ver);
   	}
	//白狗
	function btnClick3(){
   		pointMove(hearts);
   	}
	
	heart();

</script>
</html>

抽奖推荐这个大佬(很棒)
https://github.com/baiDog/something/tree/master/test

标签：height,width,var,position,rotates,css,left
From： https://www.cnblogs.com/zsnhweb/p/18003466

相关文章

  • js+css 父div，里面有很多子div，当子div在父div中放不下时候，自动滚动子div，向左横向滚动，
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metaname="viewport"content="width=device-width,initial-scale=1.0">  <style>    #parentDiv{  ......
  • css 相对定位与绝对定位
     这种效果，如果来实现呢？一般会有一些三方的组件，比如Icon图标 van-icon。  也可以手工写下： <divclass="container"><divclass="item_dot"></div></div>容容.container{position:relative;/*容器采用相对定位*/...}右侧角标  .item_d......
  • 从零搭建Vue3 + Typescript + Pinia + Vite + Tailwind CSS + Element Plus开发脚手架
    项目代码以上传至码云，项目地址：https://gitee.com/breezefaith/vue-ts-scaffold目录前言脚手架技术栈简介vue3TypeScriptPiniaTailwindCSSElementPlusvite详细步骤Node.js安装创建以typescript开发的vue3工程集成Pinia安装pinia修改main.ts创建一个store在组件中使用store集......
  • js获取/设置css变量
    -<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><st......
  • CSS遮罩mask【详解】
    参考：https://blog.51cto.com/u_15715491/5465418我刚开始看到mask这个词语，就想起了口罩，但是我试用了一下，很奇怪与生活中的口罩理解有很大差别，生活中戴上口罩后肯定就看不到嘴巴了，只能看到口罩的颜色图案样式等，CSS3中使用了mask后，反而遮罩层的颜色图案样式全没了，被遮罩的元素只会......
  • css中的resize设置、高度没有对齐、表单在校验、边框发生重叠
    小知识点汇总css❓：css中的resize设置......
  • CSS规则集详解
    整个结构称为规则集（规则集通常简称规则），注意各个部分的名称：选择器（Selector）HTML元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 <p> 元素）。要给不同元素添加样式，只需要更改选择器。声明（Declaration）一个单独的规则，如 color:red; 用来指......
  • CSS的单位
    我们在布局或者设置字体大小的时候经常看到:22px;,px其实是css里面长度单位绝对长度px*像素(1px=1/96thof1in)cm厘米mm毫米in英寸(1in=96px=2.54cm)相对长度em它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认......
  • CSS绘制简单的流程图
    效果图代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>Document<......
  • vue配合什么css框架
    在Vue中使用CSS框架可以提高开发效率和网站外观的一致性。下面是一些与Vue兼容的常见CSS框架：BootstrapVue：BootstrapVue是一个基于Vue.js的Bootstrap组件库。它提供了一套完整的Vue.js组件，同时也支持Bootstrap的所有特性。ElementUI：ElementUI是一套基于Vue.js的组件库......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99