css做的一些图形。要先理解一个基础：css边框相接触的地方是45度平分空间的。#k{width: 20px;height: 30px;border: 40px solid;border-color: red green yellow blue;} 图形一： 1#talkbubble { 2 width: 120px; 3 height: 80px; 4 background: red; 5 position: relative; 6 } 7 #talkbubble:before { 8 content:"";9 position: absolute; 10 right: 100%; 11 top:...
一、文字选择的可用性 我们平时因为A原因或B原因，需要复制web页面上的文字内容。常见的操作就是按住鼠标，选中要复制的文字区域，抬起鼠标按键，目标区域的文字就选中了。不知你知不知道，有些看山去OK的CSS布局实际影响了页面上文字复制的可用性。这么说吧，假设你在微博上看见一个名为“屌丝逆袭”的标题，但是，由于孤陋寡闻，不知道这个标题啥意思，于是想百度之，最快的方式就是选择→复制→搜索。结果，像中了邪，这几个文字...
1 实现3D立方体首先准备好UL以及6个Li；代码如下ul { position: absolute; top: 50%; left: 50%;transform:translate(-50%,-50%) // 以上代码主要是使ul居中而已 transform-style: preserve-3d; // 使子元素保留其3D视角-webkit-perspective: 0; //视距离，默认值为0 } li { width: 200px; height: 200px; position: absolute; ...
.ui-button {BORDER-LEFT-WIDTH: 0px; OVERFLOW: visible; CURSOR: pointer; FONT-SIZE: 16px; HEIGHT: 40px; BORDER-RIGHT-WIDTH: 0px; VERTICAL-ALIGN: middle; BORDER-BOTTOM-WIDTH: 0px; ZOOM: 1; FONT-WEIGHT: 700; COLOR: #fff; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; PADDING-LEFT: 20px; FILTER: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘...
前几天在公司做开发的时候碰到一个列表横向滑动的功能，当时用了iscroll做，结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题。这个问题不知道iscroll本身能不能解决，当时选择了换一种方式来做，只要css就能搞定了，主要是利用了display:-webkit-box来实现。<!DOCTYPE html><html><head><title>横向滑动</title><style type="text/css">.slide-box{margin-top: 200px;display: -webkit-box;overflow-x: scroll;-webkit-ov...
学习来源:慕课网http://www.imooc.com/view/240先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ HTML结构 1<body> 2<div class="wrap effect"> 3<!-- effect类:是阴影类,其他元素也可以使用 --> 4<h1>Shadow Effect</h1> 5</div> 6<ul class="box"> 7<li><img src="images/photo1.jpg" alt=""></li> 8<li><img src="images/photo2.jpg" alt=""></li> 9<li><img src="images/photo3.jpg" alt=""></li>10</ul>11</body>CSS样...
昨晚上闲的没事突然想做几个小loading效果，下面是昨晚上做的几个小案例，分享给大家 1.水波loading：这个loading是我觉得非常简单，但是看上去的效果却非常不错的一个小loading 这个是效果图片 下面我直接把代码放上来，大家需要的可以直接拉走 核心思想：（旋转，以及overflow:hidden属性），可以把代码中的overflow属性注释掉，保准你看一眼明白了，看不明白回来找我，我对你负责 <!DOCTYPE html> <html...
<div class="close"></div>.close {position: relative;width: 40px;height: 40px; }.close::before, .close::after {position: absolute;content: ' ';background-color: red;left: 20px;width: 1px;height: 40px; }.close::before {transform: rotate(45deg); }.close::after {transform: rotate(-45deg); }原文：https://www.cnblogs.com/xiaoyucoding/p/12527056.html
原文地址今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生——网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS渐变来完成。注意，这个技术还是实验性的。首先，让我们来看看基本的概念，然后我们会朝着这个方向努力。请注意，我们将在SVG上使用CSS过渡，可能无法得到...
复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css实现的交互小三角箭头图标</title><style>p{border-color: transparent transparent #f0f0f0 transparent;border-style: solid;border-width: 0...
1. 方法一 table-cell 2.css盒模型 原文：https://www.cnblogs.com/zhumingyong/p/8514440.html
本文实例讲述了CSS实现带有小图片的LI图标列表菜单。分享给大家供大家参考。具体如下：这是一款带有小图片的Li列表菜单，竖向的图标菜单，鼠标放上会变色，对鼠标的响应很符合用户体验，且兼容性好，代码简洁，适宜学习和使用，CSS初学者的一个好范例。运行效果截图如下：在线演示地址如下：http://demo.jb51.net/js/2015/css-small-pic-li-menu-codes/具体代码如下：复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>相册方式展现的字母表丨草坪基地</title><style type="text/css">body{ margin:0; padding:0; text-align:center;}#container {font-family:"courier new", monospace...
这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片；本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=)： 首先是box-shados语法,用于向框添加一个或多个阴影：box-shadow: h-shadowv-shadowblurspreadcolor inset;值描述h-shadow必须。水平阴影的位置v-shadow必须。垂直阴影的位置blur可选。模糊距离spread可...
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>checkbox</title><style>.checkbox input {display: none;}.checkbox input+label {background: url(./checkbox1.png) left center no-repeat;background-size: 20px 20px;padding-left: 20px;}.checkbox input:checked+label {background...