水墨画风格首页HTML+CSS
成品
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我有古诗三千title>
<link rel="stylesheet" href="css/index.css">
head>
<body>
<header>
<div class="logo float-left">
<a href="">青莲居士a>
div>
<div class="nav-icon float-right">
<span>span>
<span>span>
<span>span>
div>
header>
<div class="full-menu">
<div class="fullmenu-content">
<ul class="page-menu">
<li><a class="active" href="index.html">李白/诗仙a>li>
<li><a href="">峨眉山月半轮秋a>li>
<li><a href="">影入平羌江水流a>li>
<li><a href="">夜发清溪向三峡a>li>
<li><a href="">思君不见下渝州a>li>
<li class="social">
<a href="#"><img src="image/twitter.svg" alt="">a>
<a href="#"><img src="image/dribbble.svg" alt="">a>
<a href="#"><img src="image/instagram.svg" alt="">a>
<a href="#"><img src="image/send.svg" alt="">a>
li>
ul>
div>
<a href="#0" class="modal-close">a>
div>
<div class="cd-transition-layer visible opening">
<div class="bg-layer">div>
div>
<div class="wrapper">
<section class="main">
<div class="main-content">
<span class="hello">吾为诗仙span>
<h1 class="main-title">执唐诗牛耳者<br>
唯李杜二人也！h1>
<div class="social">
<a href="#"><img src="image/twitter.svg" alt="">a>
<a href="#"><img src="image/dribbble.svg" alt="">a>
<a href="#"><img src="image/instagram.svg" alt="">a>
<a href="#"><img src="image/send.svg" alt="">a>
div>
div>
section>
<script src="js/jquery.js">script>
<script src="js/index.js">script>
div>
body>
html>
CSS
body {
font-family: 'Roboto Condensed', sans-serif;
overflow: hidden;
margin: 0;
padding: 0;
}
.nav-up {
top: -40px;
}
li {
list-style: none;
}
/*------------------------ 背景界面 ------------------------*/
.main {
background: url(../image/back.jpg) no-repeat;
background-size: cover;
display: table;
width: 100%;
position: relative;
}
.main:after {
content: '';
width: 100%;
height: 100%;
left: 0;
z-index: -1;
opacity: .85;
position: absolute;
}
.nav-icon {
margin-left: 990px;
margin-top: -540px;
}
.main-title {
font-size: 24px;
line-height: 28px;
color: black;
font-weight: 400;
}
.hello {
color: black;
line-height: 51px;
}
.main-content {
padding: 0 60px;
vertical-align: middle;
display: table-cell;
height: 100%;
width: 100%;
}
.logo a {
color: black;
margin-left: 30px;
text-decoration: none;
font-size: 30px;
}
.logo a:hover {
text-decoration: none;
}
/*------------------------ 菜单 ------------------------*/
.full-menu {
position: fixed;
top: 0;
left: 0;
z-index: 3;
height: 100%;
width: 100%;
overflow: hidden;
background-size: cover;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
/* 菜单 */
.full-menu .modal-close {
/* 'X' icon */
position: absolute;
z-index: 1;
top: 0;
right: 0;
padding: 50px;
height: 45px;
width: 45px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3) url(../image/cd-icon-close.svg)no-repeat center center;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transform: scale(0);
/* 此处可能出现报错，是因为js校验的问题，不影响使用 */
visibility 0s 0.3s,
opacity 0.3s 0s;
transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
}
.no-touch .full-menu .modal-close:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.full-menu.visible {
background-size: 100%;
opacity: 1;
visibility: visible;
transition: opacity 0.7s, visibility 0s;
}
.full-menu.visible .fullmenu-content {
-webkit-overflow-scrolling: touch;
}
.full-menu.visible .modal-close {
visibility: visible;
opacity: 1;
transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
transform: scale(1);
}
@media only screen and (min-width: 1100px) {
.full-menu .fullmenu-content {
padding: 6em 5%;
}
.full-menu .modal-close {
height: 60px;
width: 60px;
}
.full-menu p {
font-size: 25px;
}
}
.cd-transition-layer {
position: fixed;
top: 0;
left: 0;
z-index: 2;
height: 100%;
width: 100%;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.cd-transition-layer .bg-layer {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-2%);
transform: translateY(-50%) translateX(-2%);
height: 100%;
/* 25帧 */
width: 2500%;
background: url(../image/ink.png) no-repeat 0 0;
background-size: 100% 100%;
}
.cd-transition-layer.visible {
opacity: 1;
visibility: visible;
}
.cd-transition-layer.opening .bg-layer {
animation: cd-sequence 1.0s steps(24);
animation-fill-mode: forwards;
}
.cd-transition-layer.closing .bg-layer {
animation: cd-sequence-reverse 1.0s steps(24);
animation-fill-mode: forwards;
}
.no-cssanimations .cd-transition-layer {
display: none;
}
@keyframes cd-sequence {
0% {
transform: translateY(-50%) translateX(-2%);
}
100% {
transform: translateY(-50%) translateX(-98%);
}
}
@keyframes cd-sequence-reverse {
0% {
transform: translateY(-50%) translateX(-98%);
}
100% {
transform: translateY(-50%) translateX(-2%);
}
}
/*------------------------ 头部 ------------------------*/
.full-menu .fullmenu-content {
display: flex;
justify-content: center;
}
.page-menu {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.page-menu li {
line-height: 50px;
margin-left: -25px;
}
.page-menu li:last-child {
line-height: 90px;
}
.page-menu li a {
color: #fff;
text-decoration: none;
font-size: 26px;
position: relative;
font-weight: 500;
}
.social img {
width: 15px;
}
.main .social {
margin-top: 30px;
}
.social a {
margin-right: 20px;
}
.social a:hover img {
opacity: .6;
transition: all ease 0.3s;
}
.social a:last-child {
margin-right: 0px;
}
header {
position: fixed;
padding: 30px;
top: 0;
width: 100%;
z-index: 2;
}
.nav-icon {
width: 23px;
height: 18px;
position: relative;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
margin-top: 7px;
}
.nav-icon span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: red;
opacity: 1;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.nav-icon span:nth-child(1) {
top: 0px;
transform-origin: left center;
}
.nav-icon span:nth-child(2) {
top: 6px;
transform-origin: left center;
}
.nav-icon span:nth-child(3) {
top: 12px;
transform-origin: left center;
width: 60%;
right: 0 !important;
}
.nav-icon:hover span:nth-child(3) {
width: 100%;
}
JS
'use strict';
$(document).ready(function () {
var width = 100,
// timimg是记时功能
perfData = window.performance.timing,
EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
time = ((EstimatedTime / 1000) % 50) * 100
// 百分比增加动画
var PercentageID = $(".percentage"),
start = 0,
end = 100,
durataion = time;
animateValue(PercentageID, start, end, durataion);
function animateValue(id, start, end, duration) {
var range = end - start,
current = start,
increment = end > start ? 1 : -1,
stepTime = Math.abs(Math.floor(duration / range)),
obj = $(id);
var timer = setInterval(function () {
current += increment;
$(obj).text(current);
//obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
setTimeout(function () {
$('.preloader').fadeOut();
$('.cd-transition-layer').addClass('closing').delay(1000).queue(function () {
$(this).removeClass("visible closing opening").dequeue();
});
}, time);
// 点击链接时淡出效果
$(document).on("click", "a:not(.lightbox)", function () {
var newUrl = $(this).attr("href");
if (!newUrl || newUrl[0] === "#") {
location.hash = newUrl;
return;
}
$("html").fadeOut(function () {
location = newUrl;
});
return false;
});
var paget = $(".page-title .title").text();
$(".page-title").append("");
$(".page-title span").append(paget);
//文章页
$('.blog-post .blog-link').hover(function () {
$(this).parent('.content-outter').parent('.blog-post').toggleClass('mousef');
$(this).parent('.blog-post').toggleClass('mousef');
});
});
$(window).load(function () {
function smokeeffect() {
var modalTrigger = $('.nav-icon'),
transitionLayer = $('.cd-transition-layer'),
transitionBackground = transitionLayer.children(),
modalWindow = $('.full-menu');
var frameProportion = 1.78, //png frame aspect ratio
frames = 25, //number of png frames
resize = false;
//set transitionBackground dimentions
setLayerDimensions();
$(window).on('resize', function () {
if (!resize) {
resize = true;
(!window.requestAnimationFrame) ? setTimeout(setLayerDimensions, 300): window.requestAnimationFrame(setLayerDimensions);
}
});
//open modal window
modalTrigger.on('click', function (event) {
event.preventDefault();//阻止最初事件
transitionLayer.addClass('visible opening');
var delay = ($('.no-cssanimations').length > 0) ? 0 : 600;
setTimeout(function () {
modalWindow.addClass('visible');
}, delay);
});
//close modal window
modalWindow.on('click', '.modal-close', function (event) {
event.preventDefault();
transitionLayer.addClass('closing');
modalWindow.removeClass('visible');
transitionBackground.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function () {
transitionLayer.removeClass('closing opening visible');
transitionBackground.off('webkitAnimationEnd oanimationend msAnimationEnd animationend');
});
});
function setLayerDimensions() {
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
layerHeight, layerWidth;
if (windowWidth / windowHeight > frameProportion) {
layerWidth = windowWidth;
layerHeight = layerWidth / frameProportion;
} else {
layerHeight = windowHeight * 1.2;
layerWidth = layerHeight * frameProportion;
}
transitionBackground.css({
'width': layerWidth * frames + 'px',
'height': layerHeight + 'px',
});
resize = false;
}
}
smokeeffect()
/*--------------------------------------------------
Hero Section Height
---------------------------------------------------*/
function homeh() {
var hometext = $('.main')
hometext.css({
"height": $(window).height() + "px"
});
}
homeh();
$(window).resize(homeh);
$(".page-menu li:not(.social) a, .portfolio_filter ul li a").append("");
$('.nav-icon').on("click", function () {
$(this).toggleClass('modal-close');
});
});
里面的矢量图使用的是svg文件，因为文章中不能上传，所以会放在我上传的资源中，可以下载后自行查阅，图片和jQuery.js也将放在其中