1<!DOCTYPE html> 2<meta charset="UTF-8"/> 3<html> 4 5<head> 6<style> 7 div { 8 width: 100px; 9 height: 100px;10 background: red;11 position: relative;12 animation: myfirst 5s infinite alternate;13}1415 @keyframes myfirst {16 0% {
17 background: red;18 ...
1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移100%就可以了,父级记得超出隐藏。具体实现如下html结构为<div class="title">我是分割线</div>css样式为.title{position: relative;text-align: center;overflow: hidden;font-size: 14px;color: #999;
}
.title::before,.tit...
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...