PHP博客美化常用代码
自定义CSS
一.头像呼吸光环和鼠标悬停旋转放大
/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.img-full:hover {
transform: scale(1.15) rotate(720deg);
}
@keyframes light {
0% {
box-shadow: 0 0 4px #f00;
}
25% {
box-shadow: 0 0 16px #0f0;
}
50% {
box-shadow: 0 0 4px #00f;
}
75% {
box-shadow: 0 0 16px #0f0;
}
100% {
box-shadow: 0 0 4px #f00;
}
}
二.文章内打赏图标跳动
/文章内打赏图标跳动/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
三.首页文章列表悬停上浮
.blog-post .panel:not(article) { transition: all 0.3s; } .blog-post .panel:not(article):hover {transform: translateY(-10px); box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47); }
四.首页头图悬停放大并超出范围
.index-post-img {overflow: hidden; } .item-thumb {transition: all 0.3s; } .item-thumb:hover {transform: scale(1.1) }
五.文章内头图和图片悬停放大并超出范围
/*文章内头图和文章图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
六.文章标题居中
/*文章标题居中*/
.panel h2{
text-align: center;
}
.panel-small h2{
text-align: center;
}
.panel-picture h3{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
七.首页文章头图放大特效
/*首页文章头图放大特效*/
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-small:not(article) {
transition: all 0.3s;
}
.blog-post .panel-small:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture:not(article) {
transition: all 0.3s;
}
.blog-post .panel-picture:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
.index-post-img {
overflow: hidden;
}
.index-post-img-small {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
.item-thumb-small {
transition: all 0.3s;
}
.item-thumb-small:hover {
transform: scale(1.1)
}
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
八.Logo扫光效果
/* logo扫光 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
九.海浪背景
1.自定义CSS
/ 海浪背景CSS部分 /
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;}
.waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; }
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }
2.自定义头部代码
<div id="wavesDIV" style="display: block;">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
<use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
</g>
</svg>
</div>
十.CSS 网页弹出二维码
1.在HTML中添加需要弹出的位置
在需要展示二维码的地方添加如下代码 其中标签内容可以根据需要修改成图片等 例如“查看我的微信”href=”javascript:”表示标签作为按钮使用 但实际不做跳转 实现url访问拦截
<a class="facebook weixin" href="javascript:">
<i class="fab fa-weixin">查看我的微信</i>
</a>
2.在style.css样式表中添加如下代码
其中URL为图片的相对地址:images/ego.jpg
首先父元素添加相对定位 然后以”:after” 伪元素在元素的内容之后插入二维码transform: scale(0)和opacity: 0实现二维码隐藏weixin:hover::after {当鼠标经过时显示二维码}
/*微信二维码*/
.weixin{
position:relative;
}
.weixin::after{
content: url(images/ego.jpg);
position: absolute;
right: -28px;
top: -135px;
z-index: 99;
width: 420px;
height: 420px;
border: 5px solid #0095ba;
border-radius: 4px;
transform-origin: top right;
transform: scale(0);
opacity: 0;
-webkit-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.weixin:hover::after{
transform:scale(1);
opacity: 1;
}
国家公祭日全站变灰
自定义输出head头部的HTML代码
/*国家公祭日全站变灰*/
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>
当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »