精华内容
参与话题
问答
  • HTML+CSS初级入门

    万人学习 2017-07-22 13:34:05
    本课程主要目标是教给大家: 1)HTML和CSS能干什么? 2)HTML和CSS是什么?...3)HTML和CSS怎么用,这里会讲解常用到的HTML和CSS的使用规则 4)一步一步开发一个响应式的页面 QQ交流群:659123270
  • HTML&CSS;实战教程

    万人学习 2017-03-20 12:00:26
    创建标准网页的初学者指南,也适合深入学习Html,CSS的同学,后面课程有深入的讲解,本课程会初级介绍Html和CSS,让你从入门到精通轻松掌握Web开发语言,从元素标签到CSS样式每个部分都详细进行了介绍和讲解,讲解了...
  • 用html+CSS制作一个3D旋转相册

    千次阅读 多人点赞 2019-10-22 16:13:33
    前端html+css知识小应用 首先,我们要新建一个总的文件夹,文件夹里面新建一个images的文件夹,用来装图片,一个HTML文件,这里要注意,images文件夹和html文件是并列属性的,编辑器我用的webstrom,如下图所示: ...

    前端html+css知识小应用

    首先,我们要新建一个总的文件夹,文件夹里面新建一个images的文件夹,用来装图片,一个HTML文件,这里要注意,images文件夹和html文件是并列属性的,编辑器我用的webstrom,如下图所示:

    在这里插入图片描述
    然后,在images里面保存10张图片加1张背景图片(背景图片可以不设置),图片名字按顺序用1.jpg到10.jpg,背景图片这里用的star.jpg。如下图所示:

    在这里插入图片描述
    接下来就是代码部分了,新建一个html文件,名字随意,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>致青春</title>
    	<style>
    		*{margin: 0;padding: 0;}
    		html,body{height: 100%;}
    		body{
    			
    			display: flex;
    			
    			perspective: 1000px;
    			transform-style: preserve-3d;
    			background-image: url(images/star.jpg);
    			height:100%;
    			width: 100%;
    		}
    		#box{
    			position: relative;
    			display: flex;
    			width: 130px;
    			height: 200px;
    			margin: auto;
    			transform-style: preserve-3d; 
    			transform: rotateX(-10deg);
    		}
    		#box > div{
    			transform-style: preserve-3d; 
    			position: absolute;
    			left: 0;
    			top: 0;
    			width: 100%;
    			height: 100%;
    			line-height: 200px;
    			font-size: 50px;
    			text-align: center;
    			box-shadow:0 0 10px #fff;
    			-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.8) 100%);
    		}
    		/*  #box > div:nth-child(1){
    					background: skyblue;
    					transform: translate3d(0,0,300px) rotateY(45deg);
    				}
    				#box > div:nth-child(2){
    					background: pink;
    					transform: rotateY(0deg);
    				}
    				#box > div:nth-child(3){
    					background: purple;
    					transform: translate3d(0,0,300px) rotateY(-45deg);
    				} 
    		*/
    		#box p{
    			position: absolute;
    			left: 0;
    			top: 0;
    			bottom: 0;
    			right: 0;
    			margin: auto;
    			width: 1200px;
    			height: 1200px;
    			background: -webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
    			border-radius: 50%;
    			transform: rotateX(90deg) translate3d(-600px,0,-105px);
    		}
    	</style>
    </head>
    <body>
    <div id="box">
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<p></p>
    </div>
    <script>
    setTimeout(init,100);
    function init(){
    	var obox = document.getElementById('box'),
    		aDiv = obox.getElementsByTagName('div');
    		
    		for (var i = 0; i < aDiv.length; i++) {
    			aDiv[i].style.background = "url(images/"+(i+1)+".jpg) center/cover";
    			aDiv[i].style.transform = "rotateY("+(i*36)+"deg) translate3d(0,0,350px)";
    			aDiv[i].style.transition = "transform 1s "+(aDiv.length-i)*0.2+"s";
    		}
    	var sX,
    		sY,
    		nX,
    		nY,
    		desX = 0,
    		desY = 0,
    		tX = 0,
    		tY = 10,
    		index = 0;//滚轮初始值
    	document.onmousedown = function(e){
    		clearInterval(obox.timer);
    		e = e || window.event;
    		var sX = e.clientX,
    			sY = e.clientY;
    			this.onmousemove = function(e){
    				e = e || window.event;
    				var nX = e.clientX,
    					nY = e.clientY;
    					 // 当前点的坐标和前一点的坐标差值
    					desX = nX - sX;
    					desY = nY - sY;
                        tX += desX*0.1; 
                        tY += desY*0.1;
    
    					obox.style.transform = "rotateX("+(-tY)+"deg) rotateY("+tX+"deg)";
    					sX = nX;
    					sY = nY;
    			}
    			this.onmouseup = function(){
    				this.onmousemove = this.onmouseup = null;
    				obox.timer = setInterval(function(){
    					desX *= 0.95;
    					desY *= 0.95;
    					tX += desX*0.1;
    					tY += desY*0.1;
    					obox.style.transform = "rotateX("+(-tY)+"deg) rotateY("+tX+"deg)";
    					if (Math.abs(desX)<0.5 && Math.abs(desY)<0.5) {
    						clearInterval(obox.timer);
    					}
    				},13);
    			}
    		return false;
    	}
    	//滚轮放大缩小
    	mousewheel(document,function(e){
    		e = e || window.event;
    		var d = e.wheelDelta/120 || -e.detail/3;
    			if (d>0) {
    				index-=20;
    			}else{
    				index+=30;
    			}
    			(index<(-1050)&&(index=(-1050)));
    		document.body.style.perspective = 1000 + index + "px";
    	})
    	function mousewheel(obj,fn){
    		document.onmousewheel===null?obj.onmousewheel=fn:addEvent(obj,"DOMMouseScroll",fn)
    	}
    	function addEvent(obj,eName,fn){
    		obj.attachEvent?obj.attachEvent("on"+eName,fn):obj.addEventListener(eName,fn);
    	}
    }
    </script>
    </body>
    </html>
    

    最后保存一下再运行就可以看到效果图了,因为本人是鞠婧祎的音乐粉丝,所以用的是鞠婧祎的图片,背景图片是在网上搜的星空图片,下面是我的效果图:
    在这里插入图片描述
    这个小demo保存之后,以后打开只要点击那个html文件,都可以看到这个效果。鼠标放在图片上,按住然后往上下左右滑都会旋转的

    展开全文
  • CSS样式设计,其中有动画特效、渐变、图形图像、2D/3D转换特效、自适应网页设计等;JS包含核心语法、面向对象编程、复杂的项目案例、HTTP网络协议、AJAX前后端异步交互等;新型前端开发大部分回归原始开发,核心编程...
  • css3D

    万次阅读 2019-08-10 15:40:29
    在写3D的时候总是搞不清楚轴在哪,那个是哪个轴 其实3D在身边,我们自己就生活在3D空间中 X轴就是我们站直了之后左右平移的效果 Y轴就是我们坐电梯上下的效果 Z轴就是我们前进后退的效果 沿轴翻转 沿着X轴翻转就是你...

    在写3D的时候总是搞不清楚轴在哪,那个是哪个轴

    其实3D在身边,我们自己就生活在3D空间中

    X轴就是我们站直了之后左右平移的效果
    Y轴就是我们坐电梯上下的效果
    Z轴就是我们前进后退的效果

    沿轴翻转

    沿着X轴翻转就是你站直了身体前倾后仰的感觉,仰多少就取决于你的值了
    沿Y轴就是你站直了原地转圈的感觉
    而沿Z轴翻转就是你站直了左右倒的感觉

    当将虚拟的东西比作自己的时候,你会发现简单好多

    展开全文
  • 利用DIV+CSS布局来制作一个登录页面 login.html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <!--引入字体图标库--> ....

    利用DIV+CSS布局来制作一个登录页面

    login.html部分:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title></title>
            <!--引入字体图标库-->
            <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
            <link rel="stylesheet" href="css/reset.css">
            <link rel="stylesheet" href="css/login.css">
        </head>
        <body>
    
            <div class="wrap">
                <h1>易购商城后台管理系统</h1>
                <form action="">
                    <div class="input-group">
                        //输入框左边的类似图标的东西是一种字体
                        //可在网上下载文件font-awesome-4.7.0后直接粘贴在项目目录下使用
                        <i class="icon-user fa fa-user"></i>
                        <input type="text" name="" class="form-control" placeholder="请输入用户名">
                    </div>
                    <div class="input-group">
                        <i class="icon-user fa fa-lock"></i>
                        <input type="password" name="" class="form-control" placeholder="请输入密码">
                    </div>
                    <div class="input-group btn-group">
                        <button>登录</button>
                    </div>
                </form>
                <p>&copy;xx集团&nbsp;版权所有</p>
            </div>
    
        </body>
    </html>
    

    reset.css部分(重置部分)

    *{
    	margin:0;
    	padding:0;
    }
    a{
    	font-size: 12px;
    	text-decoration: 0;
    	color:#222;
    }
    a,
    input,
    button{
    	outline: none;
    }
    ul,ol,li{
    	list-style: none;
    }
    h1,h2,h3,h4,h5,h6{
    	font-weight: 100;
    }
    img{
    	display: block;
    	border: 0;
    }
    

    关于重置样式文件:

    因为不同的浏览器对html标签的渲染有各自不同,即使开发者不对html页面写一行css代码,打开的页面也总会存在样式,但不同的浏览器的默认样式略有不同,这在一定程度上给开发者创造了麻烦,所以一般在开始写css代码的之前总是会先重置样式表,使得所有浏览器中html元素的样式统一,前端工程师通过自定义样式文件进行样式的统一,从而提高了前端界面的兼容性。

    login.css部分

    y{
    	background: rgba(0,0,0,0.8);
    }
    body{
        //为网页设置背景图片
    	background-image: url(../img/xx.jpg);
    }
    .wrap{
        //使界面主体在浏览器居中
    	position: absolute;//绝对定位
    	left: 50%;
    	top: 50%;
    	margin: -175px 0 0 -250px;
    	padding: 20px;
    	width: 500px;
    	height: 350px;
    	background: #333333;
    	box-shadow:0 0 10px rgba(255,255,255,0.5);
    	box-sizing: border-box;//padding和border被包含在定义的width和height之内
    }
    h1{
    	height: 50px;
    	font-size: 1.6em;
    	text-align: center;
    	border-bottom: 1px solid rgba(255,255,255,0.5);
    }
    .input-group{
    	margin: 20px auto;
    	height: 40px;
    	width: 300px;
    	border: 1px solid rgba(0,0,0,0.2);
    }
    i{
    	float: left;//左浮
    	width: 40px;
    	height: 40px;
    	text-align: center;
    	line-height: 40px !important;
    	background: rgb(22,160,93);
    	color: #fff;
    	font-size: 22px !important;
    	
    }
    .form-control{
    	float: left;
    	padding: 0 10px;
    	height: 40px;
    	border: 0;
    	width: 260px;
    	font-size: 18px;
    	box-sizing: border-box;
    }
    .btn-group{
    	border: 0;
    	margin-top: 40px;
    }
    button{
    	display: block;
    	width: 100%;
    	height: 40px;
    	font-size: 1.2em;
    	letter-spacing: 10px;
    	border: 1px solid rgb(22,160,93);
    	color: rgb(22,160,93);
    	background: #fff;
    	cursor: pointer;
    }
    button:hover{
        //为按钮元素设置鼠标悬浮的动态效果
    	color: #fff;
    	background: rgb(22,160,93);
    }
    p{
    	font-size: 12px;
    	text-align: center;
    	color: #888;
    }
    

    设计结果在浏览器上的效果
    在这里插入图片描述

    展开全文
  • 用HTML+CSS代码制作3D旋转相册

    万次阅读 多人点赞 2018-09-19 21:37:53
    手打代码: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head lang=&quot;en&quot;&amp;gt; &amp;lt;meta charset=&...3D旋转&amp;lt;/title&

    对于很多小伙伴给我的留言问题,我详细总结一下

    一、我的项目文件目录

    图片全部存放在images文件夹下,你把自己需要显示的图片放在images文件夹下就可以了,一共是11张图片,一张背景图
    我的图片命名为1.jpg,2.jpg……,可以自己更改图片名字,代码里也需要修改为自己的图片名字哦

    在这里插入图片描述

    二、index文件代码如下:(最后有百度网盘链接)

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>3D旋转</title>
        <style type="text/css">
            *{padding: 0;
            margin: 0;}
            body,html{height:100%;}
            /* 背景图片在这里设置 */
            body{background-image: url("images/beijing.jpg");background-size: 100% 100%;}
            #box{width: 280px;
                height: 400px;
                position: fixed;
                left: 0;
                right: 0;
                top:0;
                bottom: 0;
                margin: auto;
                transform-style: preserve-3d;
                transform: rotateX(0deg) rotateY(0deg);
                animation: go 45s linear infinite;
               }
            #box img{width: 280px;
                     height: 400px;
                     position: absolute;
                     left: 0;
                     top: 0;
            }
            #box img:nth-child(1){
                transform: rotateY(0deg) translateZ(650px);}
            #box img:nth-child(2){
                transform: rotateY(36deg) translateZ(650px);}
            #box img:nth-child(3){
                transform: rotateY(72deg) translateZ(650px);}
            #box img:nth-child(4){
                transform: rotateY(108deg) translateZ(650px);}
            #box img:nth-child(5){
                transform: rotateY(144deg) translateZ(650px);}
            #box img:nth-child(6){
                transform: rotateY(180deg) translateZ(650px);}
            #box img:nth-child(7){
                transform: rotateY(216deg) translateZ(650px);}
            #box img:nth-child(8){
                transform: rotateY(252deg) translateZ(650px);}
            #box img:nth-child(9){
                transform: rotateY(288deg) translateZ(650px);}
            #box img:nth-child(10){
                transform: rotateY(324deg) translateZ(650px);}
    		@keyframes go {
    		    0%{transform: rotateX(0deg) rotateY(0deg);}
    		    25%{transform: rotateX(20deg) rotateY(180deg);}
    		    50%{transform: rotateX(0deg) rotateY(360deg);}
    		    75%{transform: rotateX(-20deg) rotateY(540deg);}
    		    100%{transform: rotateX(0deg) rotateY(720deg);}
    		
    		}
        </style>
    </head>
    	<body>
    		<div id="box">
    		    <img src="images/1.jpg">
    		    <img src="images/2.jpg">
    		    <img src="images/3.jpg">
    		    <img src="images/4.jpg">
    		    <img src="images/5.jpg">
    		    <img src="images/6.jpg">
    		    <img src="images/7.jpg">
    		    <img src="images/8.jpg">
    		    <img src="images/9.jpg">
    		    <img src="images/10.jpg">
    		</div>
    	</body>
    </html>
    
    

    三、运行效果图:

    在这里插入图片描述

    四、打包运行:

    有小伙伴想打包为APP的可以使用Hbuilder打包传到手机上,详细看下面教程
    https://blog.csdn.net/qq_42259469/article/details/84646570?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158600294919195162559101%2522%252C%2522scm%2522%253A%252220140713.130056874…%2522%257D&request_id=158600294919195162559101&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-all_SOOPENSEARCH-1

    五、百度网盘下载

    链接: https://pan.baidu.com/s/1KrmOu-DVCN4kOSy_pPmvUw 提取码: yef9

    展开全文
  • css3 3D立方体流星动画特效

    万次阅读 2020-07-20 14:45:50
    css代码 *{ padding:0; margin: 0; } html{ background:linear-gradient(#032861 0%,#000000 80%); height: 100%; width: 100%; overflow: hidden; } /*满天星*/ .wall{ position: absolute; top: 0; ...
  • css3 3D立体相册实现

    千次阅读 2020-02-09 14:25:42
    这几天无聊,看到有博主弄的电子相册有点意思,就照葫芦画瓢也实现了一个,一个半透明的正方体包含着一个小正方体,相册自动旋转,当获得焦点时变化效果,截图如下: 一,代码目录结构 ...
  • HTML5 3D/CSS3 3D爱心动画项目实例源码

    千次下载 热门讨论 2014-08-20 11:30:37
    大家可以点解DEMO来看看。CSS3代码,对这些线条进行渲染,以便其有3D的视觉效果。很多div,主要是构造爱心的线条区域。
  • HTML5和CSS3

    千人学习 2017-11-23 11:21:58
    HTML5新特性和CSS3的使用案例,从入门到精通。
  • css3绘制3d翻页效果

    千次阅读 2015-02-22 23:21:56
    核心内容: 1.css3的transition属性来制作简单的动画 transition属性可以为指定的css属性添加动画效果,这个动画用到的是transform属性 transition: property duration...2.css3绘制3d图形旋转效果 transform属性
  • css让图片居中

    万次阅读 2017-12-08 20:24:47
    css让图片居中,不管图片是方图、竖图、横图,都可以让图片在父框架下居中,即方图则占满整个父框架;横图则左右填充上下居中;竖图则左右居中上下填充 1、html如下: /*这里的图片路径自己设置*/ 2、css...
  • 我已经有过一些与css 3d一起工作的经验,并且我脑海里开始出现了一个解决方案。我搜索了像“css 3d立方体”这样的关键词来确认我的想法。对技术感兴趣的朋友可以加我前端学习裙 学习编号:落叶,213126486,一起讨论...
  • 笔记-CSS3实现3D搜索输入框

    千次阅读 2015-08-18 17:38:44
    题外话今天拜读了大漠的图解CSS3>>发现里面这个按钮的实例挺赞的,稍微完善了一下原来例子. 去掉一些现在不用的前缀,补全了最终版的.clearfix,还有样式稍作修改~~原版效果图: 预备知识 基础布局知识 CSS2.1 && CSS3...
  • 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息。大家如果制作考验记忆力的连连看、扑克类的游戏神马的,甚至给女朋友写一些话语,放在使用该实例制作的相册之后都可以尝试...
  • 程序员女朋友的相册是这样的

    万次阅读 多人点赞 2019-11-20 15:53:22
    起因: 中午小姨发来一个某音视频,...作为 程序媛 一眼识破,这不就是css3动画嘛,小case; 于是,打开我的HBuilder~ 以我的女神(韩孝周)为例: 仿某音-3d旋转相册效果如下: 文末奉上源码: hove...
  • CSS实现3D相册

    千次阅读 2018-07-29 21:37:08
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="...
  • 利用css制作3D照片墙

    千次阅读 多人点赞 2019-10-27 09:46:51
    利用css制作3D照片墙 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <div> <img src="#"/> &...
  • css实现3d立体魔方

    千次阅读 2020-02-03 18:08:40
    今天来做一个简单的3d魔方 先看效果图吧!把这个看会了,一些网上的3d的相册你就都会了 一、我们先准备好们的html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title>3d立体魔方&...
  • html+CSS+javaScript 3D旋转相册

    千次阅读 2019-04-19 21:40:10
    今天博主翻了一下自己的电脑,找到了自己在刚开始接触到web编程时做的一些小页面,...3D旋转相册 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TIT...
  • css-3d旋转相册

    千次阅读 2019-06-24 18:05:37
    JavaWeb 应用设计及实战 目录 ... 利用 HTML 和 CSS 写个3 D 立方体旋转相册 在软件 WebStorm10 中建立如下如所示的文件夹 HTML 部分 +CSS 部分代码如下: <!DOCTYPE html> <html> <head&g...
  • css 网站分享系列利用最新的CSS技术,配合支持的浏览器,你可以轻松的在线创建、浏览并保存管理Web 3D图像。Tridiv是一个基于 Web 的免费编辑器,使用 CSS 创建 3D 图像,直观且容易操作,不需要多余的教程即可轻松...
  • CSS实现3D书本效果

    千次阅读 多人点赞 2020-06-10 14:41:57
    话不多说,先来看一下效果图 源代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...meta name="viewport" content="width=device-width, initial-scale=1.0">...style
  • 如何使用CSS3实现一个3D泡沫图形

    千次阅读 2016-05-06 19:51:54
    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识,我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。 我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。
  • 如何使用CSS3实现一个3D商品标签

    千次阅读 2016-05-15 13:02:26
    使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上, 来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背景图片,一种是使用三角形的CSS3伪元素。 本文介绍第2...
  • 階層式樣式表 (CSS) 轉換可讓... 您可以使用 CSS 轉換,變更元素在其父元素內的位置、操作元素的旋轉或縮放,以及套用扭曲。新增 perspective 屬性 (或 perspective 轉換函式) 可在轉換中加入立體感。 以
  • CSS3 3D旋转立方

    千次阅读 2018-06-04 15:42:54
    一、3D中的透视 &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;1、透视是我们观察事物的方式 &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;在美术学中,有一种画法叫做透视画法,...
  • css3D旋转立方体

    千次阅读 2018-10-15 15:18:47
    3D旋转效果主要使用了CSS3 transform 属性 首先我们先完善布局 要想完成一个立方体,首先我们要有一个参考界面,也就是立方体的核心 如图,标注区域就是我们的核心区,立方体的每个界面都是以核心为参考系 核心区域只...
  • CSS 3D实现旋转球

    千次阅读 2018-09-05 15:54:20
    直接上代码:  &lt;!DOCTYPE html&gt; &lt;html&...zimv-css 3d ball&lt;/title&gt; &lt;/head&gt; &lt;style&gt; body{ padding: 100px 0 0 150px

空空如也

1 2 3 4 5 ... 20
收藏数 864,624
精华内容 345,849
关键字:

3d