CSS3 隨機背景圖片切換特效

Wed, 16 May 2018 11:58:08 +0000

CSS3 隨機背景圖片淡入淡出切換特效演示效果如本篇文章背景所示看大家扒我的幻想領域二次元限定版扒得比較累，扒了大半個小時的，抽空整理一下發出來設計之初本來是打算使用 jQuery 進行實現的，但是注意到了 CSS3 的 @keyframes 規則，CSS3 已經強大到曾經只有 JS 才能實現的效果

定義和用法

透過 @keyframes 規則，您能夠建立動畫。

建立動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。

在動畫過程中，您能夠多次改變這套 CSS 樣式。

以百分比來規定改變發生的時間，或者透過關鍵詞 “from” 和 “to”，等價於 0% 和 100%。

0% 是動畫的開始時間，100% 是動畫的結束時間。

為了獲得最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。

註釋：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。

核心 CSS 部分 (記得切換圖片地址)

CSS

body {
	background: #000;
	background-attachment: fixed;
	word-wrap: break-word;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat
}

ul {
	list-style: none
}

.cb-slideshow li:nth-child(1) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341099)
}

.cb-slideshow li:nth-child(2) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341159)
}

.cb-slideshow li:nth-child(3) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341149)
}

.cb-slideshow li:nth-child(4) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341139)
}

.cb-slideshow li:nth-child(5) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341129)
}

.cb-slideshow li:nth-child(6) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341119)
}

.cb-slideshow,.cb-slideshow:after {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -2
}

.cb-slideshow:after {
	content: ''
}

.cb-slideshow li span {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: none;
	opacity: 0;
	z-index: -2;
	-webkit-backface-visibility: hidden;
	-webkit-animation: imageAnimation 36s linear infinite 0s;
	-moz-animation: imageAnimation 36s linear infinite 0s;
	-o-animation: imageAnimation 36s linear infinite 0s;
	-ms-animation: imageAnimation 36s linear infinite 0s;
	animation: imageAnimation 36s linear infinite 0s
}

.cb-slideshow li:nth-child(2) span {
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	-o-animation-delay: 6s;
	-ms-animation-delay: 6s;
	animation-delay: 6s
}

.cb-slideshow li:nth-child(3) span {
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 12s;
	-o-animation-delay: 12s;
	-ms-animation-delay: 12s;
	animation-delay: 12s
}

.cb-slideshow li:nth-child(4) span {
	-webkit-animation-delay: 18s;
	-moz-animation-delay: 18s;
	-o-animation-delay: 18s;
	-ms-animation-delay: 18s;
	animation-delay: 18s
}

.cb-slideshow li:nth-child(5) span {
	-webkit-animation-delay: 24s;
	-moz-animation-delay: 24s;
	-o-animation-delay: 24s;
	-ms-animation-delay: 24s;
	animation-delay: 24s
}

.cb-slideshow li:nth-child(6) span {
	-webkit-animation-delay: 30s;
	-moz-animation-delay: 30s;
	-o-animation-delay: 30s;
	-ms-animation-delay: 30s;
	animation-delay: 30s
}

@-webkit-keyframes imageAnimation {
	0% {
		opacity: 0;
		-webkit-animation-timing-function: ease-in
	}

	8% {
		opacity: 1;
		-webkit-transform: scale(1.05);
		-webkit-animation-timing-function: ease-out
	}

	17% {
		opacity: 1;
		-webkit-transform: scale(1.1) rotate(0)
	}

	25% {
		opacity: 0;
		-webkit-transform: scale(1.1) rotate(0)
	}

	100% {
		opacity: 0
	}
}

クリックして展開し、詳細を表示

當然還是需要配合 HTML 程式碼的 HTML 部分 (其中的文字部分和 <li> 的數量是可以隨意更改的)

簡單的css3頭像旋轉與3D旋轉效果

Mon, 10 Jul 2017 07:45:23 +0000

經常會在一些網站看到評論區，評論人的頭像當滑鼠經過會360°旋轉

先來看一下效果

.tximg{ height:300px; border-radius:50%; border:2px solid green; /變化規則/ transition:all 2s; } .tximg:hover{ /* 變化動作定義2d旋轉，參數填寫角度 */ transform:rotate(360deg); }

CSS 部分

CSS

img{
	height:300px;
	border-radius:50%;
	border:2px solid green;
	/*變化規則*/
	transition:all 2s;
}

img:hover{
	/*
		變化動作
		定義2d旋轉，參數填寫角度
	*/
	transform:rotate(360deg);
}

クリックして展開し、詳細を表示

HTML 部分 (很簡單，就一張圖片)

用CSS3繪製iPhone手機

Mon, 03 Jul 2017 06:09:01 +0000

先上效果圖，先睹為快。(這絕對不是一張圖片。嗯~~這話怎麼怪怪的~~)

不要問我iPhone幾，因為我也不知道，沒用過，你懂得。

css樣式部分

#phone{ width:250px; height:500px; background-color:#2E2E2E; border:10px solid #3B3B3B; margin:100px auto; border-radius:30px;/設定div元素的圓角邊框/ }

#camera{ width:8px; height:8px; background-color:#1A1A1A; border-radius:50%; border:2px solid #505050; margin:10px auto;/距離上邊距10px 左右居中/ }

#receiver{ width:80px; height:8px; border:2px solid #505050; margin:10px auto; border-radius:10px; background-color:#1A1A1A; }

#screen{ width:225px; height:385px; background-color:#0A0A0A; border:3px solid #1C1C1C; margin:10px auto; }

#btn{ width:40px; height:40px; background:#1A1A1A; border-radius:50%; /當寬高相同時，則為圓/ margin:10px auto; }

/:before 選擇器在被選元素的內容前面插入內容。/ #btn:before{ width:22px; height:22px; border:2px solid white; border-radius:30%; content:""; /即使插入的內容為空也需要寫，否則不顯示/ display:inline-block; margin-top:7px; margin-left:7px; }

Css on MoeJueのブログ

CSS3 隨機背景圖片切換特效

定義和用法

簡單的css3頭像旋轉與3D旋轉效果

用CSS3繪製iPhone手機