css
bohn
这个作者很懒,什么都没留下…
展开
-
CSS 转换(transform)详解
1.什么是转换 改变元素在页面中的位置,大小,角度以及形状的一种方式。 2D转换:只在x轴和y轴上发生的转换效果 3D转换:增加在z轴的转换效果 2.转换属性 1.转换属性 属性:transform 取值: 1.none 默认值,无任何转换效果 2.transform-function ...原创 2018-08-26 17:28:44 · 1376 阅读 · 0 评论 -
CSS 3 过渡(transition)操作
1.什么是过渡 使得css属性值,在一段时间内平缓变化的效果 2.过渡语法 1.指定过渡属性 属性:transition-property 取值: 1.all 能使用过渡的属性,一律用过渡体现 2.具体属性名 ex: transition-property:background 当背景的属...原创 2018-08-26 20:55:36 · 1493 阅读 · 0 评论 -
CSS3动画(animation)
1.什么是动画 使元素从一种样式逐渐变为另一种样式 即将多个过渡效果放下一起 动画是通过"关键帧",来控制动画的每一步 关键帧: 1.定义动画执行的时间点 2.在该时间点上的样式是什么 2.动画的使用步骤 1.声明动画 为动画起名 定义关键帧 2.为元素调用动画 指定元素调...原创 2018-08-26 21:26:05 · 464 阅读 · 0 评论 -
CSS3表盘(animation+transform+position)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> @keyframes scroll {原创 2018-08-27 09:28:16 · 1177 阅读 · 0 评论 -
svg特效:随机生成30个不同大小颜色的圆,点击后逐渐变大消失
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><svg id原创 2018-09-01 11:25:34 · 1400 阅读 · 0 评论 -
用svg的折线(polyline)绘制一颗五角星
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><svg widt原创 2018-09-01 15:23:07 · 2813 阅读 · 0 评论 -
SVG特效之彩虹渐变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <h1&a原创 2018-09-01 15:52:48 · 1348 阅读 · 0 评论 -
SVG特效之高斯模糊滤镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <h1&a原创 2018-09-01 15:54:19 · 923 阅读 · 0 评论 -
H5地理定位
html5新特性--地理定位(实现需要联网) Geolocation:地理定位,使用js获得当前浏览器所在地理坐标(经度,纬度,海拨,速度)数据,用于实现LBS应用(Location Base Service),如饿了么,高德导航... 获取地理定位类型 (1)浏览器自带对象geolocation[实现不了] (2)百度地图,腾讯地图[准确度高] 手机浏览器如何...原创 2018-09-01 16:54:01 · 1595 阅读 · 0 评论