搜索到
4
篇与
css
的结果
-
哀悼:黑白网页背景设置教程 2022年11月30日，江泽民同志于上海逝世，与此同时，许多网站将风格改为“黑、白、灰”，以表示对江泽民同志的深切哀悼！下面将代码分享给大家：黑白色CSS代码html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }很简单，头部加上一段代码即可。使用教程：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现整站素装。如果网站没有使用CSS，可以在网页/模板的HTML代码<head>和</head>之间插入，注意：要加上<style></style>，否则不起效果。有一些站长的网站可能使用这个CSS不能生效，是因为网站没有使用最新的网页标准协议，网上复制下最新网页标准协议替换即可。其实还可以用JS方法使我们的网站变成黑白色的，不过最好用的还是CSS，因为JS效率会对HTML标签的可能有直接的影响，所以建议还是要用推荐的CSS方法。 -
纯css实现背景颜色渐变动画 body { width: 100wh; height: 100vh; color: #fff; background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 400% 400%; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; } @-webkit-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @-moz-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }
-
图片文字缩放特效 效果展示代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片文字缩放</title> <style type="text/css"> *{ transition:0.2s linear;/*动画过渡时间*/} body{text-align:center; width:1500px; } .box{ width:600px; height:300px; overflow:hidden; position:relative; float:left; margin:10px; box-shadow: 10px 10px 10px #666;/*立体阴影及颜色*/ } img{ width:600px; height:300px;} .box .info{ width:100%; height:100%; position:absolute; left:0; top:0; background-color:#FFF; text-align:center; opacity:0; transform:scale(1.3); } .box:hover .info{ opacity:0.8; transform:scale(1); } .box:hover img{ transform:scale(1.3); } </style> </head> <body> <div class="box"> <img src="images/dog1.jpg" width="550 height="286" /> <div class="info"> <h3>狗诞辰节</h3> <p>狗诞辰节是流行于广西壮族自治区靖西县、隆林各族自治县和德保县一带的壮族民间节日。节日为每年农历的二月二十二日。民间传说狗是天上的龙犬，农历二月二十二日是它的诞辰，是日狗神显灵之时，吃狗肉可令人益寿延年。因此，这一天壮族家家户户烹食狗肉，形成传统，流传。</p> <a href="##" class="btn">learn more</a> </div> </div> <div class="box"> <img src="images/dog2.jpg" width="550 height="286" /> <div class="info"> <h3>狗诞辰节</h3> <p>狗诞辰节是流行于广西壮族自治区靖西县、隆林各族自治县和德保县一带的壮族民间节日。节日为每年农历的二月二十二日。民间传说狗是天上的龙犬，农历二月二十二日是它的诞辰，是日狗神显灵之时，吃狗肉可令人益寿延年。因此，这一天壮族家家户户烹食狗肉，形成传统，流传。</p> <a href="##" class="btn">learn more</a> </div> </div> </body> </html>原理先把文字隐藏在图片上，然后设置动画过渡时间为1秒，先将文字放大再缩小，将图片放大{cloud title="" type="lz" url="https://beginner.lanzouf.com/i13Sl0338qyf" password=""/}
-
