裸足女神
本帖最后由 马黑黑 于 2024-2-21 12:12 编辑 <br /><br /><style>#papa {
margin: -60px 0 0 calc(50% - 596px);
width: 1024px;
height: 640px;
background:
url('https://638183.freep.cn/638183/t24/1/16u.jpeg') no-repeat center/cover,
url('https://638183.freep.cn/638183/small/rose.jpg') no-repeat 100% 0,
url('https://638183.freep.cn/638183/small/rose.jpg') no-repeat 100% 100%;
background-blend-mode: multiply, multiply;
box-shadow: 3px 3px 20px #000;
border: thick double pink;
pointer-events: none;
z-index: 1;
position: relative;
}
#papa::before {
position: absolute;
content: '';
inset: 420px 804px 40px 40px;
background: url('https://638183.freep.cn/638183/small/rose.jpg') no-repeat center/cover;
border-radius: 50%;
box-shadow: inset 0 0 40px rgba(255,0,0,.6), 0 0 12px rgba(0,0,0,.4);
filter: invert(0.2);
cursor: pointer;
pointer-events: auto;
transition: filter .75s;
animation: turn 6s linear infinite var(--state);
}
#papa:hover::before { filter: unset; }
@keyframes turn { to { transform : rotate(1turn); } }
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=4910529" autoplay loop></audio>
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' :'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
本帖最后由 马黑黑 于 2024-2-21 12:13 编辑 <br /><br /><h2>代码：</h2>
<div class="mum"><pre>
<style>
#papa {
margin: 0 0 0 calc(50% - 596px);
width: 1024px;
height: 640px;
background:
url('https://638183.freep.cn/638183/t24/1/16u.jpeg') no-repeat center/cover,
url('https://638183.freep.cn/638183/small/rose.jpg') no-repeat 100% 0,
url('https://638183.freep.cn/638183/small/rose.jpg') no-repeat 100% 100%;
background-blend-mode: multiply, multiply;
box-shadow: 3px 3px 20px #000;
border: thick double pink;
pointer-events: none;
z-index: 1;
position: relative;
}
#papa::before {
position: absolute;
content: '';
inset: 420px 804px 40px 40px;
background: url('https://638183.freep.cn/638183/small/rose.jpg') no-repeat center/cover;
border-radius: 50%;
box-shadow: inset 0 0 40px rgba(255,0,0,.6), 0 0 12px rgba(0,0,0,.4);
filter: invert(0.2);
cursor: pointer;
pointer-events: auto;
transition: filter .75s;
animation: turn 6s linear infinite var(--state);
}
#papa:hover::before { filter: unset; }
@keyframes turn { to { transform : rotate(1turn); } }
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=4910529" autoplay loop></audio>
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' :'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</pre></div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/colorcode.js';
document.querySelector('body').appendChild(sF);
</script> 这是脚指甲手指甲都做过美甲呗，这样的脚肯定不舍得穿在鞋里{:4_173:} 底图上的玫瑰花应用真好，让画面更美好了。
用伪元素做按钮的方式也很神奇呢。伪元素的灵活运用{:4_199:} inset: 420px 804px 40px 40px;这没看懂，图图都没那么大，这个右内边距怎么可以用到这么大的数字？{:4_203:} 本帖最后由 马黑黑 于 2024-2-21 13:06 编辑
红影 发表于 2024-2-21 12:53
inset: 420px 804px 40px 40px;这没看懂，图图都没那么大，这个右内边距怎么可以用到这么大的数字？{:4_203 ...
inset 作为属性使用时，可对绝对定位（position: absolute）的元素进行上右下左四个方向的实体偏移，分别作用于每一个边基于父元素的位置，四个边围成的范围就是该元素的宽高。而四个值的具体含义是，420px 表示子元素的上边离父元素的上边420px，804px表示子元素的右边离父元素的右边804px，其他两边依此类推。 红影 发表于 2024-2-21 12:43
这是脚指甲手指甲都做过美甲呗，这样的脚肯定不舍得穿在鞋里
对{:4_181:} 怎一个美字了得！{:5_116:} 美甲广告！吸睛神器{:4_170:} 马黑黑 发表于 2024-2-21 13:03
inset 作为属性使用时，可对绝对定位（position: absolute）的元素进行上右下左四个方向的实体偏移，分别 ...
原来起到定位作用，参照系是父元素，因为是伪元素的缘故吧。这个倒是新的呢，学习了{:4_187:} 马黑黑 发表于 2024-2-21 13:07
对
冬天也露着脚趾啊{:4_173:} 醉美水芙蓉 发表于 2024-2-21 18:25
太凉快了吧！
要性感就得做出牺牲{:4_196:} 红影 发表于 2024-2-21 18:18
冬天也露着脚趾啊
室内没问题 马黑黑 发表于 2024-2-21 13:03
inset 作为属性使用时，可对绝对定位（position: absolute）的元素进行上右下左四个方向的实体偏移，分别 ...
原来还是上右下左的规则，刚才跟贴的时候应该来看看回复再整。。{:4_173:} 红影 发表于 2024-2-21 18:17
原来起到定位作用，参照系是父元素，因为是伪元素的缘故吧。这个倒是新的呢，学习了
inset 是内矩形，它的四个值，就是各边对应父元素相同边的距离 老师眼光真心不错，图片绝色。。{:5_116:} 南无月 发表于 2024-2-21 19:27
老师眼光真心不错，图片绝色。。
本来我想拍自己的脚来做，想想还是算了，我这脚呢是做了巨额保险的，要私自使用得和保险公司沟通，这太麻烦 南无月 发表于 2024-2-21 19:26
原来还是上右下左的规则，刚才跟贴的时候应该来看看回复再整。。
一样的道理