分类： 效果

bootstrap轮播图组件

0311lc.com说：一、轮播图组件模板（官方文档） <div id=”carousel-example-generic” class=”carousel slide” data-ride=”carousel”> <!– 指示器 –> <ol class=”carousel-indicators”> <li data-target=”#carousel-example-generic” data-slide-to=”0″ class=”active……阅读更多

bootstrap栅格系统

0311lc.com说：一、概念： ①Bootstrap包括了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动扩展到最多12列 ②栅格系统其实就是行和列的布局，网格状布局，通过一系列的行（row）与列（column）创建页面布局，你的内容就可以放入创建好的布局中。 二、行和列 ①行是类名row，其中container容器默认有15px的左右内间距 ，row 填充父容器的15px的左右内间距 margin-left,margin-right -1……阅读更多

bootstrap框架的基本使用

0311lc.com说：一、概述 ①当下最流行的前端UI框架（有预制界面组件），组件简洁大方，代码规范精简，界面自定义性强，可以有效提高web开发效率 ②有自己的生态圈，不断的更新迭代。提供了一套简洁、直观、强悍的组件。标准化的html+css编码规范。让开发更简单，提高了开发的效率。 ③虽然界面组件样式已经定义好了，但是扩展性相对较强，也就是说我们还可以自定义，修改默认样式 二、版本 ①2.x.x 停止维护，兼容性好，但是代码不够简洁，功能不够完善。 ②3.x.x 目前使用最多，稳定，但是放弃……阅读更多

文字阴影和背景缩放、背景线性渐变、多背景以及透明度

0311lc.com说： 一、文字阴影 text-shadow text-shadow: h-shadow v-shadow blur color; 文字阴影：水平位置，垂直位置，模糊距离，阴影的颜色。   <span>前端</span>   span{ font-size: 50px; color: red; text-shadow: 5px 5px 5px #FF0000; } 二、背景图缩放 background-size background-……阅读更多

CSS3 过渡 （transition ）

0311lc.com说：transition 属性是一个简写属性，用于设置四个过渡属性： 1.transition-property   设置过渡效果的 CSS 属性的名称。一般写all   2.transition-duration   完成过渡效果需要多少秒或毫秒。单位有s和ms（1s=1000ms）   3.transition-timing-function   速度效果的速度曲线,默认是ease，还有linear、ease-in等   4.transiti……阅读更多

鼠标经过图片会移动（css3过渡，overflow：hidden）

0311lc.com说：效果图如下： 代码： <body> <div><img src=”jd.jpg”></div> </body> img{ width: 250px; height: 250px; transition: all 0.6s;/* 过渡效果，图片实现效果，写在图片上 */ } div{ width: 240px;/* 宽度比图片宽度少10px */ height: 250px; border: 1px solid r……阅读更多

css3 2D变形（transform）移动、缩放、旋转、倾斜

0311lc.com说：一. translate(x,y) 或者translateX(x)或者translateY(y) 注意点：translateX(x)和translateY(y)大写X和Y；只写一个值，默认y=0。 <body> <div></div> </body> div{ width: 200px; height: 200px; background: rgb(185, 24, 24); transition: all 1s; } di……阅读更多

css3 动画 animation

0311lc.com说：nimation 属性是一个简写属性，用于设置六个动画属性： 1.animation-name 规定需要绑定到选择器的 keyframe 名称。 2.animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 3.animation-timing-function 规定动画的速度曲线。 4.animation-delay 规定在动画开始之前的延迟。 5.animation-iteration-count 规定动画应该播放的次，n或者infinite无限……阅读更多

心跳（纯代码制作心形，animation动画）

0311lc.com说：思路：利用两个长方形(比例是2:3 | 3:2)可以合成心形，然后利用动画，缩放大小实现心跳（纯代码），效果如下： <body> <div></div> </body> div{ margin: 200px; width: 200px;/* 盒子1宽高是2：3 */ height: 300px; background: rgb(218, 9, 9); position: relative; border-radius: 10……阅读更多

css3 Flex 布局

0311lc.com说：布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。 它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 css3 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 注意： 1.dispaly:flex用在父元素上 2.flex-direction属性决定主轴的方向（即项目的排列方向）。flex-direction: row |……阅读更多

CSS3 新增选择器：伪类选择器和属性选择器

0311lc.com说： 一、结构（位置）伪类选择器（ : ） 1、:first-child 2、:last-child 3、:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) <body> <ul> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> <li>我是第四个</li> <li&……阅读更多