大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

border

《BORDER》是由日本朝日电视台出品,于2014年4月10日首播的一部惊悚悬疑电视剧,共9集。桥本一、波多野贵文执导,金城一纪编剧,小栗旬、青木崇高、南波瑠 、远藤宪一、古田新太、泷藤贤一等主演。该剧讲述了内心倍感空虚和孤独的青年刑警石川安吾一次在例行巡查犯罪现场附近时,被神秘之人开枪击中头部而命悬一线。幸运的是石川最终从死亡线上活转过来,并意外拥有了可以跟死者进行对话的能力,并从此利用这种能力为追寻真相而四处奔走[1]  。

css实现边框动画

css实现边框动画 1、css实现边框动画 效果如图: body,div{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 300px; height: 200px; padding: 20px; margin: 50px auto; color: #fff; background-color: #f60; } .border-box{ position: relative; width: 100%; height: 100%; padding: 20px; } .border-box::before

表格单元格内的两端对齐

表格单元格内的两端对齐 前端入坑纪 49 许久未更,最近做了个表格。碰到了两端对齐的坑(以前看到过,后来忘了。果然好记性不如烂笔头),今天来分享下~ 好,详解如下! OK,first things first! github项目地址 性冷淡表格 HTML 结构 姓名 休泽 职业 修业 就是这么简单的一个表格,这里的span是整个效果的灵魂,mark CSS 结构 table { width: 300px; height: 30px; display: inline-block;

自适应缩放图文列表

margin: 0;imgWrp { width: 0; background-repeat: no-repeat; flex-flow: row nowrap; } li p { width: 70% } li以display:flex来展现,这样的话,里面的div和p这类子元素可以很好的控制,比float好用多了。 flex-flow控制子元素的方向和是否换行, justify-content: space-around;设定子元素的主轴排列方式,align-items: center;

又一个css3 loading 打转的圆

又一个css3 loading 打转的圆 前端入坑纪 52 上回写过一篇《一直打转的圆圈》的css3 loading 效果,用的是障眼法. 今天来分享真正的环形圆圈来做, 其实是border啦,哈哈 好,详解如下! OK,first things first! github项目地址 你就是个圆 HTML 结构 就是只用一个div, 任性不, O(∩_∩)O哈哈~ CSS 结构 body{ background-color: aliceblue;circle{ border: 8px solid rgba(218, 141, 218, 0.5); width: 100%; left: -8px;

让渐变成为滚动的进度条吧

bar{ height: 30px; infinite 可以让动画一直循环不停。 这里的 widtheft 2s linear infinite,仅仅是展示效果,请略过 3.@keyframes backgroundPosition 这个是条纹动起来的原理,简单说,便是背景的x轴上的位置,从0px走到60px。 好了,到此,本文告一段落!感谢您的阅读!祝你身体健康,阖家幸福! 打开支付宝首页搜 625097528 领红包,领到大红包的小伙伴赶紧使用哦! 支持你我,扫一扫红包

tab滑动切换内容效果

tab滑动切换内容效果 前端入坑纪 57 今天来分享个曾见到过的tab效果! 好,详解如下! OK,first things first! 点我查看实际效果 简约界面 HTML 结构 a1 a2 a3 a4 a5 a6 a7 a1_Content a2_Content a3_Content a4_Content a5_Content a6_Content a7_Content 所有滚动效果的div都外部嵌套两层div,最外层为屏幕的宽度,次外层为包裹所有内部div一起平铺开来的宽度 CSS 结构 html

环绕按钮动画———原生javascript手作

环绕按钮动画———原生javascript手作 前端入坑纪 58 今天来分享昨天和小伙伴聊到的一个效果 好,详解如下! OK,first things first! 点我查看实际效果 集齐7颗召唤神龙吧,骚年 HTML 结构 B1 B2 B3 B4 B5 B6 B7 ROT 所有的按钮都是包裹在div.roller 里,div.roller 的底色与底部条颜色相同,以制造凸的效果 CSS 结构 html, body { margin: 0; z-index: 99; transform: translateX(-50%) } .

CSS calc计算属性

CSS calc计算属性 calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。 calc()语法 . margin: auto; } #main { border: 8px solid #B8C172; width: 75%; width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);CSS3 calc() test…… test…… test1…… test2…… test3…… footer

React 中合并单元格的正确写法

React 中合并单元格的正确写法 用表格进行页面布局,页面布局在各种浏览器的的兼容性, 都非常好, 而在react中使用表格布局, 合并单元格的写法比较特殊, 博主查了很久才找到正确的写法, 在这里分享一下 效果图 源码 react组件文件 import React, { Component } from 'react';/App.css';App { text-align: center; } td { border: 1px solid #AB3319; width: 30px;title { color: #444444; font-size: 20px; border-collapse: collapse;

使用CSS绘制一个海绵宝宝

使用CSS绘制一个海绵宝宝 其实使用CSS绘制图案对图案的设计要求远比对CSS的掌握需求要高的多,理论上基本图形+遮罩+基本变换可以画出来的图都是可以用CSS画的,这个海绵宝宝是从dribbble上面找的,自己又用sketch重新画了一遍,然后又用CSS比对着绘制的,重点是border-radius、boder画三角形和overflow:hidden做遮罩,渐变和内阴影可以使图案更有层次感,整个过程还是挺有趣的。 在

使用flex布局构建一个iphone容器---基于react,styled-components

import { Container, TopContainer, CameraPhoneWrapper, HeaderWrapper, LightSensor, CameraFront, HeadPhone, HeadPhoneSpace, HeaderBottomSpace, StatusBar, SignalWrapper, SignalDot, LTEWrapper, BatteryWrapper, BatteryHead, BatteryBody, BatteryPercentWrapper, ContentWrapper, BottomWrapper, TouchButton } from '. export default (props) = { return ( 4G 66% {props.children} ); } 样式 import styled from 'styled-components'; flex-grow:1;

CSS画心形、蛋形、菱形、八卦、三角、圆形、对话框、平行四边形

CSS画心形、蛋形、菱形、八卦、三角、圆形、对话框、平行四边形 各图形的html代码均为 ,替换class名称即可 圆形 .circle { width: 100px; height: 100px; border: 1px solid #ccc; border-radius: 50%; background: coral; } 蛋形 .egg { width: 126px; height: 180px; background-color: #eee; box-shadow: 0px 2px 5px #ccc; display: block; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; } 心形 .heart { width: 100px; height: 90px; position: relative; } .heart:

IE浏览器下透明背景元素hover无效

IE浏览器下透明背景元素hover无效 本文来源于 捷搜索 问题: IE下透明背景元素,鼠标移到文字上才会触发hover,当移到文字旁边的背景上不会触发hover,如下案例(代码+效果图): 1536128629714760.png ul{ position: absolute; z-index: 999999; } ul li a{ display: block; line-height: 60px; width: 100px; color: white; border-bottom: 3px solid #ffda00;

【CSS】多行文本超出部分省略号

【CSS】多行文本超出部分省略号 css.jpg 多行文本超出部分用省略号代替: HTML 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 CSS div { width: 100px; height: 65px; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

2018-09-04画太极

2018-09-04画太极 第一种方法:笨方法 不停画圆即可实现。 HTML部分 JS Bin Css部分 body{ background-color: #444; } #YinYang{ width:200px; height: 200px; border: 1px solid black; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 51%, rgba(0,0,0

2018-09-03CSS随笔

2018-09-03CSS随笔 1. 添加CSS的四种方式 内联style 属性 style 标签 外部文件css 例如: @import url(. } 6. 公有的属性可以写在父类上,以减少代码量,通过继承 使子类拥有父类相同属性; 7. 两个span标签之间若存在间隙,不管多大的间隙,系统都默认给出一个空格的距离; 8. margin 和 padding 的区别: margin : 外边距 padding : 内边距 margin : 10px 20px 10px 20px ; } div{ border: 100px solid transparent;

手风琴效果 transition使用

手风琴效果 transition使用 手风琴效果 *{ margin: 0; } ul{ list-style: none; width: 960px; height: 300px; border: 1px solid seagreen; margin: 90px auto; overflow: hidden; } ul li{ float: left; width: 160px; /*添加动画效果*/ transition: all 0.3s; } /*所有的li都变小*/ ul:hover li{ width: 60px; } /*当前的li变大*/ ul li:hover{ width: 600px;动画前.png 动画后.png

jQuery实现点击图标div循环放大缩小功能

jQuery实现点击图标div循环放大缩小功能 很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小时间不断的切换图标状态(箭头向里面,或者箭头向外面) 图片.#scale { background: #FFFFFF url('. width: 26px; } #updmap { border: 1px solid #1E90FF;css({ "width": "400px", "height": "200px", });

CSS基础(一)

CSS基础(一) 前言 作为一个前端开发者,html+css+js是必备技能。绝大多数都认为前端的关键是js,确实如此。不过如果css基础掌握的不够好,一些莫名其妙的样式会另前端开发者很头疼,也会浪费很多时间。这里我做一个总结,供自己查阅,也希望可以帮助到一些人。 1、css三大特性——层叠、优先级、继承 当页面上有多个规则作用于同一个元素的时候,这些规则可能会冲突

vue2.0移动端自定义性别选择提示框

vue2.0移动端自定义性别选择提示框 这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能,很简单但是经常用到,于是写了一个小小的demo,记录下来。 效果图: 图片.png 实现代码: 男 女 export default { data() { return { param: '1' //设置默认值为1,即设置第一个单选框为选中状态 } }, methods: { } }; background: fff; border-bottom: 1px solid #f1ebeb;boy input{ text-align: center;