标签 CSS 下的文章

CSS, JS - version

<link 
    rel="stylesheet" 
    href="../resources/css/style.css?version=<?php echo filemtime('../resources/js/login.php.js');?>">
<script 
    type="text/javascript" 
    src="../resources/js/login.php.js?version=<?php echo filemtime('../resources/js/login.php.js)';?>">
</script>

阅读全文

CSS - 背景

body:before {
    content: " ";
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(http://omuy6viz3.bkt.clouddn.com/2017/05/390210278.png) center 0 no-repeat;
    background-size: cover;
    opacity: .3;
}

CSS - 鼠标悬停的 ul li 特效

神奇宝贝

  • 武藏:既然你诚心诚意的发问了。
  • 小次郎:我们就大发慈悲的告诉你。
  • 武藏:为了防止世界被破坏!
  • 小次郎:为了守护世界的和平!
  • 武藏:贯彻爱与真实的邪恶。
  • 小次郎:可爱又迷人的反派角色。
  • 武藏:武藏!
  • 小次郎:小次郎!
  • :我们是穿梭在银河的火箭队!白洞,白色的明天在等着我们!
  • 喵喵:就是这样~喵~

阅读全文

CSS - animation

旋转

.rotate {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 100px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    animation: rotates 3s infinite linear;
    -webkit-animation: rotates 3s infinite linear;
}
@keyframes rotates {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotates {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

阅读全文

CSS - 全站变灰

CSS 代码

html {
  filter: grayscale(100%);/*IE浏览器*/
  -webkit-filter: grayscale(100%);/*谷歌浏览器*/
  -moz-filter: grayscale(100%);/*火狐*/
  -ms-filter: grayscale(100%);/*IE*/
  -o-filter: grayscale(100%);/*opera*/
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*兼容*/
  -webkit-filter: grayscale(1);/*谷歌浏览器*/
}