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说:一、导航条模板(官方文档) <nav class=”navbar navbar-default”> <div class=”container-fluid”> <!– Brand and toggle get grouped for better mobile display –> <div class=”navbar-header”> <button type=”button” class=”navbar-tog……阅读更多
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 目前使用最多,稳定,但是放弃……阅读更多
3D切割轮播图
0311lc.com说:一、3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二、代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>3D切割轮播图</title> <style> *{ margin: 0; padding: 0; } .box{ width: 500px; height……阅读更多
文字阴影和背景缩放、背景线性渐变、多背景以及透明度
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 |……阅读更多
CSS 初始化
0311lc.com说:一、normallize.css(github的一个项目 点击进入链接 /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height ……阅读更多
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&……阅读更多