为您找到搜索结果：1786个
css实现了hover显示title的效果
<divdata-title="hello,world">hello...</div><style>div{position:relative;}div:hover::after{content:attr(data-title);//取到data-title属性的值display:inline-block;padding:10px14px;border:1pxsolid#ddd;border-radius:5px;position:absolute;top:-50px;left:-30px;}</style> 效果如下图： ...
css 自制一些小特效
Github地址位于gh-pages分支上https://github.com/a1115040996/MyHTML/ 3D卡片特效地址：https://a1115040996.github.io/MyHTML/3DCard.html 3D正方体特效地址https://a1115040996.github.io/MyHTML/3DSquare.html 油表盘特效https://a1115040996.github.io/MyHTML/仪表盘/cac.html 滚动抽奖特效https://a1115040996.github.io/MyHTML/炉石滚动抽奖特效.html 简单的瀑布流https://a1115040996.github.io/MyHTML/waterfall/index.html ...
scss文件使用笔记
1.编写兼容性代码例如透明度，兼容IE@mixinmOpacity($o){opacity:$o/100;filter:alpha(opacity=$o);}//引用.box{@includemOpacity(80);//将透明度设置为80%} 。。。。更新中...
使用vue-cli 引入bootstrap.min.css文件报错
可以在index.html里面引入boostrap.min.css文件将bootstrap.min.css文件放置于static/css/文件夹中然后再index.html文件中引入便可<linkrel="stylesheet"href="./static/css/bootstrap.min.css">...
CSS3D写3d画廊滚动
CSS样式表*{margin:0;padding:0;}.wrapper{width:800px;height:600px;background:#87CEEB;margin:0auto;position:relative;}ul{position:relative;top:0;bottom:0;right:0;left:0;margin:auto;width:800px;height:600px;transform-style:preserve-3d;}ul:hover{transition:all5s;transform:rotateY(360deg);}li{width:190px;height:300px;border-radius:15px;list-style:none;position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;} HTML5结构<divclass="wrapper"><ul><li></li><li></li>&l...
CSS3动画设置后台登录页背景切换图片
CSS3的动画很实用很好用，简单几句话就可以做出一个好看而且过渡平滑的body背景图片，不多说，来来来，上代码1body{2animation:mybg7s;3-webkit-animation:mybg7s;/*SafariandChrome*/4-moz-animation:mybg7s;/*SafariandChrome*/5animation-iteration-count:infinite;6}7@keyframesmybg{80%{background:url(/static/admin/images/banner_1.jpg);background-size:100%;}950%{background:url(/static/admin/images/banner_2.jpg);background-size:100%;}10100%{background:url(/static/admin/images/banner_1.jpg);background-size:100%;}11}12/*SafariandChrome*/13@keyframesmybg{140%{ba...
CSS3 3D立方体效果
CSS3系列已经学习了一段时间了，第一篇文章写了一些css3的奇技淫巧，原文戳这里，还获得了较多网友的支持，在此谢过各位，你们的支持是我写文章最大的动力^_^。那么这一篇文章呢，主要是通过一个3D立方体的效果实例来深入了解css3的transform属性，下面是这个实例的截图，加上动画还能旋转起来哟，是不是很酷炫？换上你喜欢的女生的照片，就可以大胆的撩妹了，哈哈！想要查看demo，请点击这里，3Dtransform立方体效果顾名思义：变换。就可以想到它可以做很多很多的事情了，这个属性有很多的值，在这里简单列举一下：translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定义位置的移动距离。scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,y,z)：定义元素的缩放比例。rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定义元素的旋转角度。skew(x-an...
CSS3 3D transform变换
、实际应用-图片的旋转木马效果您可以狠狠地点击这里：图片的旋转木马效果demo建议在足够新版本的FireFox浏览器或Safari浏览器下观看，Chrome可能需要居中定位查看，下图为效果缩略图：原理：那些看上去很酷酷的CSS33D效果其实就颠来倒去那几个属性（本文提到的这几个），折腾来折腾去，这里这个效果显然也是如此。首先HTML结构，如下：舞台容器图片图片图片...对于舞台，很简单，加个视距，比方说800像素：perspective:800px;对于容器，很简单，加个3D视图声明，如下：transform-style:preserve-3d;然后就是图片们了。为了不至于产生类似DNA的螺旋状效果，我们让所有图片position:absolute，公用同一个中心点。显然，图片旋转木马是类似钢管舞旋转的运动，因此，我们关心的是rotateY的大小。因为要正好绕成一个圈，因此，图片rotateY值正好0~360等分，于是，如果有9张图片，则每个图片的旋转角度累加40(360/9=40)度即可。因此有：img:nth-child(1){transform:rotateY(0de...
html、css、js实现简易计算器
学习HTML，CSS，JS一个月后，想着能自己是否能写出一个简单的东西，故编写了简易的计算器，之前也写过一个坦克大战，坦克大战的有些基本功能没有实现，故也没有记录下来，想来，对这行初来咋到的，还是需要留下些东西供自己日后回忆，于是写下这篇随笔；因第一次写博客，不知道怎么上传源代码，也不知道怎么在博客页面实现计算效果。下面是完成后计算器页面：该计算器只是实现了简易的计算功能，很多其他功能没有实现，如运算的优先级功能，在后面的学习中再慢慢改进吧！ 因计算器布局比较规整，故用table表格布局，也可以用div或列表来布局；单元格里加入button标签，整体上大的table里含三列两行，在单元格里再插入表格；下面代码是：大的table里的第一行，包括时间、计算结果、清零和退格。以下是HTML部分1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<title>计算器</title>6<linkrel="stylesheet"type="text...
使用 CSS3 实现超炫的 Loading（加载）动画效果
Loading动画效果一 HTML代码：1234567<divclass="spinner"> <divclass="rect1"></div> <divclass="rect2"></div> <divclass="rect3"></div> <divclass="rect4"></div> <divclass="rect5"></div></div>CSS代码：12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152.spinner{ margin:100pxauto; wid...
CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题，比如我想要个布局右侧固定宽度左侧自适应或者三列布局左右固定中间自适应的问题。 下面我们分别来学习下，当然我也是总结下而已，有如以下方法： 一：右侧固定宽度左侧自适应 第一种方法：左侧用margin-right，右侧float：right 就可以实现。HTML代码可以如下写: <divclass="box-left"> <ahref=""target="_blank">我是龙恩</a> </div> <divclass="box-right"> <ahref=""target="_blank">我是龙恩</a> &...
css实现固定高度及未知高度文字垂直居中的完美解决方案
在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题"，或者"图片垂直居中问题"，而我们最容易会想到使用表格来垂直居中，或者如果是单行文字的话使用height(高度)和line-height（行高）来解决，但是假如页面有多行文字的话固定高度该怎么解决?或者未知高度我们该用css怎么解决?且兼容各个游览器！一：单行文字垂直居中： 如果一个容器中只有一行文字的话，让他垂直居中比较简单直接定义height(高度)和line-height(行高)相等即可。 如：<div>aa</div>二：多行文本固定高度垂直居中： 1.除IE7及IE7以下游览器多行文本固定高度垂直居中的解决方案。 我们都知道我们可以用表格的方式实现文本垂直居中，同理我们可以用css来模拟表格的方式垂直居中vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,比如td等，但是对类似于span等这样的标签并不起作用，如果我们不考虑IE7及以下的话我们可以用display...