1.打字效果
<style>body {padding: 0;margin: 0;}.wrapper {width: 190px;height: 30px;font-size: 20px;position: absolute;top: 40%;left: 40%;background-color: rgb(255, 156, 25);}@keyframes action{0%{opacity: 0;}50%{opacity: 1;}100%{opacity: 0;}}@keyframes byteline {0% {left: 0;opacity: 1;}/* 10% {left: 1em;}20% {left: 2em;}30% {left: 3em;}40% {left: 4em;}50% {left: 5em;}60% {left: 6em;}70% {left: 7em;}80% {left: 8em;}90% {left: 9em;} */100% {left: 10em;}}@keyframes byte {0% {width: 0;opacity: 1;}/* 10% {width: 1em;}20% {width: 2em;}30% {width: 3em;}40% {width: 4em;}50% {width: 5em;}60% {width: 6em;}70% {width: 7em;}80% {width: 8em;}90% {width: 9em;} */100% {width: 10em;opacity: 1;}}.wrapper .text {position: absolute;left: 0;top: 0;overflow: hidden;width: 1em;padding-left: 4px;white-space: nowrap;opacity: 0;animation: byte 10s steps(10, end) infinite;}.wrapper span {position: absolute;left: 0;top: 0;color: #fff;margin-left: 3px;opacity: 0;animation: byteline 10s steps(10, end) infinite, action .7s step-end infinite;}</style></head><body><div class="wrapper"><div class="text">大家好，我叫陈佳欣!</div><span>|</span></div>
2.魔方
<style>
* {
margin: 0;
padding: 0;
}
:root,
body {
perspective: 2000px;
perspective-origin: 800px 100px;
transform-style: preserve-3d;
}
html,body{
height: 100%;
}
@keyframes run{
0%{
transform: translate(-100px, -100px) rotateY(0deg) rotatex(0deg) rotatez(0deg);
}
100%{
transform: translate(-100px, -100px) rotateY(360deg) rotateX(360deg) rotatez(360deg);
}
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
transform: translate(-150px, -150px);
transform-style: preserve-3d;
box-sizing: border-box;
animation: run 6s infinite;
}
.object {
position: absolute;
width: 300px;
height: 300px;
border: 2px solid black;
box-sizing: border-box;
}
.object .line {
width: 2px;
height: 296px;
background-color: black;
position: absolute;
top: 0;
left: 0;
}
.object .line:nth-child(1) {
top: 0;
left: 100px;
}
.object .line:nth-child(2) {
top: 0;
left: 200px;
}
.object .line:nth-child(3) {
top: 100px;
left: 0;
transform: rotate(-90deg);
transform-origin: top;
}
.object .line:nth-child(4) {
top: 200px;
left: 0;
transform: rotate(-90deg);
transform-origin: top;
}
.object:nth-child(1) {
background-color: red;
border: 2px solid red;
transform: rotatey(0deg) translatez(150px);
}
.object:nth-child(2) {
background-color: pink;
border: 2px solid pink;
transform: rotatey(90deg) translatez(150px);
}
.object:nth-child(3) {
background-color: yellow;
border: 2px solid yellow;
transform: rotatey(180deg) translatez(150px);
}
.object:nth-child(4) {
background-color: blue;
border: 2px solid blue;
transform: rotatey(270deg) translatez(150px);
}
.object:nth-child(5) {
background-color: green;
border: 2px solid green;
transform: rotatex(90deg) translateZ(150px);
}
.object:nth-child(6) {
background-color: purple;
border: 2px solid purple;
transform: rotatex(-90deg) translateZ(150px);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="object">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="object">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="object">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="object">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="object">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="object">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<script>
document.body.onmousemove = function(e){
console.log('a')
this.style.perspectiveOrigin = e.pageX + 'px ' + e.pageY + 'px';
}
</script>
</body>
3.手风琴
<style>
.body{
padding: 0;
margin: 0;
}
.wrapper{
position: fixed;
top: calc(50% - 500px);
left: calc(50% - 200px);
width: 400px;
height: 600px;
margin: 200px auto;
background: #eee;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.wrapper .title{
height: 70px;
border-bottom: 1px solid black;
font-size: 30px;
font-weight: bolder;
line-height: 70px;
position: relative;
}
.wrapper .content{
width: 400px;
background-color: #A9A9A9;
font-size: 20px;
background:#808080;
}
.wrapper .content a{
display: block;
width: 400px;
height: 30px;
padding: 10px 20px;
cursor: pointer;
text-decoration: none;
color: #f2f2f2;
}
.wrapper .content div{
display:none;
background: #eee;
color: black;
padding: 10px 20px;
cursor: pointer;
}
.wrapper .content div:target{
display: block;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="title">Accordion List</div>
<div class="content">
<a href="#c1">content1</a><div id="c1">one</div>
<a href="#c2">content2</a><div id="c2">two</div>
<a href="#c3">content3</a><div id="c3">three</div>
</div>
</div>
4.死神eyes
<style>
:root{
background: #000;
}
div{
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 250px);
width: 500px;
height: 200px;
font-size: 90px;
line-height: 200px;
text-align: center;
font-weight: bold;
background-image: url(./eyes.jpg);
background-repeat: no-repeat;
background-size: 2400px 1000px;
background-position: -9000px -200px;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: all .4s;
text-shadow: -10px -10px 5px rgba(255, 0, 255, 0.4),
10px 10px 5px rgba(0, 255, 255, 0.2);
}
div:hover{
background-position: -1500px -200px;
}
</style>
</head>
<body>
<div>死神之eyes</div>
</body>
5.选项卡
<style>
:root,body{
height: 100%;
}
.wrapper{
width: 300px;
height: 30px;
position: absolute;
top: 30%;
left: 200px;
}
.wrapper a{
text-decoration: none;
background-color: pink;
color: #f40;
border-radius: 10px;
height: 30px;
width: 60px;
display: block;
text-align: center;
float: left;
margin-right: 20px;
line-height: 30px;
}
div[id]:not(:target){
display: none;
}
#demo1, #demo2, #demo3{
height: 100%;
width: 100%;
}
#demo1{
background: red;
}
#demo2{
background-color: green;
}
#demo3{
background: #444;
}
</style>
</head>
<body>
<div class="wrapper">
<a href="#demo1"">btn1</a>
<a href="#demo2">btn2</a>
<a href="#demo3">btn3</a>
</div>
<div id="demo1"></div>
<div id="demo2"></div>
<div id="demo3"></div>
</body>
6.圆形效果
<style>
:root{
/* background: black; */
}
/* 圆形效果 */
/* div{
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 200px);
width: 400px;
height: 400px;
/* border: 2px solid #fff;
border-radius: 50%;
box-shadow: inset 0px 0px 70px #fff,
inset 20px 0px 100px #ff0,
inset -20px 0px 100px #0ff,
inset 20px 0px 160px #ff0,
inset -20px 0px 160px #0ff,
0px 0px 70px #fff,
20px 0px 80px #0ff,
-20px 0px 80px #ff0;
} */
/* 圆形效果副本 */
/* div{
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 200px);
width: 400px;
height: 400px;
border-radius: 50%;
box-shadow: inset 0px 0px 20px #fff,
inset 20px 0px 50px #f0f,
inset -20px 0px 50px #0ff,
inset 20px 0px 150px #f0f,
inset -20px 0px 150px #0ff,
0px 0px 20px #fff,
20px 0px 50px #0ff,
-20px 0px 50px #f0f
} */
/* 小太阳 */
/* div{
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 50px 60px #fff,
0px 0px 200px 150px #ff0;
} */
/* 小太阳副本 */
/* div{
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0px 0px 60px 50px #fff,
0px 0px 100px 200px #ff0
} */
/* 小方块变幻 transform: scale(1.25, 1.25) 放大或者缩小1.25倍 transtion: all --当你状态发生改变的时候你要给她限定一个时间，在这个时间里面会给它限定一个动画去过滤*/
/* div{
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all .6s;
}
div::after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
border-radius: 5px;
box-shadow: 3px 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: all .6s;
}
div:hover{
transform: scale(2, 2);
}
div:hover::after{
opacity: 1;
} */
/* 小方块副本 */
/* div{
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
border-radius: 5px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, .1);
transition: all .6s;
}
div:hover{
transform: scale(1.5, 1.5);
}
div::after{
content: "";
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100%;
height: 100%;
border-radius: 10px;
box-shadow: 3px 5px 20px rgba(0, 0, 0, .3);
transition: all .6s;
opacity: 0;
}
div:hover::after{
opacity: 1;
} */
div{
width: 200px;
height: 200px;
/* background-image: repeating-linear-gradient(to right, green, blue); */
/* background-image: linear-gradient(to right, green, blue);; */
/* background-image: repeating-radial-gradient(circle, green, blue); */
/* background-image: radial-gradient(circle, green,blue); */
}
</style>
</head>
<body>
<div></div>
</body>
7.钟表效果
<style>
div {
margin: 0;
padding: 0;
}
.clock {
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 150px);
width: 300px;
height: 300px;
border: 2px solid black;
border-radius: 50%;
background-image: url(./clock.png);
background-size: 100% 100%;
}
@keyframes hour {
0% {
transform: rotate(0deg);
}
/* 8.33% {
transform: rotate(30deg);
}
16.66% {
transform: rotate(60deg);
}
24.99% {
transform: rotate(90deg);
}
33.32% {
transform: rotate(120deg);
}
41.65% {
transform: rotate(150deg);
}
49.98% {
transform: rotate(180deg);
}
58.31% {
transform: rotate(210deg);
}
66.64% {
transform: rotate(240deg);
}
74.97% {
transform: rotate(270deg);
}
83.3% {
transform: rotate(300deg);
}
91.65% {
transform: rotate(330deg);
} */
100% {
transform: rotate(360deg);
}
}
/* .clock .circle {
position: absolute;
top: calc(50% - 4px);
left: calc(50% - 4px);
width: 8px;
height: 8px;
background-color: black;
border-radius: 50%;
} */
.clock .hour {
position: absolute;
top: 50%;
left: calc(50% - 5px);
width: 10px;
height: 130px;
/* background-color: black; */
background-image: url(./minute.png);
background-size: 100% 100%;
transform-origin:top;
/* transform: rotate(15deg); */
animation: hour 12s steps(12, end) infinite;
}
/* .clock .hour::after {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid black;
position: absolute;
left: calc(50% + 60px);
top: -3px;
font-weight: bolder;
transform: scaleX(2);
content: "";
display: block;
} */
</style>
</head>
<body>
<div class="clock">
<div class="circle"></div>
<div class="hour"></div>
<!-- <div class="minute"></div> -->
<!-- <div class="second"></div> -->
</div>
</body>
8.刘德华界面（盒模型）
<style>
body,p{
margin: 0;
padding: 0;
}
.wrapper{
display: flex;
width: 700px;
height: 300px;
background-image: linear-gradient(to top right, rgba(156, 98, 77), rgb(44, 15, 4) );
margin: 200px auto;
}
.left{
flex: 0 0 38%;
box-sizing: border-box;
padding: 20px 20px 0px;
}
.left img{
width: 100%;
height: 100%;
margin: auto auto;
}
.right{
flex: 1 1 65%;
display: flex;
flex-direction: column;
justify-content: center;
}
.right p{
color: #eef;
box-sizing: border-box;
padding-top: 5px;
font-size: 17px;
}
.right p:nth-child(1){
color: #fff;
flex: 0 0 25%;
font-size: 40px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
<img src="./q1.jpg" alt="tu">
</div>
<div class="right">
<p>刘德华</p>
<p>演员、歌手，香港四大天王之一</p>
<p>1961年09月27日（59岁）</p>
</div>
</div>
</body>
9.小马奔腾
<style>
body{
margin: 0;
padding: 0;
}
@keyframes run{
0% {
left: 0;
}
/* 8.33% {
left: -200px;
}
16.66% {
left: -400px;
}
24.99% {
left: -600px;
}
33.32% {
left: -800px;
}
41.65% {
left: -1000px;
}
49.98% {
left: -1200px;
}
58.31% {
left: -1400px;
}
66.64% {
left: -1600px;
}
74.97% {
left: -1800px;
}
83.3% {
left: -2000px;
}
91.65% {
left: -2200px;
} */
100% {
left: -2400px;
}
}
.wrapper{
width: 200px;
height: 100px;
overflow: hidden;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 50px);
/* background: black; */
border: 1px solid black;
}
.horse{
width: 2400px;
height: 100%;
background-image: url(./horse.png);
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
/* left: -400px; */
/* overflow: hidden; */
animation: run 1s steps(12, end) infinite;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="horse"></div>
</div>
</body>
10.照片墙
<style>
body{
margin: 0;
padding: 0;
perspective: 2000px;
/* perspective-origin: 500px 100px; */
transform-style: preserve-3d;
}
html, body{
height: 100%;
}
@keyframes img1{
0%{
transform: translatez(-1000px) rotatey(0deg);
}
100%{
transform: translatez(-1000px) rotatey(360deg);
}
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50px, -50px);
transform-style: preserve-3d;
animation: img1 6s cubic-bezier(0, 0, 0, 0) infinite;
}
.wrapper img{
position: absolute;
width: 200px;
height: 200px;
}
.wrapper img:nth-child(1){
transform: rotateY(0deg) translateZ(400px);
}
.wrapper img:nth-child(2){
transform: rotateY(45deg) translateZ(400px);
}
.wrapper img:nth-child(3){
transform: rotateY(90deg) translateZ(400px);
}
.wrapper img:nth-child(4){
transform: rotateY(135deg) translateZ(400px);
}
.wrapper img:nth-child(5){
transform: rotateY(180deg) translateZ(400px);
}
.wrapper img:nth-child(6){
transform: rotateY(225deg) translateZ(400px);
}
.wrapper img:nth-child(7){
transform: rotateY(270deg) translateZ(400px);
}
.wrapper img:nth-child(8){
transform: rotateY(315deg) translateZ(400px);
}
.wrapper img:nth-child(9){
transform: rotateY(360deg) translateZ(400px);
}
</style>
</head>
<body>
<div class="wrapper">
<img src="./q1.jpg" alt="">
<img src="./q2.jpg" alt="">
<img src="./q3.jpg" alt="">
<img src="./w1.jpg" alt="">
<img src="./w2.jpg" alt="">
<img src="./w3.jpg" alt="">
<img src="./q1.jpg" alt="">
<img src="./q2.jpg" alt="">
<img src="./q3.jpg" alt="">
</div>
<script>
document.body.onmousemove = function (e){
this.style.perspectiveOrigin = "" + e.pageX + "px " + e.pageY + "px";
}
</script>
</body>
11.电子书滑动
<style>
.body {
margin: 0;
padding: 0;
}
.wrapper {
width: 400px;
height: 600px;
border: 2px solid #f0f;
/* overflow: hidden; */
padding: 5px;
position: absolute;
top: 100px;
left: calc(50% - 300px);
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.wrapper .content {
width: 400px;
height: 600px;
column-width: 400px; /* 每一列内容的宽度 */
/* column-gap: 20px;空隙 */
font-size: 17px;
cursor: pointer;
/* text-indent: 2em; */
/* transform: translateX(-414px); padding + width + width */
}
.wrapper .btn {
width: 400px;
height: 35px;
position: absolute;
top: 50%;
}
.wrapper .btn span {
display: block;
width: 80px;
height: 35px;
font-size: 24px;
background: rgba(255, 0, 0, 0.5);
padding: 7px;
text-align: center;
opacity: 0;
cursor: pointer;
}
.wrapper .btn .left {
float: left;
}
.wrapper .btn .right {
float: right;
}
.wrapper .btn:hover span {
opacity: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
日前，印度喀拉拉邦议会领袖语出惊人，声称“如果一名女性被强奸，有自尊的话都会去死”。该言论遭到印度舆论猛烈抨击。
据《印度快报》报道，当地时间1日，印度喀拉拉邦议会领袖穆拉帕里·拉马钱德兰（Mullappally
Ramachandran）在特里凡得琅，发表了这段骇人的言论，随后消息迅速登上媒体头条。
拉马钱德兰的言论针对的是一名印度女性，该女子近日曾指控议会领导人强奸。然而，拉马钱德兰谈及此事时竟语出惊人，称“任何一名被强奸的女性，有自尊的话都会去死，或者避免再次被强奸。但是，她却一直在哭诉，自己被一次又一次强奸。”拉马钱德兰还指，该女子爆料被强奸一事不过是在玩弄政治。
拉马钱德兰的言论一出，很快遭到舆论谴责。喀拉拉邦妇女和儿童发展部部长莎伊拉贾（Shailaja）批评，对于这样的高级政客来说，其言论“危险”且“不恰当”。莎伊拉贾还称，拉马钱德兰的言论反映出他对女性的看法，是完全错误的，“遭到强奸是女人的错吗？实施强奸的人才是罪犯，他们必须受到惩罚。”
事发后，拉马钱德兰很快对自己带有性别歧视的表态予以道歉，并称“如果这些言论被认为是针对特定人群，我表示遗憾，如果这些言论在某些方面被误解为反对妇女，那是不对的。”
男子醉酒后到天安门广场闹事、装睡。在民警将其带回北京市公安局天安门分局治安大队时，还用后脑勺撞击车内地板，还用手指着民警叫嚣，并用脚踹民警、挥拳打民警。北青-北京头条记者11月1日获悉，北京西城法院因妨害公务罪，判处陈某有期徒刑8个月。
2019年12月31日晚人民大会堂有活动，男子醉酒后骑电动车到天安门广场西侧安检棚外，假装志愿者维持验票秩序。民警发现后将其轰走。大约多了10分钟后，陈某持两张活动门票排队经过验票过滤线。民警将陈某叫住，告知他电动车不能停在安检棚出口外。陈某便将两张门票和电动车钥匙都给了过滤线外的一名男子，让其将电动车骑走。
民警见状上前告知陈某，没有门票不能继续在过滤线内活动。但陈某坚持不走，过了一会儿又硬要去安检棚旁边的厕所。民警将其拦住，告知其可以去西交民巷的厕所，并呼叫附近其他民警前来支援。附近民警刚到，还没碰到陈某，陈某就顺势倒在地上一动不动。几名民警上前，将陈某架到便道上，后又将其送到分局治安大队，过程中，陈某没有任何反应，一直装睡。
到了治安大队，民警呼叫999医生给陈某检查身体。医生诊治过程中，陈某“突然醒来”开始手舞足蹈，还用后脑勺敲击车内地板。为了防止陈某自伤自残，民警用双手控制住陈某左手。这时，陈某睁开眼睛，称自己有高血压，民警便准备将陈某送上医院。但在民警将其抬上担架推上救护车时，陈某开始对民警进行攻击，不光踹了民警两脚，还用手指着民警称“往死里干你”，并挥拳打了民警右脸。在民警将陈某控制住后，陈某依然继续挑衅，称“有本事弄死我”，还用戴手铐的左手抡动攻击，造成将民警右手小拇指与掌骨连接处骨折。
当晚，陈某被传唤归案。
据了解，此前，陈某曾多次因盗窃罪、故意伤害罪、嫖娼、扰乱公共场所秩序被判刑及拘留。
法院认为，陈某以暴力方法阻碍国家机关工作人员依法执行任务，妨害了社会管理秩序，其行为已构成妨害公务罪，应依法惩处。关于陈某的辩护人关于民警手指的伤不确定是否为陈某造成的辩护意见已被在案证据所否定，法院不予采纳。鉴于陈某到案后如实供述犯罪事实，认罪认罚，依法可对其从轻处罚。
最终，法院因妨害公务罪，判处陈某有期徒刑8个月。
</div>
<div class="btn">
<span class="left">left</span>
<span class="right">right</span>
</div>
</div>
<script>
var odiv = document.querySelector(".wrapper");
var content = document.querySelector(".content");
var lbtn = document.querySelector(".left");
var rbtn = document.querySelector(".right");
var num = 0;
function isDirection(target) {
this.num = num;
if (target === "rbtn") {
this.num++;
content.style.transform = "translateX(-" + 414 * this.num + "px)";
content.style.transition = "all .6s";
num = this.num;
// console.log(this.num);
} else if (target === "lbtn") {
this.num--;
content.style.transform = "translateX(-" + 414 * this.num + "px)";
content.style.transition = "all .6s";
num = this.num;
}
}
lbtn.onclick = function () {
isDirection("lbtn");
};
rbtn.onclick = function () {
isDirection("rbtn");
};
odiv.onmousedown = function (e) {
this.onmouseup = function (ev) {
console.log(e.clientX - ev.clientX);
var disX = e.clientX - ev.clientX;
var disY = e.clientY - ev.clientY;
console.log(disX, disY)
if(disX > 0 && Math.abs(disX) > 30 && Math.abs(disY)){
console.log('l')
isDirection("rbtn");
}else if(disX < 0 && Math.abs(disX) > 30 && Math.abs(disY)){
isDirection("lbtn");
}
};
};
</script>
若有收获，就点个赞吧
0 人点赞
