水墨画风格首页HTML+CSS

成品

HTML

<!DOCTYPE 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"><!-- svg为可伸缩的矢量图 本体是xml文件 --><a href="#"><img src="data:image/twitter.svg" alt=""></a><a href="#"><img src="data:image/dribbble.svg" alt=""></a><a href="#"><img src="data:image/instagram.svg" alt=""></a><a href="#"><img src="data: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="data:image/twitter.svg" alt=""></a><a href="#"><img src="data:image/dribbble.svg" alt=""></a><a href="#"><img src="data:image/instagram.svg" alt=""></a><a href="#"><img src="data: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("<span></span>");$(".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 ratioframes = 25, //number of png framesresize = false;//set transitionBackground dimentionssetLayerDimensions();$(window).on('resize', function () {if (!resize) {resize = true;(!window.requestAnimationFrame) ? setTimeout(setLayerDimensions, 300): window.requestAnimationFrame(setLayerDimensions);}});//open modal windowmodalTrigger.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 windowmodalWindow.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("<span></span>");$('.nav-icon').on("click", function () {$(this).toggleClass('modal-close');});});

里面的矢量图使用的是svg文件，因为文章中不能上传，所以会放在我上传的资源中，可以下载后自行查阅，图片和jQuery.js也将放在其中

水墨画风格首页HTML+CSS相关推荐

用html语言编写美食栏目源码,仿美食网首页html+css 完全源码和图片
[实例简介] 用了一个多星期仿的美食网的首页,html和css分离,完整的源码及图片: [实例截图] [核心代码] kikibingo_6821075 └── 仿美食网首页html+css 完全源码和 ...
学生dreamweaver网页设计作业成品：电商网页设计——仿淘宝静态首页(HTML+CSS)
学生dreamweaver网页设计作业成品:电商网页设计--仿淘宝静态首页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...
HTML5期末大作业：动漫网页主题设计——卡通漫画教育首页HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成...
HTML5期末大作业:动漫网页主题设计--卡通漫画教育首页HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成临近期末, 你还在为HT ...
HTML网页设计期末课程大作业 ~医药用品购物商城首页(HTML+CSS)
HTML网页设计期末课程大作业 ~医药用品购物商城首页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
HTML5期末大作业：动漫网页主题设计——卡通漫画教育首页HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成
HTML5期末大作业:动漫网页主题设计--卡通漫画教育首页HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成临近期末, 你还在为HT ...
清新风格按钮纯CSS效果
清新风格按钮纯CSS效果(供源码下载) 发表于 2012 年 2 月 15 日 CSS3的属性大家都十分熟悉,虽然ie不支持这些效果,但随着移动互联网的迅速发展,很多web应用都是由HTML5和CSS ...
仿Apple官网首页 HTML+CSS+JS
WEB前端开发实践仿Apple官网首页 HTML+CSS+JS 一.前言静态页面,没有后端数据,只是单一的HTML 自写的APPLE.小米源码,严禁盗用二.图片资源这里用了一些iconfont ...
2022仿淘宝网首页html+css
效果图如下: 所有文件已经打包好了,上链接: 蓝奏云: 仿淘宝网站首页.zip - 蓝奏云百度网盘: https://pan.baidu.com/s/1DsloErpJFQ_stwLQYb8dYw? ...
个人网站—首页HTML+CSS（超级简单的那种）
这是一个刚学web的学生写的大作业的一部分. 大佬们不需要看. 先上效果展示介绍一下页面布局整体就是一个很简单的三行三列式布局. 上边有一条header. 中间是main(里面是三列left ce ...
淘宝首页html css
自己做了一个淘宝首页的HTML+CSS 新手有不足,请指教在这里插入代码片 ```<!DOCTYPE html> <html> <head><meta ch ...

水墨画风格首页HTML+CSS

成品

HTML

CSS

JS

水墨画风格首页HTML+CSS相关推荐

最新文章

热门文章