Skip to content

Instantly share code, notes, and snippets.

View wplnancy's full-sized avatar

wplnancy wplnancy

View GitHub Profile
@wplnancy
wplnancy / index.html
Created January 13, 2017 09:21
360全屏动画的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>360安全导航</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="fullpage" id="fullpage">
<!-- 第一屏 -->
@wplnancy
wplnancy / index.html
Created January 13, 2017 08:48
钟表的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 钟表</title>
<style>
.clock {
width: 200px;
height: 200px;
margin: 40px auto;
@wplnancy
wplnancy / index.html
Created January 13, 2017 08:46
整屏滚动的实现(target)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>全屏slidershow效果</title>
<style>
* {
margin: 0;
padding: 0;
}
@wplnancy
wplnancy / index.html
Last active January 13, 2017 15:15
跳动的心CSS3实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Red Heart</title>
<style>
html, body {
height: 100%;
}
@wplnancy
wplnancy / index.html
Created January 6, 2017 14:56
box-shadow的巧妙使用变化做边框的特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>drop-shadows</title>
<style>
body {
padding: 20px 0 0;
font: 14px/1.5 Arial, sans-serif;
text-align: center;
@wplnancy
wplnancy / index.html
Created January 6, 2017 02:54
正(长)方体的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
}
@wplnancy
wplnancy / index.html
Created January 6, 2017 02:52
使用锚点定位和自定义动画实现图片展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
@wplnancy
wplnancy / css.js
Created December 19, 2016 14:05
将css封装到原型上
/**
* Created by Administrator on 2016/12/7.
*/
var isStanderBrowser = window.getComputedStyle;
Element.prototype.getCss = function (attr) {
var val = null;
if (isStanderBrowser) {
val = window.getComputedStyle(this, null)[attr];
} else {
if (attr == 'opacity') {
@wplnancy
wplnancy / index.html
Created December 19, 2016 08:17
伸缩导航
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拉伸</title>
<style>
*{ margin:0; padding:0;}
.span{ display:block; width:500px; height:50px; background:#999; text-align:center; line-height:50px; cursor:pointer; margin:10px auto;}
.div{ width:500px; height:0px; background:#FC9; margin:0 auto; overflow:hidden;transition:height 0.5s;}
.active{ background:#FF3;}
@wplnancy
wplnancy / index.html
Created December 19, 2016 08:05
选项卡(原生和jq的封装)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body, div, ul, li {
margin: 0;
padding: 0;
}