*::before, * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .panela-in::before, .panel { background: url("../img/m4.jpg") no-repeat center; -webkit-background-size: cover; background-size: cover; margin-bottom: 30px; margin-left: 30px; position: relative; } .panel-main { padding: 30px; z-index: 30; position: relative; margin-bottom: 0; border: solid 1px rgba(255,255,255,0.4); background: rgba(255,255,255,0.4); } .panela-in::before { content: ""; position: absolute; background-clip: content-box; width: 100%; height: 100%; padding: 30px; top: 0; left: 0; -webkit-filter: blur(6px); filter: blur(6px); } .panela-in { padding: 30px; position: relative; } .panelb-in { padding: 30px; position: relative; } .panelb-in::before{ background: url("../img/m4.jpg") no-repeat center; -webkit-background-size: cover; background-size: cover; content: ""; position: absolute; background-clip: content-box; width: 100%; height: 100%; padding: 30px; top: 0; left: 0; -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); } .panelc-in::before{ background: url("../img/m4.jpg") no-repeat center; -webkit-background-size: cover; background-size: cover; content: ""; position: absolute; background-clip: content-box; width: 100%; height: 100%; padding: 30px; top: 0; left: 0; -webkit-filter: contrast(50%); filter: contrast(50%); } .panelc-in { padding: 30px; position: relative; } .paneld-in::before{ background: url("../img/m4.jpg") no-repeat center; -webkit-background-size: cover; background-size: cover; content: ""; position: absolute; background-clip: content-box; width: 100%; height: 100%; padding: 30px; top: 0; left: 0; -webkit-filter: sepia(50%); filter: sepia(50%); } .paneld-in { padding: 30px; position: relative; }
@rise
/*背景画像の設定をする*/ .bgImage{ background: url("../../img/code.jpg") no-repeat center; background-size: cover; position: relative; z-index: 0; overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/ } /*:beforeにぼかし効果を設定する*/ .bgImage:before{ content: ''; background: inherit;/*.bgImageで設定した背景画像を継承する*/ -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); position: absolute; /*ブラー効果で画像の端がボヤけた分だけ位置を調整*/ top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1;/*重なり順序を一番下にしておく*/ } p{ margin: 150px 0 200px; text-align: center; font-family: 'Cinzel', serif; font-size: 34px; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,.4); }
#s3Img { width: 300px; animation: haunted 3s infinite; } @keyframes haunted { 0% { filter: brightness(20%); } 48% { filter: brightness(20%); } 50% { filter: sepia(1) contrast(2) brightness(200%); } 60% { filter: sepia(1) contrast(2) brightness(200%); } 62% { filter: brightness(20%); } 96% { filter: brightness(20%); } 96% { filter: brightness(400%); } }