何かしらのコンテンツに使えるかもしれない？..丸系画像の連続表示..

古い映画の始まりに見られた丸グラフ内で黒カバーが回転するみたいな...

簡単にいえば、丸画像のスライドとご理解ください

どんなことに使うのか？...私もイメージ浮かばず...

お考え下さい

5つの画像を連続表示...

イメージ作動

テキスト

テキスト

テキスト

テキスト

テキスト

記事内配置ＨＴＭＬ...画像コードのみ書き換えてください

<div id="stage">
<div id="frame">
<div id="photos">
<div class="pic"><img src="<% pageDepth %>img/710094__ap.jpg" style="height:200px;width:200px;" alt="" /><span class="memo">テキスト</span></div>
<div class="pic"><img src="<% pageDepth %>img/kabesi7.png" style="height:200px;width:200px;" alt="" /><span class="memo">テキスト</span></div>
<div class="pic"><img src="<% pageDepth %>img/img/gifer.gif" style="height:200px;width:200px;" alt="" /><span class="memo">テキスト</span></div>
<div class="pic"><img src="<% pageDepth %>img/gifer.gif" style="height:200px;width:200px;" alt="" /><span class="memo">テキスト</span></div>
<div class="pic"><img src="<% pageDepth %>img/710094__ap.jpg"style="height:200px;width:200px;" alt="" /><span class="memo">テキスト</span></div>
</div>
<div id="shutter">
<div class="part1"><div class="arc1"></div></div>
<div class="part2"><div class="arc2"></div></div>
</div>
</div>
</div>

スタイルシートＣＳＳ記載

* 表示画面 */
#stage {
position: relative;
width: 200px;
height:200px;
padding:10px;
}
/* 表示枠 */
#frame {
width: 200px;
height: 200px;
position: absolute;
top:1;　　　　/* 高さ位置*/
left:0;
overflow: hidden;
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの基本の animation を設定*/
#photos {
position:absolute;
top:0;
width:1200px;
animation: imgPassToLeft 30s infinite;
}
/*各写真の並びを水平に設定*/
.pic {
position:relative;
float:left;
}
.pic img {
border-radius:50%;
}
.memo {
display:block;
position:absolute;
left:53px;
bottom:20px;
color:#fff;
font-weight:bold;
background:rgba(0,0,0,0.4);
}
/* スライドの上層で開閉するシャッター */
#shutter {
pointer-events: none;
}
/* 左右の半円 */
.part1,.part2 {
position:absolute;
width:100px;height:200px;
overflow:hidden;
background:transparent;
}
.part1 {
top:0;left:100px;
}
.part2 {
top:0;left:0px;
}
.arc1,.arc2 {
top:0;left:0;
width:0;height:0;
border-radius: 50%;
border:100px solid transparent;
}
.arc1 {
margin-left:-101px;
border-top:100px solid #000;
border-right:100px solid #000;
transform:rotate(45deg);
animation:rot1 6s linear infinite;
animation-fill-mode: forwards;
}
.arc2 {
margin-left:1px;
border-bottom:100px solid #000;
border-left:100px solid #000;
transform:rotate(45deg);
animation:rot2 6s linear infinite;
animation-fill-mode: forwards;
}
/* スライド切替animation設定 */
@keyframes imgPassToLeft {
0% { left: 0%;}
19.99%{ left: 0%;}
20% { left:-100%;}
39.99%{ left:-100%;}
40% { left:-200%;}
59.99%{ left:-200%;}
60% { left:-300%;}
79.99%{ left:-300%;}
80% { left:-400%;}
99.99%{ left:-400%;}
100% { left: 0%;}
}
/* 円弧のanimation */
@keyframes rot1 {
0% { transform:rotate(45deg); }
10% { transform:rotate(225deg); }
95% { transform:rotate(225deg); }
100% { transform:rotate(45deg); }
}
@keyframes rot2 {
0% { transform:rotate(45deg); }
10% { transform:rotate(45deg); }
20% { transform:rotate(225deg); }
90% { transform:rotate(225deg); }
95% { transform:rotate(45deg); }
100% { transform:rotate(45deg); }
}

丸型グラフスタイル切替型スライド
丸画像各種仕様設定まとめ
トップページ

関連ページ

画像を円形、丸くするHTML記述

ウェブサイト内に置く画像は、加工編集しなければほとんど円形かと思われます？が、HTML記述で囲めば速攻で丸くできます

一覧